DDW Student Guide v1.0

LEVEL 4
DESIGNING AND DEVELOPING A WEBSITE
Student Guide
DDW Student Guide v1.0

Title Here
Modification History
Version Date Revision Description

V1.0 June 2011 For release
© NCC Education Limited, 2011

All Rights Reserved
The copyright in this document is vested in NCC Education Limited. The document must not be
reproduced by any means, in whole or in part, or used for manufacturing purposes, except with the
prior written permission of NCC Education Limited and then only on condition that this notice is
included in any such reproduction.
Published by: NCC Education Limited, The Towers, Towers Business Park, Wilmslow Road,
Didsbury, Manchester M20 2EZ, UK.
Tel: +44 (0) 161 438 6200 Fax: +44 (0) 161 438 6240 Email: [email protected]
http://www.nccedu.com
Page 2 of 63
Title Here
CONTENTS
1. Module Overview and Objectives .............................................................................. 5
2. Learning Outcomes and Assessment Criteria .......................................................... 5
3. Syllabus ....................................................................................................................... 6
4. Related National Occupational Standards ................................................................ 9
5. Teaching and Learning............................................................................................... 9
5.1 Lectures...................................................................................................................... 10
5.2 Tutorials ...................................................................................................................... 10
5.3 Laboratory Sessions ................................................................................................... 10
5.4 Private Study .............................................................................................................. 10
5.5 Software Requirements .............................................................................................. 10
6. Further Reading List ................................................................................................. 11
7. Assessment .............................................................................................................. 12
Topic 1: Introduction............................................................................................................... 13
1.1 Learning Objectives .................................................................................................... 13
1.2 Timings ....................................................................................................................... 13
1.4 Private Study Exercises .............................................................................................. 16
Topic 2: Introduction to (X)HTML ........................................................................................... 17
2.2 Timings ....................................................................................................................... 17
Topic 3: Introduction to Cascading Style Sheets (CSS) ....................................................... 21
3.2 Timings ....................................................................................................................... 21
Topic 4: Hyperlinks ................................................................................................................. 27
4.2 Timings ....................................................................................................................... 27
Topic 5: Integrating Media ...................................................................................................... 33
5.2 Timings ....................................................................................................................... 33
Page 3 of 63
Title Here
Topic 6: HTML Tables ............................................................................................................. 37
6.2 Timings ....................................................................................................................... 37
Topic 7: HTML Forms.............................................................................................................. 41
7.2 Timings ....................................................................................................................... 41
Topic 8: Page Layout with CSS .............................................................................................. 45
8.2 Timings ....................................................................................................................... 45
Topic 9: Introduction to Web Design ..................................................................................... 49
9.2 Timings ....................................................................................................................... 49
Topic 10: Navigation and Interface Design ............................................................................. 53
10.2 Timings ....................................................................................................................... 53
10.4 Private Study .............................................................................................................. 55
Topic 11: Evaluation and Testing............................................................................................. 57
11.2 Timings ....................................................................................................................... 57
Topic 12: Summary ................................................................................................................... 61
12.2 Timings ....................................................................................................................... 61
12.4 Private Study .............................................................................................................. 63
Page 4 of 63
Overview
1. Module Overview and Objectives

This unit aims to give you a thorough knowledge of web coding in (X)HTML and CSS, and an
understanding of website design and testing. The first topic introduces the World Wide Web
(WWW), and the fundamental challenges facing the designers of websites. Topics 2-8 explore
HTML and CSS in detail in order to equip you with the skills and knowledge to build effective
websites. The module finishes by considering the design of websites and in particular user-centred
approaches to the design and evaluation.
2. Learning Outcomes and Assessment Criteria

Learning Outcomes; Assessment Criteria;
The Learner will: The Learner can:
1. Design a website to address loosely- 1.1 Identify the key design features inherent within a
defined requirements requirements specification
1.2 Use planning tools and techniques to create a site
map
1.3 Evaluate different design models and select the
most appropriate to meet requirements.
2. Use web development tools to build 2.1 Describe the use of (X)HTML to develop websites
(X)HTML- and CSS-based websites 2.2 Describe how to use CSS to standardise the
to address well-defined specifications overall style of a website
2.3 Write the source code for a simple web page in
clean XHTML according to a specification.
2.4 Write the source code for a CSS according to a
specification
2.5 Explain the contextual application of a variety of
web development tools
2.6 Explain the advantages and disadvantages of
various web development methodologies and
technologies
3. Understand the technology and tools 3.1 Explain the advantages and disadvantages of
needed to use multimedia in the various types of multimedia file formats
context of a website 3.2 Explain the advantages and disadvantages of
different types of multimedia elements in relation
to different contexts
3.3 Embed functional multimedia components in an
(X)HTML site
Page 5 of 63
Title Here
4. Develop test strategies and apply 4.1 Develop and apply a test strategy consistent with
these to a website the design
4.2 Determine expected test results
4.3 Record actual test results to enable comparison
with expected results
4.4 Analyse actual test results against expected
results to identify discrepancies
4.5 Investigate test discrepancies to identify and
rectify their causes
4.6 Explain the need for testing on different platforms
and browsers
5. Understand the need for Web 5.1 Explain the role of the W3C
standards 5.2 Explain W3C standards and their application in
site coding
5.3 Discuss web accessibility and usability issues
from the viewpoint of an IT professional
6. Understand the concepts associated 6.1 Explain the underlying physical and operational
with using the Internet and the World properties of the Internet and World Wide Web,
Wide Web for business including the difference between the two.
6.2 Discuss the Internet and the Web as a business
tool, including (but not limited to) as a tool for
communications, research, sales and marketing.
6.3 Discuss the advantages and disadvantages of
various internet-based models, in different
contexts
6.4 Discuss the advantages and disadvantages of
various eCommerce models, in different contexts
3. Syllabus
Syllabus
Topic No Title Proportion Content
1 Introduction to 1/12 • What is the WWW?
the Module • How the WWW works
2 hours of • The W3C and the importance of web
lectures standards
4 hours of • The challenges of web design
laboratory
- Browsers
sessions
- Screen resolution
1.5 hours of
tutorials - Accessibility
- Usability
Learning Outcomes: 5 & 6
Page 6 of 63
Title Here
2 Introduction to 1/12 • Basic principles of markup: elements, tags and

(X)HTML attributes
2 hours of • Document structure:
lectures - Document Type Declarations
4 hours of - The root element
laboratory - The head and body sections
sessions
• Structuring text: heading, paragraphs and lists
1.5 hours of
tutorials • Block level and inline elements
• Validating documents
Learning Outcome: 2
3 Hyperlinks 1/12 • Using the anchor element
• Relative and absolute URLs
2 hours of • In-page hyperlinks
lectures
• The HTML 5 nav element
4 hours of
• Accessible hyperlinks
laboratory
sessions
1.5 hours of
tutorials Learning Outcomes: 2 & 6
4 Introduction to 1/12 • What is CSS, why do we need CSS?
Cascading Style • Applying CSS: inline, embedded and external
Sheets (CSS) style sheets
2 hours of
lectures • Overview of CSS selectors, properties and
4 hours of values
laboratory • Efficient CSS
sessions
• Validating CSS
1.5 hours of
tutorials • Developer tools
Learning Outcome: 2
5 Integrating Media 1/12 • Image file types

• Inserting images
2 hours of • Image maps
lectures
• Audio and video file types
4 hours of
• The object tag
laboratory
sessions • HTML 5 video and audio tags
1.5 hours of • Accessibility and media types
tutorials Learning Outcomes: 2, 3 & 5
Page 7 of 63
Title Here
6 HTML Tables 1/12 • Basic structure of HTML tables

• Column and Row Spanning
2 hours of • Tables as a page layout devices
lectures
• CSS and tables
4 hours of
• Accessibility and Tables
laboratory
sessions
1.5 hours of
7 HTML Forms 1/12 • Basic structure of HTML Forms
• HTML Form elements
2 hours of • Accessibility and HTML forms
lectures
• Controlling the layout of forms
4 hours of
• HTML 5 form elements
laboratory
sessions
1.5 hours of
8 Page Layout with 1/12 • The class and id selectors
CSS • Floating and positioning
2 hours of • Fixed width and fluid page design
lectures
• HTML 5 section elements
4 hours of
• Page layout and mobile devices
laboratory
sessions
1.5 hours of
9 Introduction to 1/12 • Understanding why an organisation needs a
Web Design website:
2 hours of - eBusiness models
lectures - eCommerce models
4 hours of • The process of designing a website
laboratory • Involving users in the design process
sessions
• Defining content and functionality
1.5 hours of
10 Navigation and 1/12 • Site structure

Interface Design • Designing navigation
2 hours of • Interface Design
lectures
4 hours of
laboratory
sessions
1.5 hours of
Page 8 of 63
Title Here
11 Evaluation and 1/12 • Validating documents

Testing • Testing with a range of browsers
2 hours of • Testing with users
lectures
• An iterative approach to development
4 hours of
laboratory
sessions
1.5 hours of
12 Summary 1/12 • Summary and recap of previous units
• Hosting a website
2 hours of • HTML 5, CSS 3 and the mobile web
lectures
4 hours of
laboratory
sessions
1.5 hours of
tutorials Learning Outcomes: All
4. Related National Occupational Standards

The UK National Occupational Standards describe the skills that professionals are expected to
demonstrate in their jobs in order to carry them out effectively. They are developed by employers
and this information can be helpful in explaining the practical skills you have covered in this module.
Related National Occupational Standards (NOS)

Sector Subject Area: 6.1 ICT Professional Competence
Related NOS: 4.6.A.1 – Contribute to human interaction and interface (HCI) design activities;
4.6.A.2 – Assist, under supervision, with the progress of human interaction and interface (HCI)
design assignments;
4.6.P.1 – Prepare for human interaction and interface (HCI) design activities;
4.6.P.2 – Implement, under supervision, human interaction and interface (HCI) design activities;
4.6.P.3 – Manage the needs of different users of HCI design activities;
4.6.S.1 – Plan human interaction and interface (HCI) design activities.
5. Teaching and Learning

Suggested Learning Hours
Lectures: Tutorial: Seminar: Laboratory: Private Study: Total:
24 18 - 48 60 150
The teacher-led time for this module is comprised of lectures, laboratory sessions and tutorials. You
will need to bring this Student Guide to all classes for this module. The breakdown of the hours for
each topic is given in the topic notes below.
Page 9 of 63
Title Here
5.1 Lectures
Your lecturer will be presenting the basic knowledge and the theoretical concepts required for the
unit during this time. He/she will use PowerPoint slides during the lecture time and you will be
expected to take notes.
You will also be encouraged to be active during this time and discuss and/or practice the concepts
covered. Lectures will include question and answer elements to promote participation and to allow
your lecturer to check whether you understand the concepts they are covering.
5.2 Tutorials
These are designed to deal with the questions arising from the lectures and private study sessions.
You should think carefully beforehand about any areas in which you might need additional guidance
and support and use this time to discuss these with your teacher.
5.3 Laboratory Sessions

During these sessions, you are required to work through practical tutorials and various exercises.
The details of these are provided in this guide.
5.4 Private Study

This Student Guide also contains details of the private study exercises. You are expected to
complete these exercises to improve your understanding. Your tutor will set deadlines for the
completion of this work and go over the suggested answers with you. The deadlines will usually be
before the scheduled tutorials for that topic. Some of the private study tasks may require you to work
in a small group so you will need to plan your time carefully and ensure that you can meet with your
group members to complete the work required before the deadline.
You should also use this time to revise the content of lectures to ensure understanding and conduct
extra reading (using the supplementary textbooks or other materials available in the library or
online). You should bring any questions to the tutorial for additional guidance and support.
5.5 Software Requirements

During this module, you will need access to a range of web browsers to test your website:
• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
You will also need access to the following:
• A simple text editor for creating and editing HTML and CSS documents. There are many
free, open source text editors, such as Bluefish, Programmer’s Notepad and Crimson Editor
that provide good support for HTML editing.
• A media file converter for preparing audio and video files for the web, e.g. Miro Video
Converter.
• An image-editing application for performing basic image manipulation, e.g. GIMP.
• Client–side FTP software, such as FileZilla, so you can upload your website to a server.
Page 10 of 63
Title Here
• A web server so that you can publish your website on the World Wide Web (WWW).
All of these resources will be available in the computer laboratory at your Accredited Partner Centre.
6. Further Reading List

You will also be expected to undertake further reading to consolidate and extend your knowledge of
the topics covered in this module. Your Accredited Partner Centre’s library will contain a selection of
useful sources of information and you can also make use of materials available online. The list
below also provides suggestions of suitable reference books you may like to use:
Chisholm, W. and May, M. (2008). Universal Design for Web Applications: Web Applications That
Reach Everyone. O'Reilly Media.
ISBN-10: 0596518730
ISBN-13: 978-0596518738
Courage, C. and Baxter, K. (2005). Understanding Your Users: A Practical Guide to User
Requirements Methods, Tools, and Techniques. Morgan-Kaufmann.
ISBN-10: 1558609350
ISBN-13: 978-1558609358
Duckett, J. (2010). Beginning HTML, XHTML, CSS, and JavaScript. John Wiley and Sons.
ISBN-10: 0470540702
ISBN-13: 978-0470540701
Felke-Morris, T (2010). Web Development and Design Foundations with XHTML. Pearson.
ISBN-10: 0137052758
ISBN-13: 978-0137052752
Henick, B. (2010). HTML & CSS: The Good Parts. O'Reilly Media.
ISBN-10: 0596157606
ISBN-13: 978-0596157609
Kennedy, B. and Musciano,C. (2006). HTML & XHTML: The Definitive Guide. O'Reilly Media.
ISBN-10: 0596527322
ISBN-13: 978-0596527327
Krug, S. (2005). Don't Make Me Think: A Common Sense Approach to Web Usability. New Riders
Press.
ISBN-10: 0321344758
ISBN-13: 978-0321344755
Laudin, K C and Guercio Traver, C (2010). eCommerce 2010: Business. Technology. Society.
Pearson.
ISBN-10: 0-13-509078-4
ISBN-13: 978-0-13-509078-4
Lawson, B and Sharp, R. (2010). Introducing HTML5. Pearson

ISBN-10: 0321687299
ISBN-13: 978-0321687296
Niederst, J. (2006). Web Design in a Nutshell: A Desktop Quick Reference. O'Reilly Media.
ISBN-10: 0596009879
ISBN-13: 978-0596009878
Page 11 of 63
Title Here
Watrall, E. and Siarto, J. (2008). Head First Web Design. O'Reilly Media.
ISBN-10: 0596520301
ISBN-13: 978-0596520304
7. Assessment
This module will be assessed by means of an assignment worth 25% of the total mark and an
examination worth 75% of the total mark. These assessments will cover the learning outcomes and
assessment criteria given above.
Page 12 of 63
Topic 1
Topic 1: Introduction
1.1 Learning Objectives

This topic provides an overview of the fundamental technologies of the World Wide Web and
introduces you to the challenges involved in designing and building effective websites.
On completion of the topic, you will be able to:
• Define the Internet and World Wide Web;

• Describe in broad terms what happens when a browser views a web page;
• Explain what HTML, CSS and web standards are;
• Describe the challenges involved in designing web pages that are understandable by as many
people as possible.
1.2 Timings
Lectures: 2 hours
Laboratory Sessions: 4 hours
Tutorial: 1.5 hours
Private Study: 5 hours
Page 13 of 63
Title Here
The laboratory time allocation for this topic is 4 hours.
The purpose of this session is to develop a practical understanding of many of the ideas introduced
in the lecture about the challenges of web design. At the end of the session, you should have:
• A greater appreciation of the difficulties of designing websites that can be used by as many
people as possible
• Experience of surfing the web from a point of view which is different to the one with which you
are familiar.
Your tutor will arrange you into small groups and give you a number of different websites to
evaluate. At the end of each exercise, there will be a feedback session where you can share your
findings with the larger group.
Exercise 1: Designing for Different Browsers
View a page from each site in a number of different browsers. Note any differences in the
appearance of the pages between different browsers.
Exercise 2: Designing for Different Screen Resolutions
1. Browse each website using different screen resolutions. Initially, view each site at 1024x768
pixels and evaluate the design of the site at this resolution. The site shouldn’t require the user to
scroll horizontally at any point; the page content should fit within the width of the browser window.
2. Now view the same site at a higher resolution.
• What happens to the page layout?

• For each site, would you describe the design as being fixed or fluid?
• Does the page re-size to fit the browser window or does it remain the same width?
• How has the designer attempted to deal with the issue of differences in screen resolution?
• Which site’s page layout do you like best?
• Which do you think is easiest to read?
Exercise 3: Designing for Mobile Devices
Using a tool specified by your teacher, test each site to see how it would appear to mobile users:
• Does the server provide a different version of the site if it detects that you are using a mobile
device? It may even provide different versions for different mobile devices, e.g. a site
specifically for smart phones.
• How easy is it for mobile users to perform tasks at the site?
• Do you think the site needs a mobile version? Will users of the site want to access it using a
mobile phone?
Page 14 of 63
Title Here
Exercise 4: Designing for Accessibility
1. First test each site with images and CSS switched off in the browser. Ask your tutor how to do
this. Switching off images and CSS can help you start to appreciate how a blind person using a
screen reader would perceive the site. The screen reader will ignore images and the visual
appearance of pages and only read out the text to the user.
• Without text and CSS, does the site still make sense? Think about the order in which the text
is presented.
• Can you still navigate the site?
• Have text alternatives been provided for images and media in the site?
2. Next, test to see if you can navigate the site using only your keyboard only (using tab, shift tab
and enter in most browsers). Many users with motor disabilities are unable to use a mouse and
rely on the keyboard to navigate the site. Think about the order in which navigation options are
presented to the user.
Page 15 of 63
Title Here
1.4 Private Study Exercises
You should spend approximately 5 hours on the Private Study for this topic. You should use this
time to complete the exercises below as directed by your lecturer. You will review your private study
work with your lecturer and other students during the tutorial for this topic.
Exercise 1: Review the Lecture Slides
Review the lecture slides and do any additional reading necessary so you understand and feel
confident about the content. Much of the practical work we will do in future topics will assume you
are familiar with the basic challenges of designing websites.
Exercise 2: Become Familiar with a New Browser
You should spend some time using a web browser with which you have limited or no experience. In
particular, being familiar with Firefox, Chrome or Opera will be beneficial, as later in the module we
will use tools in these browsers that are not available in Internet Explorer 8.
Exercise 3: Research into Browser Usage
Browser usage was discussed during the lecture (Slide 18).
• Do some research on the web to find up-to-date web browser usage statistics.
• Which browsers are gaining in popularity, which are declining in popularity?
• Can you find statistics specifically for your country?
Exercise 4: Research into Mobile vs. Desktop Web
At the time of writing, the mobile web is gaining rapidly in popularity.
• Again, do some research on the web to find up-to-date usage statistics comparing the
numbers of mobile and desktop web users.
Exercise 5: Research into Legal Requirements for Accessibility
Many countries have legal requirements for accessibility standards of websites.
• Research if there is any legislation governing the accessibility requirements for websites in
your country. The W3Cs web accessibility initiative - http://www.w3.org/WAI/Policy/ - maybe
a good place to start.
Page 16 of 63
Topic 2
Topic 2: Introduction to (X)HTML

This topic provides an overview of basic web page construction using (X)HTML. On completion of
the topic, you will be able to:
• Describe the basic principles of a markup language: elements, tags and attributes;
• Explain the fundamental structure of (X)HTML documents;
• Create a simple web page using (X)HTML;
• Structure text based (X)HTML documents using features such as paragraphs, headings and
lists;
• Define validation in the context of (X)HTML pages and be able to write valid (X)HTML.
2.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 17 of 63
Title Here
Exercise 1
Look at the following HTML elements. For each one, identify the tag name, the attribute(s), the
value(s) and the content of the element.
1. <label for="username">Username:</label>
2. <td axis="contact" colspan="2">Email</td>
3. <area shape="circle" coords="0,0,100" href="home.html" alt="home" />
Exercise 2
1. An element you will look at in future topics is the <div> element. The <div> element can
feature many attributes including id and class. Write a <div> element that has an id value of
‘header’ and a class value of ‘highlight’. The content of the element should be the text ‘this is
a test’.
2. Another element you will look at is the <input/> element. It is an empty element. It can
feature type and name attributes. Write an <input/> element that has a type value of ‘text’
and a name value of ‘username’.
Exercise 3
Create an HTML CV (Curriculum Vitae; also known as a resume) for yourself. The CV should
feature the following:
• Personal information such as name and contact details
• Qualifications
• Employment history
• Hobbies and interests
Use the HTML page on Slide 12 from the lecture as a starting point. To start with, simply change the
<title> of the page and add a single <h1> element in the body of the document. Test the page in a
web browser and validate the page using the W3C validator, http://validator.w3.org/ .
If you can get this to work, gradually add in more content, experimenting with different tags as you
do so. Validate the page regularly and fix any errors the validator identifies. If you are confused by
the error messages or are struggling to validate the page, ask your tutor for help.
Page 18 of 63
Title Here
Exercise 4
The lecture session demonstrated the use of HTML list elements and this exercise builds on this
example. Create an HTML page that will structure the following as an HTML list. Again, validate the
page and make sure you don’t have any errors.
List of Geometric Shapes

Triangle:
A three sided shape. Some different types of triangle:
• equilateral triangle
• isosceles triangle
• scalene triangle
Quadrilateral:
A four sided shape. Some different types of types of quadrilateral:
• parallelogram
- rectangle
- square
• trapezoid
Pentagon:
A five sided shape.
Page 19 of 63
Title Here
confident about the content. In the coming topics, we will explore many different features of HTML
and learn about many new elements. All elements in HTML work in the same basic way, so being
familiar with the concepts, such as elements, tags, attributes and nesting, will make learning the new
features much easier.
Exercise 2: Complete the Practical Exercises
If you did not manage to complete all the exercises during the practical session, you should attempt
to do so during your private study time.
Exercise 3: Learn Some New Elements
It is not feasible to cover every single HTML element during the lecture time. Some of the text
related elements we have not explored include <address>, <sup>, <sub>, <abbr>, <ins>, <del> and
<pre>. You should do some additional research to learn about these and other text related elements
in the XHTML 1.0 Strict specification.
There are many resources on the web for learning HTML, for example http://www.w3schools.com/
or http://www.w3.org/2010/04/xhtml10-strict.html. You can also use the reading list for the module to
find a relevant book for learning HTML. Integrate some of these new elements into the CV page you
created in the practical session.
Page 20 of 63
Topic 3
Topic 3: Introduction to Cascading Style Sheets (CSS)

This topic provides an overview of cascading style sheets (CSS).
• Discuss the role of CSS in developing web pages;

• Create style sheet rules using a variety of selectors and properties;
• Describe the advantages and disadvantages of using external, embedded and inline style
sheets;
• Explain the need for efficient and well organised style sheets.
3.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 21 of 63
Title Here
Exercise 1
In the last topic you did an exercise that involved structuring a list of different shapes using HTML.
You can use your solution to this exercise or copy the following solution into an HTML document.
We are going to use this example file to practice some basic features of CSS.
<h2>List of geometric shapes</h2>

<dl>
<dt>Triangle:</dt>
<dd>A three sided shape. Some different types of triangle:
<ul>
<li>equilateral triangle</li>
<li>isoceles triangle</li>
<li>scalene triangle</li>
</ul>
</dd>
<dt>Quadrilateral:</dt>
<dd>A four sided shape. Some different types of types of quadrilateral:
<ul>
<li>
parallelogram
<ul>
<li>rectangle</li>
<li>square</li>
</ul>
</li>
<li>trapezoid</li>
</ul>
</dd>
<dt>Pentagon:</dt>
<dd>A five sided shape.</dd>
</dl>
Create an external CSS file and attach it to your HTML document using a <link/> element. Inside
this CSS file, write CSS rules to do the following:
a. Colour the <h2> element grey.
b. Set the background colour of the document to black and the font colour for the document to
white.
c. Set the font-size of the <dt> element to 1.5em.
d. Set the font-family of the <dl> and <li> elements to Arial, if Arial is not installed on the user’s
machine, the available sans-serif font should be used.
e. Set the left margin of the <dd> elements to 0px.
f. Set the colour of all the <li> elements to red.
Page 22 of 63
Title Here
g. Set the colour of the <li> elements that contain the content ‘rectangle’ and ‘square’ to green.
Complete each rule in turn checking they work before moving on. You should not need to add any
additional code to the HTML page; everything should be achieved using CSS alone.
Exercise 2
Look at the following style sheet. It works okay, but could be a lot more efficient. Re-write the CSS to
make it more efficient. Think how you can combine rules to reduce the amount of code.
body{
background-color:blue;
}
p{
font-family:Arial, Helvetica, sans-serif;
color:white;
}
h1{
font-family:"Times New Roman", Times, serif;
color:white;
}
h2{
font-family:"Times New Roman", Times, serif;
color:white;
}
p{
text-align:center;
}
em{
font-style:italic;
color:white;
font-family:Arial, Helvetica, sans-serif;
}
Exercise 3
As part of the practical exercises for the last topic, you created a CV (resume) for yourself.
Create an external CSS file that will specify a design for your HTML CV.
a. Experiment with properties demonstrated during the lecture session.

b. Experiment with specifying different typefaces and colours. Try to use RGB colour values
instead of relying on colour names.
Have a look through your CV. Can you identify where you could use <div> or <span> elements?
Here is one possibility. Your CV should be structured into different sections: Personal Information,
Qualifications etc. You could structure each of these sections as a <div> element. Try giving each
<div> a different id attribute and then target these elements using the attribute selector in your CSS.
Page 23 of 63
Title Here
This is just an example; the use of the <div> and <span> elements should be dictated by the content
of your CV. Try to show use of both <div> and <span> and the id and class attributes and selectors.
Finally, validate your HTML and CSS documents.
Page 24 of 63
Title Here
confident about the content. In the coming topics, we will explore many different features of CSS
and learn about many new properties. Being familiar with the basic concepts of CSS will make
learning the new features much easier.
Exercise 3: Learn Some New CSS Properties
It is not feasible to cover every single CSS property during the lecture time. Some text related CSS
properties we have not explored so far include font-weight and font-style. There are also CSS
properties specifically for lists such list-style-type. You should do some additional research to learn
about these and other text related CSS properties. Like last week, you should find there are many
useful resources on the web such as http://www.w3schools.com/ and you can also use the reading
list for the module. Use some of these new properties in your CV web page.
Exercise 4: Experimenting with Developer Tools
Using the developer tools in Chrome or the Firebug add-on in Firefox, practice inspecting elements
and viewing the CSS of web pages.
Try using both HTML pages you have created in the practical sessions and pages from your
favourite websites. The tools are fairly easy to use, but do take some getting used to. It is worth
putting the effort into becoming familiar with these tools as it will make creating and debugging CSS
much easier, especially when your pages become more complex.
Make sure you know how to view the CSS applied to an element in a page and how to dynamically
add and remove CSS properties from the elements that you are viewing.
Page 25 of 63
Title Here
Page 26 of 63
Topic 4
Topic 4: Hyperlinks

This topic provides an overview of hyperlinks and navigation in web pages. On completion of the
topic, you will be able to:
• Link different web pages together using the anchor element;

• Link to specific parts of a web page using the anchor element;
• Use CSS to style hyperlinks;
• Explain how disabled users navigate websites;
• Discuss strategies for making hyperlinks accessible to both disabled and mobile devices users.
4.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 27 of 63
Exercise 1
Look at Slides 9-13 from the lecture and answer the following questions:
1. A hyperlink in the page annual_reports.html links to the page financial.html. What will be the
value of the href attribute for this hyperlink?
2. A hyperlink in the page index.html links to the page benefits.html? What will be the value of
the href attribute for this hyperlink?
3. A hyperlink in the page our_values.html links to the page index.html. What will be the value
of the href attribute for this hyperlink?
4. A hyperlink in the page culture.html links to the page media.html. What will be the value of
the href attribute for this hyperlink?
5. A hyperlink in the page annual_reports.html links to the page press.html. What will be the
value of the href attribute for this hyperlink?
Exercise 2
As part of the previous topic’s practical work, you were required to construct an HTML CV (resume).
a. For this exercise, you are required to add a number of external hyperlinks to the CV. For
example, you should have a section for your hobbies and interests. Add some hyperlinks to
this section that will link to sites that provide further information. Check the hyperlinks work,
validate the document using the W3C validator and fix any errors that it identifies.
b. Your CV should have a number of different sections: Qualifications, Employment History etc.
Create a simple menu at the top of the document and use in-page hyperlinks to link directly
to each section. Again, check the links work and validate the document.
c. Add some additional CSS rules to your HTML document’s style sheet. These new rules
should target the hyperlinks in the document. Experiment with using the pseudo-class
selectors to create rollover effects for your hyperlinks.
Exercise 3
As part of previous two topics’ private study time, you were asked to find useful resources for
learning HTML and CSS. Create a new HTML document that will act as a reference for the
resources you have found.
a. Each resource, book or website, should be listed on the page along with a brief
description/review of the resource and if it is a website, a hyperlink to the actual site.
Page 28 of 63
b. Add an appropriate heading to the web page, create an external CSS file for the page, test
the hyperlinks all work, and validate the document.
Page 29 of 63
confident about the content.
Exercise 3: Accessible Websites
Choose a number of different websites and explore them to see if they provide navigation
specifically for disabled and mobile users, e.g. skip links, access keys. You could use the websites
you analysed in Topic 1 as a starting point. Remember that the creators of websites often use CSS
to hide skip links; try using Firefox or Opera and switching off the CSS to reveal the skip link option.
Exercise 4: Portfolio Website
By now, you should have a number of different HTML documents that you have created. In the
coming topics, you will create many more HTML documents. You will find it useful to have these
web pages easily accessible so that you can refer back them when you do the assignment or when
you need to remember how to use certain HTML features.
For this exercise, you are required to start building a simple website that will act as a portfolio of the
HTML work you have done as part of this module. Eventually, you will add many more pages to this
site.
a. Create the following directory structure.
portfolio
html css images
b. Place all of your completed, validated HTML documents in the html directory.
c. Place you CSS files in the CSS directory.
d. Create a new HTML document, name it index.html, and save it to the root of the portfolio
directory. Inside this file, add an <h1> element, a paragraph that describes the purpose of
Page 30 of 63
the site, and a list of hyperlinks. Each hyperlink should use a relative URL and link to an
HTML document you have created. Create a CSS file for this page and save it in the CSS
directory.
e. Test the links work and validate index.html.
Page 31 of 63
Page 32 of 63
Topic 5
Topic 5: Integrating Media

This topic provides an overview of integrating images, video and audio into web pages. On
completion of the topic, you will be able to:
• Select appropriate file formats for using images in web pages;

• Insert images into HTML documents;
• Define CSS rules that use images in the design of web pages;
• Discuss different audio and video file formats used on the web;
• Describe different approaches for integrating video and audio into web pages;
• Explain strategies for addressing accessibility issues associated with using images, video and
audio in web pages.
5.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 33 of 63
Exercise 1
a. Create a web page with information about an animal of your choice. The page should feature
the following:
• A heading element
• Some brief information about the animal
• At least one image of the animal
b. Use Wikimedia Commons http://commons.wikimedia.org/wiki/Main_Page to find images that are

free to use in your web page. Make sure you attribute (reference) the source of the images.
c. Check the page in a web browser.
d. Validate the page and fix any errors.
Exercise 2
a. Apply an external style sheet to the web page you created in Exercise 1.
b. Define some basic rules for colours, fonts etc.
c. Define CSS rules for the images in the document. In particular, experiment with the float
property.
Exercise 3
Think how you can use audio or video in the web page. Again, use Wikimedia Commons to find
appropriate clips you can use. The lecture slides demonstrated a number of different approaches for
integrating video and audio into web pages:
• A hyperlink
• The <object> element
• The <video> and <audio> elements
Use each of these different approaches and test the results in a number of different browsers. You
may need to convert between different video/audio file formats, e.g. convert Ogg video to the MP4
format. Your tutor will advise you on an appropriate tool you can use to do this.
Page 34 of 63
Exercise 4
Being familiar with an image-editing application is a useful skill for a web developer. Your tutor will
direct you to a specific image editing application you should use for this exercise.
a. Try performing some basic operations, such as resizing and cropping. Use some of the
images you have used in the previous exercises.
b. Next, try creating your own image that could be used as a repeating background image for
your web page. Modify the CSS file so that it uses your newly created image. Experiment
with the background CSS properties.
Page 35 of 63
Exercise 3: Images in CSS
Do some research on the web to see how different websites use images in their CSS. Use
developer tools in either Chrome or Firefox to inspect web pages to see what techniques have been
used. In particular, look for the use of background images and images in navigation bars.
In the Topic 4 laboratory session (Exercise 3), you created a web page that acts as a list of useful
resources for learning HTML and CSS. Add further links to this page to record your findings for this
exercise.
Exercise 4: Update Your Portfolio Website
a. Update your CV web page to feature a photo of yourself. You could also integrate images into
the CSS for the page.
b. Add the web pages you have created for the integrating media topic to your portfolio website.
c. Place the files in the appropriate directories, e.g. put the web pages in the HTML directory,
images in the images directory etc. (you may need to change the href and src attributes so the
CSS/images still work). Add links to the new examples from the home page (index.html) of the
portfolio.
Page 36 of 63
Topic 6
Topic 6: HTML Tables

This topic provides an overview of using HTML tables. On completion of the topic, you will be able
to:
• Create HTML pages that structure tabular data;

• Describe techniques for making HTML tables accessible to users with visual disabilities;
• Style HTML tables using Cascading Style Sheet properties;
• Explain the disadvantages of using HTML tables for page layout.
6.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 37 of 63
Exercise 1
Look at the following image of an HTML table.
a. Create a simple HTML document and use the basic table tags <table>, <tr>, <td>, <th> and
<caption> to construct this table. Test the page in a browser, validate the page and fix any
errors.
b. Apply some simple CSS to this table.
Exercise 2
Look at the following image of an HTML table. This table features column and row spanning.
a. Build this table using HTML. Again, test the page in a browser, validate the page and fix any
errors.
b. The table has been styled so that alternate rows have different background colours. Apply CSS
to your table to achieve a similar effect.
Exercise 3
In previous topics, you have been working on a web-based CV. Think how you can use HTML tables
in your CV, for example a list of qualifications could be structured as a table. Make sure you choose
appropriate content. Add the table elements, validate the page and apply some CSS to the tables.
Page 38 of 63
Exercise 3: Use of Tables
Use the web to research how different websites use HTML tables. Use the developer tools in either
Chrome or Firefox to inspect web pages to see if tables are being used.
Look for improper use of tables (i.e. for page layout) and also look for good examples where the
tables are being used appropriately and there is effective use of CSS.
As in previous topics, you should record your findings on your ‘useful resources’ web page.
Update your portfolio website to include the web pages you have created for the tables topic.
Remember to validate all your pages and include links to them from the homepage.
Page 39 of 63
Page 40 of 63
Topic 7
Topic 7: HTML Forms

This topic provides an overview of constructing HTML forms and using HTML form controls.
• Describe the basic structure of HTML forms;

• Select appropriate form controls for different circumstances;
• Build accessible HTML forms using a variety of form controls;
• Control the layout of HTML forms using CSS.
7.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 41 of 63
Exercise 1
A social networking website for film fans requires a registration page that will allow users to sign up
for the site. The details they need to gather are listed below.
Username:
Email address:
Password:
Re-enter password:
Gender:
Date of birth:
About me (enter a brief description of yourself):
How many films do you watch a week?
Select your favourite film genres:

Action and adventure
Animation
Comedy
Crime
Family
Horror
Musical
Period and historical
Romance
Science fiction and fantasy
Thriller
On a scale of 1 to 10, how would you rate your film knowledge?
Sign Up
a. Copy this content into an empty XHTML Strict 1.0 HTML document.
b. Add opening and closing <form> tags.
c. Add an appropriate form control for each of the different questions.
d. Test the page in a browser, validate the page and fix any errors.
At this stage do not worry about the appearance of the form. Focus on choosing appropriate form
controls and creating a valid HTML document.
Page 42 of 63
Exercise 2
Try and set out the contents of the form so that each label-control pairing is on a separate line.
a. Working on a copy of the document you created for Exercise 1, try using an HTML table to set
out the form. The table should have two columns, one for the labels and one for the form
controls. Each control should align with its label. Test the page in a browser, validate the page
and fix any errors.
b. Next, try using CSS to control the layout of the form. Use the CSS that was on Slide 22 (also
below) as a starting point. You may find that it is quite difficult to get a satisfying layout, but try
your best to create a usable form.
input[type='text']{
float:left;
width:150px;
}
label{
clear:both;
float:left;
text-align:right;
width:150px;
}
Exercise 3
Using one of the pages you created for Exercise 2 (whichever you are most happy with), apply some
further CSS to style the form elements. Make sure you experiment with the :focus pseudo class.
Exercise 4
So far, the pages you have created have all been XHTML Strict 1.0 pages. Save a copy of your form
document. Change the doctype of this page to make it into an HTML 5 document. Experiment with
using some of the new HTML 5 form elements and attributes.
Page 43 of 63
Exercise 3: Use of Tables
Use the web to research how different websites control the layout of HTML forms. Use the
developer tools in either Chrome or Firefox to inspect web pages to see how tables and CSS are
being used. Make a note of sites that do a good job in structuring and designing their forms.
Exercise 4: Update your Portfolio Website
Update your portfolio website to include the web pages you have created for the forms topic.
Page 44 of 63
Topic 8
Topic 8: Page Layout with CSS

This topic provides an overview of using CSS to control the layout and design of web pages. On
• Explain the challenges involved in controlling a web page layout;

• Use the float and position CSS properties to control the layout of a web page;
• Describe approaches for specifying page layout for small screen devices.
8.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 45 of 63
Exercise 1
a. Create a new HTML document. Copy the following HTML into the body of the document:
<h1>Page Header</h1>
<h2>Left Column</h2>
<h2>Middle Column</h2>
<h2>Right Column</h2>
<h2>Page Footer</h2>
This HTML is similar to that used for the examples in the lecture session.
b. Mark-up the page using <div> elements with id attributes. For example, the <h1> element could
be nested inside a <div> with an id attribute of ‘header’. Validate the page and fix any errors.
c. Using the CSS float and clear properties, attempt to create a three columned layout that centres
in the browser window.
d. Create the same layout using the CSS position properties.
Exercise 2
In previous topics, you have been working on a portfolio of HTML pages. Choose a page that would
be suitable for experimenting with CSS navigation bars. Here are some suggestions:
• You should have a homepage with links to the other pages. You could make the links into a
navigation bar.
• Alternatively, your CV example should be quite developed. You could style the in-page
hyperlinks as a navigation bar.
Experiment with creating both horizontal and vertical navigation bars. Test the pages in a number of
different web browsers.
Page 46 of 63
Exercise 3: Page Layout with CSS
Do some research on the web to see how different websites control the layout of pages; a good
starting point might be CSS Zen Garden http://www.csszengarden.com/.
Use the developer tools in either Chrome or Firefox to inspect web pages to see how CSS is being
used. Make a note of sites that do a good job in controlling the layout of pages.
Update your portfolio website to include the web pages you have created for the page layout topic.
Page 47 of 63
Page 48 of 63
Topic 9
Topic 9: Introduction to Web Design

This topic provides an overview of different eCommerce models and introduces the practical steps
necessary to design and build a user-centred website.
• Describe the main types of eCommerce and the major eCommerce revenue models;
• Explain the stages involved in designing a website;
• Apply user-centred design techniques to define requirements for a web design project.
9.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 49 of 63
Case Study
Your local regional tourist board has decided to create a website that will provide information about
your part of the world. They see the main users as being visitors to the area, both business visitors
and tourists, but they also want to provide information for local people on things to see and do.
The goals for the website are:
• Increase the number of visitors to the region

• Enhance the experience for visitors to the region
• Improve the revenue generated for the local economy
Some basic research has been conducted into users and the results are shown below:
Gender Male Female

61% 39%
Age 18-24 25-34 35-44 45-54 55-64
27% 18% 34% 16% 5%
Browser Internet Firefox Chrome Safari Opera
Explorer
31% 20% 17% 28% 4%
Device Desktop Mobile
64% 36%
Screen Resolution Less 800x600 1024x768 Higher
than
800x600 0% 22% 42%
36%
Exercise 1
Using this information as a basis, create a number of personas (two or three) for different users of
the website. Add to the basic details obtained from the above table to personalise the user; give
them a name, an occupation, a nationality etc.
Exercise 2
For each persona you have created, write a scenario that details their goal (reason for visiting the
site) and the stages involved in achieving this goal. Try to make your scenarios as realistic as
possible; think carefully about the type of situations where users would visit the site.
Page 50 of 63
Exercise 3
Generate a list of content and functionality requirements for the website.
• Use the scenarios you have created as a starting point.

• There may already be a similar site in existence; what ideas can you take from this site?
• Research the web to find sites with similar goals. What type of content do these sites feature?
Try to be as original as possible in generating a list of user-centred content and functionality

requirements.
Page 51 of 63
Exercise 2: Research Different eCommerce Revenue Models
a. Research the web to find examples of sites that use each of the different eCommerce revenue
models. Remember that many sites generate income in several different ways.
b. Make a note of the different sites and the models they use.
c. Create a web page that lists the different websites and the revenue models they use. This page
should feature links to each site.
Update your portfolio website to include the web page you have created for this topic. Remember to
validate all your pages and include links to them from the homepage.
Page 52 of 63
Topic 10
Topic 10: Navigation and Interface Design

This topic provides an overview of designing site structure and navigation in a website. On
• Explain the importance of site structure and navigation in the context of user-centred web
design;
• Use a site structure diagram and wireframe models to specify the design of a website;
• Explain the major principles of interface design for websites.
10.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 53 of 63
Exercise 1
a. As part of the previous topic, you generated a list of content and functionality requirements for
the tourist board website. Do a card sort using this list of content:
• Write each content chunk on a separate index card or post-it note and arrange the
chunks into groups and subgroups.
• Invent appropriate labels for each group.
b. Record the card sort. You can do this by taking a photo of the completed sort or by creating a
site structure diagram based on the completed card sort.
c. Think of some questions you can use to test your information structure. For example: Which
section would you click on to find information about restaurants and places to eat? Test your
proposed information structure with people from different groups. Show them the first level of
the site structure hierarchy and see if they select the correct section. Try to think of questions
that will test some of the hardest to categorise pieces of information.
Exercise 2
Using your site structure diagram as a basis, create a series of wireframe models for a number of
pages in your site. Try to add as much detail as possible to the wireframe models.
Exercise 3
a. A good way of testing if your wireframe models are effective is to pass them onto a different
person and see if they can develop a web page using them. Swap your wireframe models with
another group member.
b. Create a web page design using the wireframe model as guide. You can use an image editing
application or you may feel more comfortable working directly with HTML and CSS.
c. Try to use the design principles described in the lecture to create an effective user-centred page
design that makes it easy for users to scan the page.
Page 54 of 63
10.4 Private Study
If you did not manage to complete your page design during the practical session, you should attempt
Exercise 3: Research Page Design
Research the web to find examples of sites that feature effective user-centred page designs. For
each site, make notes on how they use the principles described in the lecture: contrast, alignment,
grouping related items etc.
Create a web page that lists the different websites you have researched and summarises your
analysis of the sites. This page should feature links to each site.
Page 55 of 63
Page 56 of 63
Topic 11
Topic 11: Evaluation and Testing

This topic provides an overview of approaches to evaluating and testing websites and website
designs. On completion of the topic, you will be able to:
• Describe the range of testing that takes place in web design projects;
• Explain different approaches to testing (X)HTML and CSS;
• Evaluate web designs using design principles;
• Design and conduct a usability test.
11.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 57 of 63
The purpose of this session is to develop a practical understanding of testing websites.
Your tutor will arrange you into small groups and give you a number of different websites to test. At
the end of each exercise, there will be a feedback session where you can share your findings with
the larger group.
Exercise 1: Testing Mobile Readiness
Use the following online tools to test pages from the websites:
• mobiReady (http://ready.mobi)
• W3C mobileOK Checker (http://validator.w3.org/mobile/)
Which websites receive the best and worst scores for mobile readiness? Identify specific
improvements you can make to the worst site to make it better suited to mobile delivery.
Exercise 2: Testing Accessibility
Use the following to test pages from the websites:
• WAVE (Web Accessibility Evaluation Tool) (http://wave.webaim.org/)

• Web Accessibility Initiative maintains a list of evaluation tools (http://www.w3.org/WAI/eval/).
Explore this site and select an online evaluation tool.
Which websites receive the best and worst scores in terms of accessibility? Identify specific
improvements you can make to the worst site to improve its accessibility.
Exercise 3: Usability Testing
Conduct a usability test using one of the sites.
a. Draw up a test plan identifying typical tasks users would want to accomplish at the site.
b. Invite someone from a separate group to be the subject of the test. Ideally, they should have
little prior experience of the using site.
c. Ask them to attempt a task. Use the techniques discussed in the lecture session, for example
involving the user in the task and encouraging them to think aloud.
d. At the end of the test, make notes on any usability problems you have identified.
e. Repeat the test with a different subject.
f. After testing a number of different people, make specific recommendations to improve the
design of the site.
Page 58 of 63
Exercise 2: Practice Krug’s Trunk Test
a. Select a number of different websites (5-10) and evaluate them using Krug’s trunk test.
b. For each site, make notes on how clearly the page design answers the test questions.
c. Make specific recommendations for how the design of the page could be improved.
d. Create a web page that lists the different websites you have evaluated and summarises your
findings and recommendations. This page should feature links to each site.
Page 59 of 63
Page 60 of 63
Topic 12
Topic 12: Summary

This topic provides an overview of the module content and briefly discusses a number of topics
related to the material we have covered in the module.
• Explain the main parts of the module, HTML, CSS and web design;
• Explain the advantages and disadvantages of various web hosting options;
• Show a basic understanding of client-side technologies related to HTML and CSS;
• Describe possible future developments in the area of web design.
12.2 Timings
Lectures: 2 hours
Tutorial: 1.5 hours
Page 61 of 63
Exercise 1: Experiment with CSS3
Choose a page from the web based portfolio you have been working on throughout the module.
Experiment with using CSS3 properties on this page. There are many websites that provide
information about CSS; use these sites to assist you. For example, W3schools
(http://tinyurl.com/652dycq) or CSS3.info (http://www.css3.info) provide a useful references of
CSS3 properties and advice on how to use them.
Make sure you experiment with all the following:
• Colours
• Border properties
• Text properties
• 2d transforms
• Transitions
Exercise 2: Upload Your Portfolio to a Web Server
Your tutor will advise you on the specific FTP software to use. Once you have uploaded the site
thoroughly, test that it works. Bear in mind that if the web server is Unix based, it will be case-
sensitive with respect to filenames. However, if you have followed the file naming conventions from
Topic 4, you should not have any problems.
Before uploading the portfolio and making it available on the World Wide Web (WWW), you may
want to remove some of the personal information from your HTML CV.
Page 62 of 63
12.4 Private Study
Exercise 1: Revision
Topic 12 should have alerted you to specific topics that you might need to review again in order to
re-enforce your understanding. Review the lecture slides from all the topics and do any additional
reading necessary so that you understand and feel confident about the content. Prepare and list
specific points you would like the tutor to explain again and bring this to the final tutorial session for
the module.
Page 63 of 63

DDW Student Guide v1.0

Uploaded by

Copyright:

Available Formats

DDW Student Guide v1.0

Uploaded by

Document Information

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

DDW Student Guide v1.0

Uploaded by

Copyright:

Available Formats

LEVEL 4

DESIGNING AND DEVELOPING A WEBSITE

DDW Student Guide v1.0

Version Date Revision Description

© NCC Education Limited, 2011

1. Module Overview and Objectives

2. Learning Outcomes and Assessment Criteria

2 Introduction to 1/12 • Basic principles of markup: elements, tags and

5 Integrating Media 1/12 • Image file types

6 HTML Tables 1/12 • Basic structure of HTML tables

10 Navigation and 1/12 • Site structure

11 Evaluation and 1/12 • Validating documents

4. Related National Occupational Standards

Related National Occupational Standards (NOS)

5. Teaching and Learning

5.3 Laboratory Sessions

5.4 Private Study

5.5 Software Requirements

You will also need access to the following:

6. Further Reading List

Lawson, B and Sharp, R. (2010). Introducing HTML5. Pearson

1.1 Learning Objectives

On completion of the topic, you will be able to:

• Define the Internet and World Wide Web;

Laboratory Sessions: 4 hours

Tutorial: 1.5 hours

Private Study: 5 hours

Exercise 1: Designing for Different Browsers

Exercise 2: Designing for Different Screen Resolutions

2. Now view the same site at a higher resolution.

• What happens to the page layout?

Exercise 3: Designing for Mobile Devices

Exercise 1: Review the Lecture Slides

Exercise 2: Become Familiar with a New Browser

Exercise 3: Research into Browser Usage

Browser usage was discussed during the lecture (Slide 18).

Exercise 4: Research into Mobile vs. Desktop Web

At the time of writing, the mobile web is gaining rapidly in popularity.

Exercise 5: Research into Legal Requirements for Accessibility

Many countries have legal requirements for accessibility standards of websites.

Topic 2: Introduction to (X)HTML

2.1 Learning Objectives

Laboratory Sessions: 4 hours

Tutorial: 1.5 hours

Private Study: 5 hours

2. <td axis="contact" colspan="2">Email</td>

3. <area shape="circle" coords="0,0,100" href="home.html" alt="home" />

• Personal information such as name and contact details

• Hobbies and interests

List of Geometric Shapes

Exercise 1: Review the Lecture Slides

Exercise 2: Complete the Practical Exercises

Exercise 3: Learn Some New Elements

Topic 3: Introduction to Cascading Style Sheets (CSS)

3.1 Learning Objectives

On completion of the topic, you will be able to:

• Discuss the role of CSS in developing web pages;

Laboratory Sessions: 4 hours

Tutorial: 1.5 hours

Private Study: 5 hours