Create A Website Learners Guide PDF

Learners Guide
Create a website for a

stakeholder using a mark-
up language
Using HTML5 and CSS3
Licensed to:
Best Pacific Institute of Ed.
2014 - 2a ATC New Zealand
www.instant.org.nz
i
Licensed to Best Pacific Institute of Ed.

Create a website for a stakeholder using a mark-up 11122014-US-85881 INSTANT Education Solutions
language 2a ATC New Zealand www.instant.org.nz
ii
About this
Learners Guide
Learning Purpose & Outcomes
The purpose of this unit of learning is to be able to create a website using a mark-up language, for
a specific stakeholder.
Once you have successfully completed this unit of learning, you will be able to do the following.
Plan and design a website for a stakeholder.
Create the website to design specifications, using a mark-up language.
Test and evaluate the website.
Create an end-user document to facilitate the use of the website.
Note:
Before you begin work on this unit of learning you should have completed Unit 25656
Create a website using a mark-up language to meet a set brief, or have equivalent
knowledge and skills.
You should already be familiar with how to do the following, as these are only briefly
reviewed in this guide.
Plan a website to meet the specifications of a provided brief.
Create a website using HTML and CSS.
Test and evaluate the website to ensure it is fit for purpose.

11122014-US-85881 INSTANT Education Solutions Create a website for a stakeholder using a mark-up
2a ATC New Zealand www.instant.org.nz language
iii
Study Notes

1
Contents
Planning and Designing a Website 2
Responsive Web Design (RWD) 2
Creating a Brief 5
Putting together a plan 7
Creating an End-User Document 9
Semantic HTML5 - A Review of the Basics 11

Website Development Principles 11
HTML Basics Review 13
Basic Structure of a Web Page 14
Other Structure Elements 16
Media Elements 17
CSS3 - A Review of the Basics 20

How HTML and CSS work together 20
CSS Syntax 21
How CSS selects what to style 21
The Box Model 24
Common CSS Rules 25
Styling with CSS (Part 1) 30

Using Developer Tools 30
Working with Colour 33
Setting the Viewport 35
CSS Units of Measurement 37
Using Google Fonts and the @font-face rule 40
Font Sizing 43
Styling with CSS (Part 2) 44

Creating Horizontal Lists 44
Changing the Stack Order of Elements 48
Using the CSS position Property 50
Centring an Element 55
Scaling Images to Fit their Containers 55
Responsive Web Design and Website Evaluation 57

Apply Different Stylesheets for Different Viewport Sizes 58
Embed Different Images for Different Viewport Sizes 63
Evaluating the Web Pages 64
Staying Informed and Current 65
Glossary 66
Appendix A: TourNz Website concept sketches and mockups 67

2
LESSON 1:
Planning and Designing a

Website
Learning Objective
When you have completed this lesson you will understand the basic A space has been left
principles of responsive web design. on the right of every
page for you to make
You will also be able to do the following. notes about what you
Formulate a brief for a website. are learning.
Develop a plan for the development of the website which meets
the specifications in the brief.
Create a conceptual design for the website which incorporates
the principles of responsive web design.
Write a simple end-user document.
You should already be familiar with the basics of how to create a

conceptual design and plan based on a provided brief. In this lesson,
we will look at how you can develop your own brief based on the
requirements of a stakeholder. We will then briefly review the process
of creating a plan and conceptual design to meet the requirements of
that brief.
But first we are going to look at some of the key principles of responsive
web design - an approach to web page design that aims to ensure pages
are displayed for maximum accessibility across a range of devices.
Responsive Web Design (RWD)
In the past, web developers only needed to create web pages

which worked on desktop or laptop computers. Today however,
people access websites using a wide range of devices - including
smartphones, tablets, netbooks, laptops and desktop computers.
All these devices have very different viewport sizes. A viewport
is the window or viewing area on the device's screen (ie it is the
part of the screen on which you can see content). The challenge
for web developers is to create websites which look good and work
as expected on all these different devices. Simply scaling down the
desktop version of a website to fit on a smartphone does not work
because the text and other content becomes too small.

3
LESSON 1: Planning and Designing a Website
One possible solution is to develop different websites for different

devices. So, for example, you could have a 'stripped down' version
of the website for mobile devices.
Another approach, which allows the full website to be available on all
devices is responsive web design (RWD).
Check out some responsive design websites yourself. You

Time to can simulate how they would look on different screens by
Investigate resizing your browser window.
http://www.pet.co.nz http://www.fundraise.com
http://mashable.com http://thatma.de/
http://www.sony.com/index.shtml http://foodsense.is

4
Advantages of RWD
The website looks good on any device.
No need to zoom to see content on smaller devices.
The full website (all pages) is available on all devices.
Saves time and money because you design once, display
everywhere.
Improved Search Engine Optimisation (SEO). SEO refers to the
process of ensuring a website comes up as high as possible in
the search results of a search engine (eg Google). Search engines
generally find it easier to crawl, index and organise content from
responsive websites.
Principles of RWD
Keep it simple
Keeping the layout as simple as possible is the first way to ensure a
page works on any device.
There are a number of technical ways in which responsive web design
can be supported. However, a good, clean, simple design is always
a good foundation.
Always use:
o semantic HTML to structure your content
o valid code (HTML and CSS)
o simple, intuitive navigation design.
Create conceptual designs for
the site pages which outline
what the pages will look like in
different outputs (ie different
viewport sizes, etc).
On the right is an example
of concept designs for the
Nemesis Casting website,
showing what the output
would look like on different
devices.
Image source: (http://nickhurley.

co.uk/2012/12/ case-study-building-a-
better-nemesis-casting)

5
Tiny screen first

This is based on the principle of catering to the smallest, simplest
devices first. In other words, you create styles for your mobile phones
first. Then you add the styles for bigger viewports. You will learn more
about different styles for different viewports in Lesson 6.
Creating a Brief
A brief gives a clear description of the outcomes that need to be

met by a solution. It contains detailed specifications (including
constraints) against which the final website can be evaluated.
The brief needs to include at least all of the following, in keeping with
the stakeholder's requirements.
The purpose of the website. What does it need to do and why?
The target audience for the website. Who will be viewing/
accessing the website?
The content of the website. What pages will be included in the
website. What is the purpose/function of each page?
Accessibility requirements for the website. Are there any specific
accessibility requirements for the website. In which browsers
does it need to display correctly? On which devices does it need
to work correctly (eg mobiles, tablets, notebooks)?
The mark-up language to be used to create the website. Are you
going to use HTML5, xHTML or some other markup?
The media to be included in the website. What images, video,
and/or sound will be incorporated into the website?
The enhancements to be included. Are there any special
enhancements to be used. For example, do you need to use a
specific font face for headings, etc?
You will base the brief on the information you received from your key
stakeholder(s) (ie the person who asked you to create the website).

6
Read the scenario below for a company called TourNZ who

Try it for would like you to develop a website for them. Create a brief
Yourself for the website, based on the information provided. Write your
brief on a separate sheet(s) of paper.
TourNZ is a company which arranges a wide range of New Zealand travel and tourism experiences.
Their clients are mainly aged between 17 and 65, but they also cater for other age groups.
They need a website to showcase their services and to promote New Zealand as a tourism
destination.
They would like you to develop the first six pages of the website:
o Home page (landing page).
o One page each showcasing the following aspects of New Zealand as a tourist destination:
ff Adventure
ff Culture
ff Cuisine
ff Scenery
ff Fantasy (eg Hobbiton)
All pages must be linked to each other.
Each page of the website must include media (eg images, sound or video) and enhancements
(eg use of colour, font faces and styles, etc).
TourNZ would like the pages to be dominated by images, rather than text - to visually
showcase what New Zealand has to offer.
TourNZ have provided you with two different versions of their banner logo. Their banner logo
needs to be included on every page of the website.
They have provided you with a number of other images to be used on the website, as well as
some text content for two of the pages (see the Guide Resources folder for all the supplied
images).
TourNZ really like the font called Montserrat which is available from Google fonts (www.
google.com/fonts). They would like you to use this font family somewhere on each web page.
For example, you could use it for headings. You may use any other fonts as appropriate.
The website pages need to display properly on at least the following:
o Apple iPhone 5 and Apple iPad Mini using Safari browser.
o Generic notebook (1280 x 800 viewport) running Internet Explorer 10 or higher, or running
Google Chrome 31 or higher.
TourNZ want the website to be accessible to as many people as possible, including those who
have vision problems and use a screen reader to access the website.
The website needs to be completed within two month from today.

7
Putting together a plan
You should already be aware of how important it is to plan your website

before you begin work on it. This will help to ensure you can 'get the
job done' as efficiently and effectively as possible. Below is a quick
reminder of the information which needs to be included in your plan.
The steps you will take to develop a website which meets all the
specifications in the brief.
Key milestones in the website development. This needs to include
how resources such as time, expertise and elements (eg media) will
be used to achieve the outcomes of each milestone.
When you will consult with the stakeholder to ensure that all
their requirements for the website are met. You could also include
how you will consult with your stakeholder.
Testing procedures to ensure the website meets all the
requirements of the brief.
A conceptual design for the website.
Key milestones
The example below shows how milestones can be linked to the
resources required.
Milestones and steps Date Resources and other requirements

1. Planning 31 Jan 20XX Word processing software and
Produce initial brief, printer to create brief and plan.
conceptual design and plan. Stationery to create sketches
Present initial brief, (ruler, different coloured pens,
concept design and plan to etc).
stakeholder for feedback. Venue and time to meet with
Make and document any stakeholder.
changes required as a result
of stakeholder feedback.
Testing procedures
You can incorporate your plan for testing with the list of milestones and
steps, or you can create a separate testing plan.
The plan for your testing procedures needs to include the following.
What will be tested?
When will it be tested?
How will it be tested? (This could include an indication of any tools
you will use to help you do the testing).

8
What to test
Testing and evaluation of the website needs to include the following
aspects.
Accessibility. Do all the web pages display and work correctly on
all the specified devices, platforms and browsers. Is it accessible
to the target audience and to as many people as possible -
including those with impairments (eg visual impairments).
Readability (how easy it is to read the pages).
Legibility (can you read all the text on the pages).
Presentation. For example: Is the layout correct? Are any media
(eg images) loading and displaying correctly?
Functionality. Is it doing what it is meant to do? For example, do
all the hyperlinks work?
Validity. Have you used valid markup (eg HTML) and styling (CSS)?
Have all the specifications for the website (given in the brief)
been met?
Conceptual Design
Your conceptual design for the website must clearly indicate what the
final website would look like. It must include a design for all six pages
of the site and could include sketches or mock-ups of:
page layouts (ie the positioning of text, graphics and other
elements on each page)
a sitemap showing the relationship between pages on the website.
Develop a plan for the TourNZ website that is based on the

brief you completed.
Try it for For the purposes of this exercise, you only need to develop
Yourself conceptual designs for two of the pages of the website:
Home page.
Adventure page.
REMINDER: When developing your conceptual designs, keep in mind the images which
have been supplied for the different pages.

9
Creating an End-User Document
An end-user document provides a short description of the purpose

of the website, as well as instructions on how to access and navigate
the website.
The website you created will not 'go live'. In other words it will not go
up on the Internet. So in this case, the end-user is your stakeholder(s)
who want to have a look at what the website looks like before it goes
live. The end-user document explains, in plain English, how they can
view the website and move around in it.
An example is shown below - based on the TourNZ scenario.
TourNZ Website: End-User Document

The purpose of the TourNZ website is to advertise the services provided by TourNZ and
to promote New Zealand as a tourism destination. The website aims to make potential
customers aware of the wide range of New Zealand travel and tour packages TourNZ has to
cater to all ages, tastes and interests.
To access the website:
1. Open your web browser.
2. Press Ctrl+O on your keyboard (or File>Open on the menu, if available).
3. Browse to find the TourNZ Website folder (this has been saved on your C: drive).
4. Double-click to open the TourNZ Website folder.
5. Click on the index.html file (this is the home page). Click Open.
6. The home page will open in your browser.
Navigating the website
Once you have opened the home page, you can move around the website in the same way
you would any other website. For example, click on one of the menu items (eg Adventure,
Culture, Cuisine, Scenery, Fantasy) to be taken to other pages of the website.
You can also click on any buttons or other interactive materials to be taken to a different
page of the website. You will know an item is interactive because when you move your
mouse over it, the cursor will change to a hand with a pointing finger (see screenshot
below).
Cursor changes when the mouse is

moved over an interactive element.

10
Guidelines for an effective end-user document

If possible, don't use any jargon or acronyms. If you feel you
must use jargon/an acronym, make sure you explain these (or
provide a glossary).
Use a consistent font and layout for the document.
Make sure the document is legible.
Save the document in a format that is accessible to all users.
In the next two lessons, we will do a quick review of the basics of

HTML5 and CSS3. You will also build the 'skeleton' of the home
page and adventure page for the TourNZ website.

11
LESSON 2:
Semantic HTML5 - A Review

of the Basics
Learning Objective
When you have completed this lesson you will have revised what you
already know about using valid semantic HTML5 to:
create the structure of a web page
add text, media and other content to the web page
link the pages of a website.
You should already know how to create a basic website using HTML
for structure and CSS for styling. In this lesson, we will revise what
you should already know to create the basic structure (the shell)
for the first two pages of the TourNZ website (which you planned in
Lesson 1).
Before you do this, lets recap some of the key principles of website
development.
Website Development Principles
Accessibility is key
When creating your website, accessibility needs to be the key
consideration.
Accessibility refers to how easy it is for the web page to be opened,
viewed, navigated and used by as many people as possible. This
includes people:
o using different browsers
o with visual or other impairments.
Some key ways in which to ensure the maximum accessibility of
your site are to:
o separate the structure and presentation of the site
o use semantic HTML to structure the website.

12
LESSON 2: Semantic HTML5 - A Review of the Basics
Separate structure and presentation

Separate the structure (content) and presentation (styling) of the website.
Use HTML to create the structure, and CSS for the styling.
Use semantic HTML

Where possible, use semantic HTML to structure your web pages.
Semantic HTML gives more information about the elements on the
page. For example, using a <div> tag to create a section for the footer
on your page is not semantic, because <div> has no meaning (it
just indicates a generic division). Using the <footer> tag instead is
meaningful because it indicates what information the section contains.
Semantic HTML is understood by browsers, as well as other user
agents such as screen readers. For example, using semantic HTML to
structure your pages makes it easier for a blind person using a screen
reader to navigate the page. The semantic HTML gives them the ability
to scan through the different sections of the page, rather than having
to read the entire page from start to end. Having clear and meaningful
section headings allows the user to listen to the different headings
and decide which part of the page they want to explore further.
Legal and Ethical Considerations

All content used on the website must comply with copyright laws.
This means only using content (text, images, etc) that you have:
o created yourself
o been given permission to use (eg it is in the Public Domain
and/or provided under the Creative Commons licence)
o properly attributed (eg in the case of content provided under a
licence such as Creative Commons attribution)
o paid to use (eg you have bought a licence to use the image
from a media provider such as iStock).
The content on the website needs to be appropriate for your
target audience and suitable for a general audience. In other
words, there should be nothing on the website that could be
considered offensive.
Keep in mind privacy laws when using photographs or other personal
information about anyone on the site.
Using a Text Editor

You don't need specialised software to be able to create a website.
The standard text editor that comes with your computer's operating
system can be used to create web pages (eg Notepad on a Windows
computer or TextEdit on a Mac). However, using a text editor with a
few more features can make writing and checking your code easier.
In this guide we will be using Notepad++ which can be downloaded
for free from notepad-plus-plus.org/.

13
HTML Basics Review
File Management
Websites are built using a number of different files:
Text files - eg HTML files and CSS files
Graphics files - containing images for your web page(s)
Other media files - eg sound, animation/video.
All these files must be saved in the same folder.
If you are creating a site with many different files, you might have
sub-folders within the main website folder for images, audio, etc.
HTML Elements
HTML tags and elements define the structure and content of a web
page so that it can be interpreted by a web browser.
Elements consist of a pair of tags and the content between the tags.
Element
<h1> HTML elements and tags. </h1>
Start tag Content End tag
Figure 1: HTML element
HTML Attributes
All elements can have attributes. Attributes:
give more information about HTML elements
are always specified in the start tag of an element
Consist of two parts - a name and a value. The value is always in
quotation marks (" "). Look at the example below.
Attribute
<a href="http://www.google.co.nz">Link to Google.</a>

Name Value
Start tag <a>
Figure 2: Attribute for a link tag <a>

14
Basic Structure of a Web Page
The following is a summary of the elements common to all web pages.
1 <!DOCTYPE html>
1
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8"/>
5 <title>Something for everyone. | Tour NZ.</title>
3 </head>
6 <body>
6 </body>
2 </html>
Figure 2: Basic structure of a web page

HOT TIP
Every time that you type
1 DOCTYPE identifier (declaration): <!DOCTYPE> code, there is the potential
Tells the browser what mark-up language has been used for error. It is easy to make
a tiny typing error which
to create the page. creates havoc with your
website. To help reduce
2 Page element: <html> and </html> the likelihood of error, copy
Indicates the start and end of the page. and paste existing code
wherever possible. One
In the opening tag - <html lang="en"> - the lang attribute example of code which you
indicates the default language of the page. can always copy and paste
is the elements common
In this case, "en" indicates the default language is English. to all web pages (ie those
shown in Figure 2).
3 Head element <head> and </head>
Contains information about the page which cannot be
seen by a human user when they look at the page in their
browser. However, browsers, search engines and other
user agents, read and use this information.
The head element can contain other elements - including
the <meta> and <title> elements.
4 Meta element <meta .../>
Used to give information about the page, which browsers
and search engines use.

15
This includes specifying the character set to be used on

the page. UTF-8 is the most versatile character set (for
languages like English).
The meta tag can also be used to add additional information
about the site. For example:
o A description of page content. This information
is used by user agents such as screen readers and
it also displays as part of the results provided by a
search engine. An example is shown below.
<meta name="description" content="Here you

would enter a brief description of what the
page is about. This will often be shown in
search engine results.">
Make sure you insert a different description for each page

of your website.
o The author of the page. An example is shown below.
<meta name="author" content="The authors

name comes here. This lets people know who is
responsible for the content on the page.">
Note: Unlike the other elements, the <meta> element does not
have a separate end tag (ie it is a start and end tag in one).
5 Title element <title> and </title>
All web pages must have a title. This is shown in the
browser title bar and in search engine results.
It is important to choose a title which is meaningful and
useful. This helps to make your site accessible to people
with visual impairments who use screen readers to access
the content on a web page.
NOTE:
The <meta> and <title> elements are indented. This
shows that they are inside the <head> element. For this
reason, they are called nested elements.
6 Body element <body> and </body>

The tags <body> and </body> indicate the start and end
of the visible content of the page (ie what someone sees
when they view a web page in a browser).

16
Other Structure Elements
Below are some other elements that can be used to help structure a web
page. These are not strictly essential, but they do help to ensure that the
page can be easily styled and that it will be accessible for all users.
NOTE: All these elements are nested inside the <body> element.
Element Function
<p> Indicates the start and end of a paragraph.
Usage Note: If you want to start a new paragraph, you can't just press ENTER on your
keyboard. You need to create a paragraph element for each paragraph.
<h1>-<h6> Different heading levels. These are like the headings in a regular document which help
indicate the content of a new section of text. <h1> Indicates a level 1 (top level) heading
and <h2>-<h6> indicate subheadings.
<ol> Ordered list (eg 1, 2, 3).
<ul> Unordered list (eg a bullet list).
<li> Used for each list item in an ordered or unordered list (ie nested in <ol> or <ul>).
<table> Inserts a table in the web page. The following elements are used to build the structure of
the table.
<thead> - Indicates the heading section of the table.
<tr> - Adds a row to the table.
<th> - Creates a cell in the heading row of the table. This is nested inside the <tr> element
(which is nested in the <thead> element).
<td> - Creates a cell in a row in the body of the table. Nested inside the <tr> element.
<header> Header at the top of a page.
<footer> Footer at the bottom of a page.
<nav> Section of navigational links (ie a group of links to other parts within the document or to
other documents).
<section> Section in a document.
<aside> Information related to, but not part of, the main content of the page. For example, it can
be used for quotes, hints, related external links, etc.
<div> div is short for 'division'. This indicates a generic division or section in a web page.
Because div is not semantic (ie meaningful), only use it when there isn't a suitable
semantic option (eg <header>, <footer>, etc), or when you are using the div only for
styling purposes.
<small> Used together with the paragraph element to show the 'small print' for the page (ie legal
information for the site).
Usage Note: © will insert a copyright symbol ().

17
Media Elements
The table below summarises the elements used to embed different

types of media in a web page.
Element Function
<img/> Image element - Used to embed an image on a page.
Usage Notes:
Like the meta element, the image element does not have a separate start and end tag.
The image tag must include the following attributes:
src=: to indicate the file name (source) of the image. For example src=images/
tournz_logo.jpg indicates the:
ff name of image file to be inserted - tournz_logo.jpg
ff sub-folder in which the file can be found - images
ff images sub-folder is in the main folder for the website.
alt=: alternative text. If an image doesnt load or someone (with a visual impairment)
is using a screen reader, this text is given instead of the image. This is one way to
ensure the website is accessible to as many people as possible.
An example is shown below.
<img src=Images/tournz_logo.jpg alt="TourNZ Banner Logo">
<audio> and Used to embed audio into a page. The <source> element is nested inside the <audio>
<source> element. It gives the browser information about the audio file to be played.
Usage Notes:
The <audio> tag could include the following optional attributes.
autoplay="autoplay" - will make the audio play automatically when the page is
loaded.
loop="loop" - will loop the audio - so it repeats while the page is open.
The <source> tag must include the following attributes.
src=: to indicate the file name (source) of the audio.
type=: to indicate the format of the source file (audio) - eg mpeg or ogg.
<audio autoplay="autoplay" loop="loop">

<source src="my_audio.mp3" type="audio/mpeg">
<source src="my_audio.ogg" type="audio/ogg">
</audio>
NOTE: Not all browsers support all file formats. However, most support either mp3 (.mpeg)
or ogg. This is why audio files are usually embedded in BOTH of these formats.

18
<video> and Used to embed video into a page. As with audio, the <source> element is nested inside
<source> the video tag. It gives information about the video file to be displayed.
Usage Notes:
The <video> tag must have the following attributes.
width= and height=: to give the size of the video.
It could also have the following optional attributes.
"controls" - gives the user some basic controls for the video - eg play, pause,
enlarge video window, etc.
"autoplay" - will make the video automatically play when the page is loaded.
The <source> tag must include the following attributes.
src=: to indicate the file name (source) of the video.
type=: to indicate the format of the source file (video) - eg mp4 or ogg.
<video width="480" height="272" controls autoplay>

<source src="video/big_buck_bunny.mp4" type="video/mp4">
<source src="video/big_buck_bunny.ogg" type="video/ogg">
</video>
NOTE: Most modern browsers support mp4 video. However, it is useful to add an
alternative format like ogg for those that cannot play mp4. This is why video files are
usually embedded in BOTH of these formats.
Use what you have reviewed about HTML to do the following.

1. Create the basic structure for the home page and
Try it for adventure page of the TourNZ website, based on the
Yourself conceptual designs and mockups given in Appendix A.
The mockups show what the web pages will look like
when completed.
HINT: Use unordered lists to create the menu tabs on the home page, and for the navigation
on the adventure page.
2. Insert the text content provided for each page - as shown in the mockups.
3. Insert the logo and other images on the pages - as indicated in the conceptual designs.
Don't worry about the styling (formatting and layout) for the page at this point. Just create
the main structure and enter the relevant content. You will be styling the pages at the end of
the next section in which we review the basics of working with CSS3.

19
As mentioned in Lesson 1, it is important to regularly check

your website as you create it. One way to do this is to preview
Try it for the website in a browser.
Yourself Preview the web pages you have just created. You can do this
from within Notepad++ as follows.
1. Make sure the text file (eg index.html) is open.
2. Select Run from the menu or use the keyboard shortcut (F5).
3. Click to select the browser Note the keyboard shortcut you could
in which to preview the file. use to launch a file in a particular browser.
4. When you preview your pages, keep in mind that you have not yet applied styling (using
CSS). Therefore, all the styling (layout, formatting of text, etc) of the pages is not going
to look anything like the finished product. At this point, just focus on checking that all
the content is correct and is displaying in the browser. For example, can you see all the
images that should be there. If not, check that your link references in the HTML code are
correct.

20
LESSON 3:
CSS3 - A Review of the

Basics
Learning Objective
When you have completed this lesson you will have revised what you
already know about using valid CSS3 to style web pages.
Once you have created your HTML, CSS is used to specify how that
content will be presented (styled).
In this lesson you will review the CSS basics which you should already
be familiar with. You will also apply some basic styling to the pages
you created in Lesson 2.
How HTML and CSS work together
There are two basic steps involved in getting the HTML files and the
CSS to work together.
1. Create an external style sheet (CSS) as a separate file.
2. Insert a link to the external style sheet in each web page HTML file
(using the <link> element).
An example (highlighted in yellow) is shown below.
<head>
<meta charset="UTF-8"/>
<meta name="description" content="Find out how TourNZ can help
you create YOUR ultimate New Zealand experience.">
<meta name="author" content="TourNZ">
<title>New Zealand - Something for Every One | TourNZ</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
Usage Notes:
The link element for the external style sheet is nested in the
<head> element.
More than one external style sheet can be linked to an HTML page.

21
LESSON 3: CSS3 - A Review of the Basics
CSS Syntax
Like HTML, CSS needs to be written in a particular way (syntax).

CSS consists of a list of rules. Each rule includes the following.
A selector this is the HTML element to be styled.
One or more declarations. The declaration says how that element
should be styled.
Each declaration consists of a:
property the style attribute to be changed
value the value of the property.
Look at the example below of a CSS rule.
selector property value
h1 {color:blue;}
declaration
Figure 3: Example of a CSS rule
The above CSS rule means that any HTML marked up with the <h1>
element will be displayed in blue in a browser.
IMPORTANT!
Dont forget the:
open and closing curly brackets { }
and the semi-colon (;) at the end of EACH declaration.
If you forget these, it will cause chaos in your styling!
How CSS selects what to style
There are a number of ways that a CSS selector can choose the
elements (in the HTML) to be styled. These include the following.
Selecting by name of element

An example of this was shown in Figure 3, where the name of the
<h1> element (h1) was used as the selector.

22
Compound selectors
If you want to style an element which is nested inside another
element, you can use compound selectors. For example, imagine that nav a {
you wanted all the link elements <a> inside a <nav> (ie navigation) font-size:12px;
container to have a font-size of 12px. To do this you would use the
compound selector nav a as shown in the example on the right. }
Selecting by the id or class attribute of an element

Any element can be given an id or class attribute. These are used
to help identify the element and distinguish it from other elements
with the same name. For example, imagine you have a number of
different <section> elements in your web page document. You can
distinguish these from each other using an id or class attribute - as
shown in the example below.
HTML
Deciding which attribute to use -
<section class="centre">
id or class
...
</section> id attribute
Each element can only have one id
attribute.
<section id="intro"> Only one element on a page can have that
id attribute (ie it is unique).
...
</section> class attribute
Each element can have multiple class
attributes.
Multiple elements on a page can have the
CSS same class attribute (ie it is NOT unique).
.centre { For example, on the same page you could have:
text-align: center; <div class ="button" class="centre">

} and
<h1 class="centre">
#intro { Then you would use the CSS selector .centre

to style all elements on the page with the
font-family: Tahoma; class="centre" attribute.
font-size: 14px;
NOTE:
} A single element can have both an id attribute
and one or more class attributes. For example:
NOTE:
<section id="intro" class="centre">
The CSS selector:
. selects by class attribute.
# selects by id attribute.

LESSON 2: Semantic HTML5
- A Review of the Basics
23
Grouping CSS selectors

By grouping CSS selectors you can apply the same style to a number
p, li, h4 {
of different elements, without needing to repeat the styles.
In the example on the right , all <p> <li> and <h4> elements will color: blue;
have the style color: blue applied to them (ie they will have a blue }
text colour).
NOTE: A comma (,) is used to separate the selectors.
Selecting an element based on its state

CSS can select an element to style when a user mouses over it,
or based on whether a link has been visited or not, etc. These are
known as pseudo-classes. Below are five link states, along with the
examples of CSS to format these.
State Description Example Result

New/not When the link has not a:link { This is my link
visited yet been clicked on. color: blue;
font-size: 12px;
}
Visited When the link has been a:visited { This is my link
visited. color: green;
font-size: 12px;
}
Focussed When the link has a:focus { This is my link
on been selected via the color: purple;
keyboard (eg tab key). font-size: 16px;
}
Hovered
over
When the user is
hovering over the link.
a:hover {
color: red;
This is my link
font-size: 20px;
}
Activated As the link is activated
(clicked on) by the user.
a:hover {
color: orange;
This is my link
font-size: 18px;
}

24
The Box Model
An important concept related to CSS layout is the Box Model. The

name Box Model comes from the fact that CSS treats every element
on a page as if it were in a box. Each box (container) consists of the
following.
Figure 4: Parts of a box (container)

margin is the space between the border of one box, and the
border of another box. It does not have a background colour and
is transparent.
border goes around the padding and content. It is similar to the
border on a text box or table in a word processed document. It
can have a colour and other styling (eg rounded corners, using an
image for the border, etc).
padding is the distance between the content of the box and its
border.
content is where the text and images appear on the page.
Calculating the total size of an element

p {
To work out the total amount of space an element will take on
width:150px;
the page, you need to add the values for the margin, border,
padding:5px;
padding, and content.
border:2px;
Look at the example on the right which sets the margin, border,
padding and content for a paragraph. margin-right:50px;
In this case, the total width of the paragraph 'container' would margin-left:20px;
be 234 pixels, calculated as shown on the next page. }

25
150px (width of the entire paragraph element)

+ 10px (padding: 5px on right + 5px on left)
+ 4px (border: 2px on right + 2px on left)
+ 70px (margin: 50px on right + 20px on left)
= 234px
Common CSS Rules
The table which follow summarises some of the more common CSS
rules and their usage.
Common CSS rules

Properties Shorthand property
Margin sizes All the properties are combined into one in
the following order: top, right, bottom, left (ie
margin-top: -20px; clockwise from the top).
margin-right: auto; margin: -20px auto 0px 10%;
margin-bottom: 0px; If all four margins are the same (eg 15px):
margin-left: 10%; margin: 15px;
If the left and right margins are the same:
Usage Note: margin-left: 10%, means that the
margin: -15px auto 0px;
left margin of the container will have a width of
10% of its parent containers width. In the example above, the:
For example, if the parent container is 230px top margin = -15px
wide, then the container will have a left margin left and right margins = auto
of 23px. bottom = 0px.
If the left and right margins are the same and
the top and bottom margins are the same:
margin: 5px 10px;
In the example above, the:
top and bottom margins = 5px
left and right margins = 10px
Continued on next page...

26
Border sizes Shorthand properties work in the same way as

for margins (above).
border-top-width: 2px;
border-right-width: 1px; For example:
border-bottom-width: 1.5px; border-width: 2px 1px 1.5px 3px;
border-left-width: 3px;
Usage Note: Can have the same values as

margins, except that percentage values (%) are
not supported.
Border style Shorthand properties work in the same way as
for margin (above).
border-top-style: dashed;
border-right-style: solid; For example:
border-bottom-style: dotted; border-style: dashed solid dotted
border-left-style: double; double;
Usage Note: The values dashed, solid, dotted

and double (shown in example above) are only
a few of the available border-style values. Other
available values include:
inset
outset
groove
ridge
Border colour Shorthand properties work in the same way as
for margin (above).
border-top-color: red;
border-right-color: green; For example:
border-bottom-color: blue; border-color: red green blue black;
border-left-color: black;
Usage Note: Notice that you need to use the

US English spelling of color.
Combined border properties
You can combine border-width, border-style and border-color into one border shorthand
property.
For example:
border: 10px solid green;
will produce a border (on all four sides of the container) that is 10 pixels wide, solid and green.
Continued on next page...

27
Padding sizes Shorthand properties work in the same way as

for margin (above).
padding-top: 10px;
padding-right: 0px; For example:
padding-bottom: 15px; padding: 10px 0px 15px 5px
padding-left: 5px;
Usage Note: Unlike margins, you cannot have

a negative or auto as the value for padding.
Background (colour and image) Shorthand properties are given in the following
order.
To apply a colour to the background of an element: background-color
background-color: green; background-image
To apply an image as the background: background-repeat
background-image: url("sun.jpg") background-attachment
background-position
To specify the position of background images:
For example:
background-position: center;
background: green url("sun.jpg") no-
To specify whether the background image is repeat scroll center;
fixed or scrolls with the page:
background-attachment: fixed;
background-attachment: scroll;
To specify how a background image should be

repeated:
background-repeat: no-repeat;
Font formatting All the font properties can be specified in one
declaration in the following order.
Font face
font-style
font-family: Arial;
font-variant
Font size
font-weight
font-size: 18px;
font-size
Font style font-family
font-style: italic;
Font weight
font-weight: bold; font: italic small-caps bold 18px Arial;
font-weight: lighter;
Usage note: The color property cannot be
Font variant included in the font shorthand property. It
Font-variant: small-caps; needs to be declared separately.
Font colour
color: blue; Continued on next page...

28
Properties Example of Result

Text styling
Text alignment
text-align: center; Centre aligned
text-align: left; Left aligned
text-align: right;
Right aligned
Text decoration
text-decoration: overline; (Adds a line Overline
above your text.)
text-decoration: line-through; (Puts a
Line-through
line through your text.)
text-decoration: underline; (Adds a line
under your text.) Underline
text-decoration: none; (This is the default.
It can also be used to remove the underline A hyperlink without its usual underlining
from a hyperlink.)
Text shadow
text-shadow: 1px 1px 2px #000000;
Usage Note:
The property given above is a shorthand
property consisting of the following values:
Value 1 (required) = h-shadow (ie the position of
the horizontal shadow)
Value 2 (required) = v-shadow (ie the position of
the vertical shadow)
Value 3 (optional) = blur (distance of the
shadow blur)
Value 4 (optional) = color (ie colour of the shadow)
Styling lists
There are a wide variety of styles available for
styling ordered and unordered lists. Below are
the most common.
Unordered lists
list-style-type: circle; Circle bullet point
list-style-type: disc; Disc bullet point
list-style-type: square; Square bullet point
list-style-type: none; A list without any bullet point
Ordered lists
List-style-type: decimal; 1. Decimal.
List-style-type: lower-alpha; a. Lower alpha.
List-style-type: upper-alpha; A. Upper alpha.

29
You are going to use what you have already learned about
Try it for CSS to apply some very basic styling to your web pages.
Yourself In the next lesson you will learn how to apply the remaining
styling to your pages.
1. Use what you have reviewed about CSS to style the index page (ie the home page) as
shown below.
Background colour of
the page:#EAE4E4
All <h3> elements: bold.

All <h1> elements: bold and centre-aligned.
Background colour for each tab: white.
Colour of text on each tab: black. Links must

not be underlined. Text must be centre-aligned.
There should be no bullet points for any of the unordered list Items.
Background colour of the container in which the menu

and image tabs will be placed (ie site_nav): grey.
2. The same basic styling will also apply for the adventure page. You do not need to set up
separate styling for the adventure sheet. Just make sure that you have included the link
to the CSS file in both your index and adventure files.
3. Preview your pages to ensure the styling rules you have created have been correctly
applied.
In the next lesson, you will learn some more advanced ways to use
CSS3 to style your web pages. This includes CSS3 that works to
ensure your pages display well on any viewport size.

30
LESSON 4:
Styling with CSS (Part 1)
Learning Objective
When you have completed this lesson you will be able to do the
following.
Add colour to web page elements.
Set the viewport width for your pages.
Work with different units of measurement in CSS.
Use Google Fonts.
In the previous lesson you reviewed the basics of how CSS is used to
style a page. In Lesson 4 and 5, we look in greater detail at how CSS
can be used to apply the finishing touches to the styling of your two
web pages.
Before we do this, we are going to look briefly at how Google Chrome's
Developer Tools can be used to help you create CSS on the fly and
to test your web pages on different devices, platforms and browsers.
Using Developer Tools
Most browsers have their own Developer Tools which you can use to
help you create and check your websites.
In most cases, the Developer Tools can be accessed using the F12
shortcut key.
At the time of writing, Google Chrome has the most powerful set of
Developer Tools. Not only do these tools allow you to inspect the
code of existing websites, they also allow you to make changes to
your CSS in Developer Tools and immediately see what the results
will look like. In the sections which follow you will see examples of
how useful this can be.
Furthermore, Google Chrome Developer Tools includes an Emulator.
This allows you to preview what your web pages would look like on
different devices, platforms and browsers. You will find the Emulator
tool particularly useful to test your pages as you develop them.
Let's look at an example.

31
LESSON 4: Styling with CSS (Part 1)
1. Open the home page (index.html) for the TourNZ website in

Google Chrome.
2. Press F12 on your keyboard to open Developer Tools.
2. Right-click anywhere on the page. [Optional] Click here to open Developer Tools in
a separate window. This can be useful because
Developer Tools will open at the it allows you to see the page and the Developer
bottom of your browser window. Tools separately - giving more space for both.
2. Right-click anywhere on the page.
On this side you will see the HTML On this side you will see the Styles (CSS) which
for the page. have been applied to the selected HTML element. In the
Click on the little arrow next to example above, the <body> element has been selected,
a container (eg <body>) to see so the CSS shown is for the body element.
elements nested in that container. Notice that both the styling you set (background-color)
Click on an element to see the as well as some additional styling have been applied.
styles (CSS) which has been The 'user agent stylesheet' (highlighted above) refers
applied to that element. In the to default styling which the user agent (ie the Chrome
example above, the <body> Browser) applies to an element. You can override these
element has been selected. by specifying your own styling. For example, you could
change the default margins for the body element by
declaring the margin size yourself (in your CSS file).
To open the Emulator:
3. Click on the mobile phone icon at

the top of the Developer Tools window.
NOTE: To switch emulation off, you
would click on this button again.

32
The Emulator will open.

4. Click to see a list of devices
which can be emulated.
5. Click to select the device

you want to emulate.
You will need to reload the page to get an accurate emulation. To do

this, press the F5 key on your keyboard (ie the reload shortcut key).
These are the viewport Click here to swap Shows the default user agents (UA)
dimensions of the device the dimensions (ie for the device you have chosen.
you have selected (ie to see what it would Follow the instructions below to
the viewport of an Apple look like on an iPhone make changes to the UA or operating
iPhone 5 is 320 pixels 5 held in landscape system (OS) to be emulated.
wide by 568 pixels high). orientation).
To change the UA or OS to be emulated

At the top right of your Developer Tools window:
1. Click. The Developer Tools 2. Select.

drawer will open.
4. Click to see a list of

UAs and OSs which
can be emulated.
5. Click to select the UA/

OS you want to emulate.

33
Working with Colour
There are three main ways in which colours can be specified in CSS.
By colour name.
Hex codes.
RGB codes.
Look at the example below which shows how to specify the colour
blue using each of the above methods.
Name Hex RGB

h1{color:blue}; h1{color:#0000FF}; h1{color:rgb(0,0,255)};
Usage Note:
There are many more hex code and RGB colours than colour names.
There are only 17 colour names that are guaranteed to validate in
CSS and HTML validators. This is fine if you only want to specify
simple colours (eg black or white), but for more complex colours and
shades you will most likely use Hex or RGB codes.
Picking colours
There are millions of different Hex and RGB codes representing
different colour values. You are not expected to remember all of these,
so how do you know which Hex or RGB code to use?
You could use a colour picker. There are many colour picker tools
available on the Web. Some of these include:
o The W3schools color picker - http://www.w3schools.com/
tags/ref_colorpicker.asp
o ColorPicker.com - http://www.colorpicker.com/
o HTML Color Codes - http://html-color-codes.info/
A great way to pick your colours, without having to navigate away
from your page, is to use the Google Chrome Developer Tools.
On the home page, you are going to change the colour of the text:
"Click on a tab below .... experience."
You want it to look like the colour shown below (ie a deep, dark green).

34
1. Start by adding a basic colour rule to your CSS (using the colour
name closest to the colour you eventually want). An example is
shown below:
#menu h1{color: green;}
2. Open Developer Tools (F12).
3. Click to
select the
relevant
element.
4. Click on the colour square.
The colour picker will open.
5. Click and hold down

the mouse button as you
move your mouse over
the colour area.
As you move your mouse over

the colour area, the colour
of the selected element will
change so you can preview
what it will look like.
6. When you have found the colour you want, release the mouse
button.
7. The RGB code will be added to the styling in

the Developer Tools window.
8. Copy and paste this code into your CSS file.

35
Use what you have learned about styling colour with CSS and
Try it for what you learned in the previous lesson, to apply the following
Yourself 1 additional styling to your adventure page.
For the overlay text (ie the text that will go over the Huka Jet image)
Deep red background

colour.
Text colour = white.
Apply a drop shadow to the
text.
Font weight for text should
be "lighter".
For the "Find out more" button
Deep orange background colour.

Text colour = white.
Apply a drop shadow to the text.
Font weight for text = bold.
When the user moves their mouse over

the button it should change colour - to
a lighter orange background.
Setting the Viewport
Before we look at some other ways to use CSS for styling, it is

important to first set the viewport for your web pages.
In Lesson 1 you learned about the importance of creating a website
that will display as expected, regardless of the type of device it is
being accessed on. An important aspect of this is determining the
size of the viewport.

36
To make sure the browser reports the correct viewport size of the
device on which the web page is being viewed, you need to add a
viewport meta tag in your <head> element (in your html files).
Look at the example below where the viewport meta tag has been
added to the index.html page.
This will set the viewport for the home page (index.html) to be the
same width as that of the device on which it is being displayed
(content="width=device-width"). Setting the initial-scale (ie
zoom) for the page to 1, also helps to ensure your page displays as
intended.
Add a viewport meta tag to your html files. Note: The meta tag
Try it for for your adventure.html page will be identical to that for the
Yourself 2 index.html file (as shown above).

37
CSS Units of Measurement
There are a number of different units of measurement which can be

used in CSS. Some of these are summarised below.
Unit Measures relative to the Usage Notes

px Screen resolution (not the viewport size). Generally This is a less effective
1px = 1 point or 0.27mm. measurement when developing
for many different devices of
unknown sizes and screen
resolutions.
em font-size property of the element in which it is No way to be entirely certain
used. Generally 1em = 16px (the default font size what the default font size is for
for a web browser). a particular browser because
users can change this.
rem root font size. So if, for example, you set: This can be more effective than
html{font-size:12px} then 1rem = 12px. using ems because you can set
the root font size yourself and
dont need to worry about the
default font size of the browser.
% Parent element. For example, if the parent element
is 100px wide, then 1% would be 1px.
vw Viewport width. The viewport width is 100vw, so Very powerful tool for sizing
1vw would be 1% of the total viewport width. elements for RWD.
vh Viewport height. The viewport height is 100vh, so As above.
1vh would be 1% of the total viewport width.
To demonstrate the difference between 'fixed' units such as px and

'flexible' units such as vw, you are going to apply a new CSS rule
(border-radius) to elements on your web pages.
IMPORTANT: In Lesson 1 you learnt about the principle of designing for mobile or 'tiny' first.
In our case we are targetting our smallest device - the Apple iPhone 5. So when you check
your web pages, do so using the Developer Tools Emulator and set the device as Apple
iPhone 5.

38
The border-radius rule

The border-radius rule is used to apply rounded corners to a border.
Look at the example below of one of the images from the menu on
the home page.
Image without border-radius Image with border-radius of 2.5vw

To add the border-radius images from the menu, add the following
rule to your CSS file.
#tabs img {
border-radius: 2.5vw;
}
This will produce an image that looks like that shown on the right
above, regardless of the size of the viewport.
However, if you were to set the border-radius value to a 'fixed' unit
such as 6.4px, the results would look like this:
Border-radius of 6.4px in a 320px wide viewport Border-radius of 6.4px in a 1920px wide viewport

39
When viewed on a browser with a 1920px wide viewport, the corner

rounding is almost non-existent. This is because the image is getting
bigger, but the rounding size is staying the same.
Use what you have learned about CSS units to add

Try it for border radii and padding to the elements indicated in the
Yourself 3 screenshots below.
Home page
Add rounded corners to the container in which the

menu and image tabs will be placed (ie site_nav): grey.
Add rounded corners to menu tabs. The rounding on

these should be bigger than for the site_nav container.
Adventure page
Add the same background colour

as the 'Find out more' button.
Centre align the text.
Add slightly rounded corners

to each navigation item.
Add rounded corners to button.
Add padding of 2% to the text in the button,

so that there is some padding between the text
and the edges of the container (button).
In the next lesson we will look at some more examples of how CSS
measurements can be used when positioning elements on a web
page.

40
Using Google Fonts and the

@font-face rule
In the past, there was only a small number of 'web safe' fonts which
could be used in web pages. The result was rather boring looking
websites mostly using fonts like Times New Roman, Arial, and Comic
Sans. However, today there are two main ways in which you can use
a huge variety of fonts in your web pages.
Google Fonts
Google fonts provides a huge number of free, open-source fonts for
the web. We are going to use one of the Google Fonts for some of the
text on our web pages. To use Google Fonts:
1. Go to http://www.google.com/fonts.
2. Find the font you want to use. In this case, we want to use a font
called Montserrat.
Once you have found the font you want to use:
3. Click.
4. Select the style(s) you want to use.

In this case, select only 'Normal'.
5. Copy and
paste this code
into the <head>
of your html files.
This provides the
link to the font.
Now you need to use the font-family rule in your CSS file to apply
the font face to relevant sections of text.
Let's look at an example of what the CSS would look like - for the
overlay text ("Looking for an adrenaline rush?"). We have marked up
this element with id="ot" in our adventure.html file.

41
The CSS would look like this:
This must be exactly the same as the value

given for family in the link of your html files (ie
<link href='http://fonts.googleapis.
com/css?family=Montserrat'
rel='stylesheet' type='text/css'>
#ot {
font-family:'Montserrat', sans-serif;
} This is the 'fall-back' font. If for
some reason the Montserrat font
does not load, a web-safe sans-serif
font (eg Arial) will be loaded instead.
NOTE: You need to add the font-family rule to your existing #ot
rules.
Preview your adventure.html page to check that the font has loaded.
The overlay text should now look like this:
1. Set Montserrat as the font face for the following elements.

Home page
Try it for The text that reads: "Click on a tab below to find out more
Yourself 4 ..."
Each of headings on the menu tabs (eg Adventure,
Culture, etc).
Adventure page
The text that reads: "Come and get it!"
The navigation links.
The 'Find out more' button.
2. Preview your pages to ensure the font face has been applied as expected.
The @font-face Rule

In the case of Google fonts, a link is provided to the font on the Google
fonts website. However, when you use the @font-face rule, the font
files first need to be saved in your website folder. You could either put
them in the main folder, or in a sub-folder (eg one called 'fonts').
Finding web fonts

But where do you get the fonts from? One good source of free web
fonts is Font Squirrel: http://www.fontsquirrel.com.

42
Find the font you want on the site and then click on 'Webfont Kit' to
download all the fonts and information on how to use them. You are
going to use the font called 'Amble' from Font Squirrel in your web
pages. To simplify matters, the font files you will need are provided
in your Guide Resources folder. Save these into a sub-folder called
'fonts' in your website folder.
You will notice that four different formats of the font have
been provided (see screenshot on the right). This is to ensure
the font will display correctly on any modern browsers. The
most widely supported font formats are ttf and woff, so if you
only have access to a ttf or woff version of the font, it should
display correctly in almost all browsers.
Before you can use the font, you first need to 'declare' it in your CSS.
An example is shown below, declaring the Amble-Regular-webfont.
This is the name you are giving the font. It

can be any name you like, but make sure
it is between inverted commas. This is the
font-family value you will use when styling
elements using the Amble-Regular-webfont.
@font-face {
font-family: 'ambleregular';
src: url('fonts/Amble-Regular-webfont.eot') format('embedded-opentype'),
url('fonts/Amble-Regular-webfont.woff') format('woff'),
url('fonts/Amble-Regular-webfont.ttf') format('truetype'),
url('fonts/Amble-Regular-webfont.svg') format('svg');
}
This is the link location for the font. Because you have saved Indicates the format of the font.
the fonts in a 'fonts' sub-folder, this needs to be included in Look at the file extension to see
the link information, along with the name of the font files. what the format is.
[If the font was in the root folder for your website (along with NOTE: eot = 'embedded-opentype'
index.html, adventure.html, etc) then you would only need to
put the file name.]
Remember that the file extension (eg .eot) must be included
in the file name.
1. Add the @font-face rule shown above to your CSS file.

Try it for 2. Set 'ambleregular' as the default font for your web
Yourself 5 pages (HINT: You will need to apply the font-family
property to the body element of your pages).

43
Font Sizing
Much of what you learnt about sizing in the section on "CSS Units
of Measurement" also applies to the sizing of fonts. Using a 'fixed'
unit of measurement (eg pixels) can cause problems when you are
creating a website to be displayed on different devices.
Look at the example below of what would happen if the font size for
the text "Click on a tab ..." was set to 11px.
Sizing on an iPhone 5 (shown above) looks fine. But the font is far too
small when displayed on an iPad mini (see below).
To solve this problem, use relative units (eg vw) to size your fonts.
Apply the font sizes, margins and padding indicated to the

elements listed below.
Try it for Home page
Yourself 6 Intro text: "Click on a tab below ..." = 3.5vw
Headings on the menu tabs (eg Adventure, etc) = 3.7vw.
Text on the menu tabs = 3.8vw
Adventure page
Overlay text ("Looking for an adrenaline rush?") = 3.8vw; padding of 0.3rem on all sides;
margin top and bottom of 0 (this is needed or the UA will apply default margin).
'Find out more' button text = 3.5vw
Navigation menu text = 3vw
General
Paragraph text - font size: 3.8vw

44
LESSON 5
Styling with CSS (Part 2)
Learning Objective
When you have completed this lesson you will be able to use CSS to
position elements and establish the layout for your web pages. This
includes:
creating horizontal lists
using the position property to position 'outside the box model'
using the z-index property to change the stack order of elements
centring elements.
CSS sizing and positioning go hand-in-hand. Both require some basic

calculations, so dust off your maths brain (or have your calculator
handy!)
Creating Horizontal Lists
By default, <ul> (list) elements are displayed vertically (ie

underneath each other). That is why your navigation buttons are
currently running vertically.
To change your vertical list to a horizontal one, add the following CSS
rule to the <nav ul> element: display: inline-flex.
You should notice that the navigation list items are now next to each
other (as shown below).

45
There are a few more changes you need to make to the positioning
and sizing of the navigation list items.
Each button is a different width - based on the text it contains.
You want each button to be the same size.
The buttons need to be evenly distributed across the page - from
the left side to the right side.
There needs to be an equal amount of space between each button.
The text colour should be white.
The first issue that needs to be addressed is to set padding and
margin sizes for the <nav ul> elements. If you don't do this, the
browser may add its own default spacing. For example, have a look
at the <nav ul> element in Google Developer Tools.
2. Scroll down
1. Click. until you get to
the user agent
stylesheet.
Note that the user agent (ie the browser) has added a margin before
and after of 1em and padding at the start of 40px.
If you scroll down to look at the box layout for the element, you will
see that this results in a top and bottom margin of 16px, and left
padding of 40px.

46
Set your margin and padding for the <nav ul> element to 0. This will
make it much easier to get the calculations right for the navigation list
items.
Add the relevant CSS rules to ensure that your <ul> element
Try it for has margins and padding of 0.
Yourself 1
Next you are going to add some padding to individual list items in the
navigation so that there is some space between the text and the sides
of the button. You are also going to add a left and right margin so that
there is some space between the buttons.
NOTE: To make matters simpler when we need to do calculations,
we are going to use a single unit of measurement for all our <li>
elements in the navigation, namely %.
1. Add padding to the <li> element in your navigation. The

padding should be:
Try it for 1.1% on the left, right and bottom.
Yourself 2 3% on the top (The top margin is slightly bigger than the
others because later on you are going to move the top of
the navigation buttons under the banner logo, so the text
needs to be slightly further down on the button.)
2. Add a left and right margin of 0.6% to the <li> element in your navigation.
Once you have done this, your navigation list should look like that shown below.
The final step is to size each 'button' so that they are all the same
size and are evenly spread across the entire page. First you need to
set the container width to 100% (ie so that it stretches from one side
of the page to the other). To do this add the following CSS rule to the
<ul> element of your navigation: width:100;
Now you need to calculate the width for the <li> element.
So far, 17% of the available width (100%) has been used on padding
and margins. That leaves 83% for the buttons (100%-17%).
In other words, each button can take 16.6% of the space (16.6% X 5
buttons = 83%). So set the width for the <li> element as 16.6%.

Confused? The diagram below breaks down the maths.
margin margin margin margin margin margin margin margin margin margin
-left -right -left -right -left -right -left -right -left -right
0.6% 0.6% 0.6% 0.6% 0.6% 0.6% 0.6% 0.6% 0.6%
PADDING PADDING
PADDING PADDING PADDING
0.6%
2a ATC New Zealand www.instant.org.nz

1.1%
1.1%
16.6% 16.6% 16.6% 16.6% 16.6%
1.1%
1.1%
1.1%
1.1%
1.1%
1.1%
1.1%
1.1%
1.1%
1.1%
11122014-US-85881 INSTANT Education Solutions

100%
An easy way to do the calculation is as follows.

Number of containers X 2 (because padding and margins are on both sides) X (padding + margin)
In the previous example this would be:
5 X 2 X (0.6%+1.1%) = 17% used for padding and margins.
language
Create a website for a stakeholder using a mark-up
47
48
Now you can use what you know about the box model to move up
the navigation list so that the top of the list sits underneath the logo
banner.
To do this, give your navigation container a negative top margin value
of -3vw (ie margin-top: -3vw;).
Your navigation should now look like this:
At the moment the tabs are sitting on top of the logo banner, rather
than behind it. This is because in the 'natural flow', HTML elements
are stacked in the order in which they appear in your html file. In
this case, the element containing the logo banner is given before the
navigation element, so it is lower down in the 'stack'.
In the next section we will look at how the CSS z-index property can
be used to change the normal stack order.
Changing the Stack Order of

Elements
Below is an example of how CSS can be used to change the normal

stack order.
nav li{
z-index: -1;
}
Add the property to your CSS file and then preview your adventure.html
page again. This time the navigation should be correctly positioned, as
shown below.
NOTE: The element with the lowest z-index (ie stack order) will be
behind one with a higher z-index.

49
1. Use what you have learned about CSS sizing to get the
menu tabs to look like that shown below. To get you
Try it for started, the margin sizes for the different elements have
Yourself 3 been indicated. You need to calculate what the width
should be for each element.
Left and right margins for this text = 1vw
Padding for site_nav container = Top & bottom:

0.5%; left & right: 3%.
Image width
= 25%
Padding for tabs = Top & bottom: 0.1%; left &
right: 3%.
Top margin for tabs: 6%.
Align all tab text to the right.
Top margin for paragraph text: 0% (needs to be

set to 0 or UA will apply default)
Bottom margin for tab headings: 2.5%.
Make the relevant adjustment to the margins for the <tabs ul> container so that there is a
space between the top and bottom tabs and the edge of the <site_nav> container.
NOTE: You will also need to set the padding for the <tabs ul> container to 0, or the UA will
apply default padding to it.
In the next section, you will learn how to use the CSS position property
to position your menu images correctly in relation to the tabs.

50
Using the CSS position Property
The CSS position property gives you another way to position elements.
There are four main position values which are summarised below.
Static
Value: static
Effect on element position: None. This is the default value and will
mean elements are positioned in the normal flow (ie the first element in
the HTML will be first on the page, followed by the second element, etc).
Effect on layout (space for element): None.
Example:
HTML CSS
<div id="container"> #box 1{position:static}
<div id="box 1"> Box 1 </div>
#box 2{position:static}
<div id="box 2"> Box 2 </div>
<div id="box 3"> Box 3 </div> #box 3{position:static}
<div>
RESULT
Parent Container
Box 1
Box 2
Box 3

51
Relative
Value: relative
Effect on element position: Lays out elements in the normal flow and
then adjusts the elements position based on the property applied:
top adjusts the element relatively from the top of its normal
position
bottom adjusts relative from the bottom of its normal position
left adjusts relative from left of normal position
right- adjusts relative from right of normal position
z-index changes stack order
Effect on layout (space for element): None. A gap is left for where
the element would have been if the position property had not been
applied.
Note: If you use the position: relative; value and dont specify a top,
bottom, left, right or z-index value, the element will be positioned as
if static (ie as per the normal flow).
Example:
HTML - as for static
CSS RESULT
#box 1{position: static} Parent Container
#box 2{
position:relative; Box 1
right: 10px;}
#box 3{position: static}
Box 2
Box 3
Absolute
Value: absolute
Effect on element position: Positions the element relative to its
closest parent element that is also positioned. For example, if the
Parent Container is positioned as relative, then it will be the closest
parent element in the example shown below. Otherwise, the boxes (in
the example) will be positioned relative to the <html> element.

52
Effect on layout (space for element): No space is left for the element.
The element is taken out of the normal flow of the document.
Examples:
CSS RESULT
#box 1{position:static} Parent Container
#box 2{ Box 1
position: absolute;
right: 10px;}
Box 3 Box 2

CSS RESULT
#container{position: Parent Container

static;}
Box 1
#box 1{position:static}
#box 2{ Box 3 Box 2
position: absolute;
right: 10px;}
Fixed
Value: fixed
Effect on element position: Similar to absolute, but the element is
always positioned relative to the viewport. This can create a floating
element that stays in the same position, even if you scroll the page.
Effect on layout (space for element): As for absolute.
Let's look at some examples on your adventure.html page.
Relative positioning
You are going to position the main image on the page (marked
with id="image" in the html file) so that it is adjusted 0.7rem from
the top of its normal position (ie 0.7rem down from where it would
normally sit).
You also want to set the maximum width of the image to be 90%
of its parent container.

53
To do this, add the following to your css file and then preview the
page to see how the image has been positioned.
#image {
position: relative;
top: 0.7rem;
max-width: 90%;
}
You are going to position the introduction section (marked with

id="image" in the html file) 10px from the top of its normal position.
To do this, add the following to your css file and then preview the
page to see how the image has been positioned.
#intro{
position: relative;
top: 10px;
}
Absolute positioning
You want the overlay text to be over the image and sitting flush
with the right edge of the viewport. For this reason you are going to
need to remove it from the normal document flow using absolute
positioning.
To do this, you will first need to add position: relative; to
your body element - so that the #ot element can be absolutely
positioned relative to the body element.
Add the following to your css file and then preview the page to
see how the image has been positioned.
NOTE: Add it to your existing #ot properties.
#ot {
position: absolute;
bottom: 45%;
right: -2vw;
}

54
Use what you have learned about positioning to the position

Try it for the menu images and tabs on the home page so that they
Yourself 4 look like that shown below.
HINTS
You will need to do the following.
1. Use absolute positioning to position the images as shown (overlapping the tabs).
Remember: In order for absolute positioning to 'work' you have to set a position for the
parent container.
2. Do an initial estimation of the positioning values you will need. Then use the Google
Chrome Developer tools to help you fine-tune the positioning. You can change the
values in the Developer and see what effect it would have on the elements.

55
Centring an Element
Let's look at an example of how to centre an element. You want to

centre the 'Find out more' button on the adventure page.
1. Set a specific width for the element. In this case, a width of 32%
will work well for this element (to allow all the text to be displayed).
2. Position the element (either relative or absolute). In this case, use
position: relative;.
3. Do a basic calculation:
Width of element 2 [in this case = 16%]
4. Set the left margin for the element as -result of step 3 [in this case
margin-left: -16%;]. This ensures the middle of the element is
flush against the left side of its parent container.
5. Set the position left as 50% (ie half way across the parent
container).
The CSS for the 'Find out more button' would look like this.
#myButton {
width: 32%;
position: relative;
margin-left: -16%;
left: 50%;
}
Scaling Images to Fit their

Containers
If you do not specify dimensions (at least a width) for your images,
they will maintain their original size. This is why the banner logo is far
too big for the iPhone 5 viewport. This is because the banner logo's
original size is 960px wide (much wider than the iPhone viewport).
To find out what the original dimensions are of an image, follow the
instructions on the next page.

56
1. Right-click on the
image and select
'Properties' from
the shortcut menu.
2. Scroll down.
To get the image to fit the size of its container, all you need to do is
set its width as 100%.
Have a look at your index.html and adventure.html files.

You will notice that most of the images have been given the
Try it for attribute class = "ri". This is so that you can apply the
Yourself 5 same styling to them all. You want them all to have the width
of their containers.
Add the necessary rule to your CSS file.
Use what you have learned to add some finishing touches to

Try it for your pages.
Yourself 6
1. 'Find out more' button: Add some space between the button and the text above it.
2. Footer:
Right align the footer text.
Make the footer font size a bit smaller than it currently is.
3. Overlay text: Depending on the sizing you have used for your footer, you might need to
adjust the position of the overlay text.
Your completed pages (for display on iPhone 5) should now look like those shown in
Appendix A.
In the next lesson, we will look at how to ensure the pages display
properly on devices with larger viewports.

57
LESSON 6:
Responsive Web Design and

Website Evaluation
Learning Objective
When you have completed this lesson you will be able to apply the
following to create responsive web pages.
Different style sheets for different viewport sizes.
Embed different images dependent on viewport size.
You will also learn how to use validation tools as part of the process
of evaluating your website.
Congratulations! You have created the first two pages of the TourNZ
website for display on an iPhone 5.
But what does the website look like when it is viewed on an iPad or
notebook? Use the Google Chrome Developer Tools Emulator to find
out for yourself. You will notice that things don't fit as nicely on the
screen when viewed on devices with bigger viewports. The font size
is too big, and on the notebook, the banner logo looks far too big.
In this lesson we will look at how to address these issues to make sure
that your web pages look good on any device. We have already done
a lot to set up our pages so that they will 'respond' well when viewed
on different viewports. This includes using units of measurement such
as rem, vw and %. Now we will look at two other ways in which to
create responsive pages.
Applying different stylesheets for different viewport sizes.
Embedding different images for different viewport sizes.

58
LESSON 6: Responsive Web Design and Website Evaluation
Apply Different Stylesheets for

Different Viewport Sizes
You can change your html files so that different stylesheets will be
loaded depending on the viewport size or media type (eg print,
screen, braille, etc).
Look at the example below. The highlighted line has been added to
the index.html document.
<head>
<meta charset="UTF-8"/>
<meta name="description" content="New Zealand has something for
everyone! Find out how TourNZ can help you experience YOUR New Zealand
dream.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="TourNZ">
<title>New Zealand - Something for Every One | TourNZ</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="large.css" type="text/css" media="(min-
width:601px)">
<link href='http://fonts.googleapis.com/css?family=Montserrat'
rel='stylesheet' type='text/css'>
</head>
Initially, the style.css stylesheet is applied. Then, the media attribute

(media="(min-width:601px)") instructs the UA to only apply the
stylesheet large.css if the viewport is at least 601px wide (min-
width: 601px).
Usage notes
In the large.css stylesheet, you don't need to repeat all the CSS
rules. You only need to add those that will change the 'default'
layout (set by style.css).
You can add as many different stylesheet links as needed.
You could also use the max-width media feature.
For example, media="max-width:600px" means that the
specified stylesheet will only be loaded when the viewport is less
than 600px wide.
Determining the viewport min- or max- width

Deciding at which point a different stylesheet should be loaded is
somewhat dependent on personal preferences. To help you make
the decision, use the Google Chrome Developer Tools Emulator as
shown on the next page.

59
1. Start by viewing the page with the

device set as Apple iPhone 5.
2. Make sure there is NO check mark

next to 'Fit'. This will allow you to see
the page at its real size (not a size
scaled to fit your computer's display).
3. Drag the width sizing tab

to the right, until the text and
other elements start to look
too big for the page.
4. Take note of the

width. This is the
point after which
you want to load a
different stylesheet
which works better
for a larger viewport.
So the media value
would be (min-
width:601px).

60
The next step is to create the large.css file and add the relevant
styling rules to it. REMEMBER: You don't need to repeat all the rules
- only what needs to change from the 'default' style (ie style.css).
You want the home page to look like that shown below when viewed
on a larger viewport such as an iPad mini.
The key changes are that the font sizes have been changed (made
smaller) and the menu has been changed to a horizontal list.
Let's make one of these changes together.
1. Create a css file called large.css.
2. Add the relevant link (including the media attribute) to your HTML files.
3. Add the following to the css file. This will change the menu from a
vertical list to a horizontal list (and remove unnecessary margin space).
#tabs ul {
display: inline-flex;
margin: 0;
}

61
Preview the page in the Google Emulator. Start by previewing it as

iPhone 5, then slowly increase the width. You will notice that at 601px
wide, the layout changes: the vertical menu becomes a horizontal
menu like that shown below.
As you can see, there are still some sizing and layout issues which
need to be addressed on the page.
Add the necessary rules to your large.css file to ensure the

Try it for page layout looks like that shown on the previous page.
Yourself 1 HINTS:
You are going to need to make changes to the following.
Font sizing (can be smaller than for the iPhone). This will need to be changed for a
number of elements.
Positioning.
Width, margins and padding for the tabs.
Margins for the tab headings.
Padding for the site_nav container.
Text alignment for the tabs.
Positioning and size of the menu tab images. HINT: You will need to make the width of
the images bigger than 100%, so that they stick out on either side of the tabs.
Margins for the footer.

62
The CSS Float Property

Next you are going to add css rules to your large.css file for
adventure.html page. But before you do so, there is another useful
CSS positioning property you need to know - the float property.
Applying the float property works in a similar way to 'text wrap' in a
word processor. Let's look at an example on your adventure.html (for
the large.css styling). You want to do the following.
Adjust the
maximum width of
the image to 60%. Allow the text to
sit to the right of
the image (ie it is
wrapping around
the image).
Add a right margin to the image so that there is

some space between the image and the text.
To achieve this, add the following to your large.css file.
#image {
max-width: 60%;
float: left;
margin-right: 3vw;
}
Add the necessary rules to your large.css file to ensure the

Try it for adventure page layout looks like that shown above.
Yourself 2

63
Preview your pages

Use the Google Emulator to preview your pages on iPhone 5, iPad
mini and on Generic notebook. Note: You may need to click next to
'Fit' to be able to see the full page on your computer's display.
You should notice that the pages now work well for iPhone5 and iPad
mini. However, for the Generic notebook, you will probably notice
that the banner heading is looking far too big compared to the other
elements. To solve this problem, you are going to get the UA to load
a different image, depending on the size of the viewport.
Embed Different Images for

Different Viewport Sizes
Look at the code below. The yellow highlighted code has been added
to the existing link for the banner logo in the index.html file.
<img src="images/logo_banner_960.png" class="ri"

alt="TourNZ. Let us show you the ultimate New Zealand
for you." title="TourNZ. Providing unique New Zealand
experiences to suit everyone."
sizes="80vw"
srcset="images/logo_banner_960.png 960w,
images/logo_banner_1920.png 1920w">
By adding the highlighted attributes (sizes and srcset) you can do the
following.
sizes="80vw" sets the proportion of the image to always fill 80%
of the viewport (width).
srcset information supplies two different images - one with a
width of 960px and one with a width of 1920px. The browser will
use this information to decide on the best image to display based
on the viewport width and the device's display resolution.
1. Add the sizes and srcset attributes (as shown above) to

Try it for your index.html and adventure.html pages.
Yourself 3 2. Preview your home page in the Google Emulator for
iPhone, iPad and Generic Notebook. You will notice that
for iPhone and iPad the banner logo is different to that
displayed for the Generic Notebook.

64
Evaluating the Web Pages
In Lesson 1 we looked at the importance of testing and evaluating

your website as you develop it.
Throughout this guide you have seen examples of how Google Chrome
Developer Tools and the Emulator can be used to preview your web
pages to ensure they are accessible and displaying as intended on
different devices.
In addition to checking for accessibility, readability, legibility, and
presentation you also need to validate your code (ie check that it is
valid HTML and CSS).
Two useful tools to help you do this are:
The W3C HTML validator:
http://validator.w3.org/#validate_by_upload
The W3C CSS validator:
http://jigsaw.w3.org/css-validator/#validate_by_upload
1. Browse to find the file

you want to validate.
2. Click.
3. Look carefully at the results of the validation and make any

changes needed (if any errors are identified).
4. Once the file has been validated (ie checked as valid HTML or
CSS) you could take a screenshot of the validation service results.
This can act as evidence that you have completed testing and
that the markup/css has been validated.

65
Staying Informed and Current
Responsive Web Design is a relatively new concept (only coined in

2010). As a result, the field is developing rapidly. By the time you
read this, there may be other better ways that have been developed
to apply RWD. It is important that you stay up-to-date with the latest
information. Furthermore, what we have covered in this guide is only
a small part of what can be done using HTML and CSS.
Below are some Internet resources to provide you with more
information and to keep you up-to-date.
HTML5 and CSS

HTML5 rocks - http://html5rocks.com
W3C - http://www.w3.org/TR/html5-diff/
- http://www.w3.org/Style/CSS/Overview.en.html
Smashing Magazine - http://wp.smashingmagazine.com/
w3schools.com - www.w3schools.com
Developer forums/blogs
Google Chrome Developer forum - http://www.chromeplugins.org/
google/
Windows Internet Explorer Engineering Team Blog - http://blogs.
msdn.com/b/ie/
Firefox Mozilla Developer Network - https://developer.mozilla.org
Safari Developer Center - https://developer.apple.com/devcenter/
safari/index.action

66
Glossary
accessibility Ability for anyone to be able to access a web page and its contents,
regardless of whether they have a disability (eg are visually impaired) or
the browser, platform or device they are using.
align(ment) How text is lined up (eg justified, left justified, right justified, centred).
appropriate(ness) Suitable or well-matched to something else.
constraint A limit on something. Examples of constraints could include the amount of
time or money available to complete the website.
content The elements used together to create the presentation. This could include
text content, images, audio, etc.
emulate To imitate the functioning of another device or application. In the context of
website development, emulation means to show what a web page would
look like and how it would function on another device, platform and/or
browser.
functionality What something is able to do.
horizontal(ly) Left to right (width).
radii Plural of 'radius'.
responsive web Designing web pages that display well on different devices with different
design viewport sizes.
requirements Something that is needed or must be done.
RWD Responsive web design.
SEO (Search The process of ensuring a website comes up as high as possible in a
Engine search engine's list of results.
Optimisation)
specifications Requirements and constraints of a document. They are a measurable list
of requirements that need to be fulfilled in order for the document to meet
the brief.
stakeholder Someone who has an interest or stake in what you are creating. In the case
of website creation, the person(s) who asked you to create the website
would be the key stakeholder(s).
target audience The people who will be viewing/accessing the website.
(intended
audience)
user agent (UA) A user agent is software that gets and delivers the content and style from
a web document in a form that the user can understand. Examples include
browsers, screen readers, media players, voice recognition software, etc.
vertical(ly) Up and down (height).
viewport The window or viewing area on the device's screen (ie it is the part of the
screen on which you can see content)

67
Appendix A: TourNZ Website

concept sketches and mockups
index.html - iPhone 5

68
adventure.html - iPhone 5

69
index.html - iPad Mini

70
index.html - Notebook

71
index.html - iPhone 5
adventure.html - iPhone 5

72
index.html - iPad Mini
adventure.html - iPad Mini

73
index.html - Notebook

74
Study Notes

75
Study Notes

21 Ruakura Rd, Hamilton East,
Hamilton 3216
Phone: 0800 864 863
E-mail: instant@atc.org.nz
www.instant.org.nz
ATC New Zealand


Create A Website Learners Guide PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create A Website Learners Guide PDF

Uploaded by

Copyright:

Available Formats

Learners Guide

Create a website for a

Using HTML5 and CSS3

Licensed to Best Pacific Institute of Ed.

Licensed to Best Pacific Institute of Ed.

Licensed to Best Pacific Institute of Ed.

Semantic HTML5 - A Review of the Basics 11

CSS3 - A Review of the Basics 20

Styling with CSS (Part 1) 30

Styling with CSS (Part 2) 44

Responsive Web Design and Website Evaluation 57

Licensed to Best Pacific Institute of Ed.

Planning and Designing a

You should already be familiar with the basics of how to create a

Responsive Web Design (RWD)

In the past, web developers only needed to create web pages

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

One possible solution is to develop different websites for different

Check out some responsive design websites yourself. You

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Image source: (http://nickhurley.

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Tiny screen first

A brief gives a clear description of the outcomes that need to be

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Read the scenario below for a company called TourNZ who

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Putting together a plan

You should already be aware of how important it is to plan your website

Milestones and steps Date Resources and other requirements

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Develop a plan for the TourNZ website that is based on the

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Creating an End-User Document

An end-user document provides a short description of the purpose

TourNZ Website: End-User Document

Cursor changes when the mouse is

Licensed to Best Pacific Institute of Ed.

LESSON 1: Planning and Designing a Website

Guidelines for an effective end-user document

In the next two lessons, we will do a quick review of the basics of

Licensed to Best Pacific Institute of Ed.

Semantic HTML5 - A Review

Website Development Principles

Licensed to Best Pacific Institute of Ed.

LESSON 2: Semantic HTML5 - A Review of the Basics

Separate structure and presentation

Use semantic HTML

Legal and Ethical Considerations

Using a Text Editor

Licensed to Best Pacific Institute of Ed.

LESSON 2: Semantic HTML5 - A Review of the Basics

HTML Basics Review

<h1> HTML elements and tags. </h1>

Start tag Content End tag

Figure 1: HTML element