Study Guide - Web Page Design 102

DIPLOMA IN INFORMATION TECHNOLOGY
(YEAR 1)
SAQA ID CREDITS
24419 10
WEB PAGE DESIGN 102

(SEMESTER 2)
Study Guide
In terms of the Copyright Act, no 98 of 1978, no part of this manual may be reproduced or transmitted in any
form or by any means, electronic or mechanical, including photocopying, recording or by any other
information storage and retrieval system without permission in writing from the proprietor.
Web Page Design 102
CONTENTS:
CONTENTS:...............................................................................................................................................................2
INTRODUCTION TO THIS MODULE .........................................................................................................................6
INTRODUCTION ........................................................................................................................................................6
CONTENTS AND STRUCTURE .......................................................................................................................................7
SECTION 1: Web Fundamentals.........................................................................................................................7
SECTION 2: Web Development Fundamentals ..................................................................................................7
SECTION 3: Introduction to Microsoft Expression Web v4 ..............................................................................7
SECTION 4: Hyper Text Markup Language v5 ..................................................................................................8
SECTION 5: Cascading Style Sheets ..................................................................................................................8
SECTION 6: JavaScript .......................................................................................................................................8
SECTION ONE:WEB FUNDAMENTALS: INTRODUCTION .......................................................................................12

1.1 LEARNING OUTCOMES ................................................................................................................................14
1.2 READING ......................................................................................................................................................15
1.3.WHY BUILD A WEBSITE ................................................................................................................................16
1.4 ELEMENTS OF A SUCCESSFUL WEBSITE.......................................................................................................20
1.5. MEASURABLE SUCCESS...............................................................................................................................24
1.6 THE RIGHT PROPORTION OF CONTENT , FUNCTIONS AND DESIGN ..........................................................25
SECTION TWO: WEB DEVELOPMENT FUNDAMENTALS .......................................................................................28

2.2 READING ......................................................................................................................................................31
2.3 INTRODUCTION ...........................................................................................................................................32
2.4 THE FOUR STAGES OF WEB DEVELOPMENT ...............................................................................................33
2.4 THE WEB DESIGNING TEAM
2.6 BUILDING A WEB DEVELOPMENT BUSINESS
2.7. CODING TO DESIGN A BASIC WEB PAGE ....................................................................................................38
SECTION THREE: INTRODUCTION TO MICROSFT EXPRESSION V4.......................................................................40

3.2 READING ......................................................................................................................................................43
3.3 INTRODUCTION ...........................................................................................................................................44
3.4 UNDERSTANDING THE INTERFACE OF MICROSOFT EXPRESSION ...............................................................47
3.5 THE DIFFERENT DOCUMENT VIEWS AND METHODS OF DESIGNING .........................................................50
3.6 CREATING AND DESIGNING WEB PAGES AND WEB SITES IN MICROSOFT EXPRESSION ............................51
2
Berea College of Technology
Web Page Design 102
SECTION FOUR: HYPERTEXT MARKUP LANGUAGE ..............................................................................................60

4.2 READING ......................................................................................................................................................63
4.3 INTRODUCTION ................................................................................................................................................64
4.4 THE DIFFERENT TAGS IN DECLARING HTML ELEMENTS ......................................................................................................
4.5CONCLUSION ....................................................................................................................................................73
SECTION FIVE: CASCADING STYLE SHEETS ............................................................................................................75

5.2 READING ......................................................................................................................................................78
5.3 INTRODUCTION ...........................................................................................................................................79
5.4 RELATIONSHIP BETWEEN HTML AND CSS ...................................................................................................81
5.5 GENERAL SYNTAX OF CSS ............................................................................................................................84
5.6 CODING OF CSS ...........................................................................................................................................85
SECTION SIX: JAVASCRIPT .....................................................................................................................................75

6.2 READING ......................................................................................................................................................78
6.3 INTRODUCTION ...........................................................................................................................................79
6.4 THE ROLE OF JAVASCRIPT ............................................................................................................................81
6.5 JAVASCRIPT CODE DEVELOPMENT ..............................................................................................................84
6.6 INTEGRATING JAVASCRIPT INTO YOUR WEBSITE ........................................................................................85
Prescribed Text Book: There is no specific prescribed Textbook to be used in conjunction with this Manual but
1 of the following Textbooks can be used to complement this manual or a Textbook of your choice :
Ø HTML and CSS: Design and Build Websites, by Jon Duckett
Ø JavaScript and JQuery: Interactive Front-End Web Development, by Jon Duckett
Ø Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics, by Jennifer
Niederst Robbins
Ø Communicating Design: Developing Web Site Documentation for Design and Planning, by Dan M.
Brown
Ø Universal Principles of Design, Revised and Updated, by William Lidwell, Kritina Holden & Jill
Butler
Web Page Design 102
INTRODUCTION TO THIS MODULE
The broad aims of this module are to:

The aim of this module is to provide you with a solid grounding in web development
principles and practice, and to introduce you to common coding languages and tools used in
web development.
Web development principles describe the business of web development and the range of
general issues within the industry.
Web development practice describes the general approach and specific steps needed
to create a successful website.
A website is always a blend of programming languages. A common website may have
HTML, CSS, JavaScript, PHP and other elements, each employed for a specific reason in
order to provide the overall functionality required. Web development is a challenging
industry because of:
• Rapid technological change

o Techniques, programming code, browsers and even the devices on which
websites load change all the time.
• Increasing complexity of websites

o Ecommerce, custom data views, website personalisation, social media
interactivity etc all contribute to this growing complexity.
• Sweeping changes to the business models of those engaged in web

development
o For example, web developers used to do all the website maintenance. Now,
clients can do this for themselves, removing an entire revenue stream for web
developers.
This course is an introduction. It is therefore impossible to fully describe all aspects of

building a successful website.
Instead, the course focuses on one area of specialisation (web development) in the context of the
overall set of roles, skills and career paths within the web development industry.
Web Page Design 102
Contents and Structure
Section 1: Web Fundamentals
In this Chapter we expose students to a broad overview of the principles and

processes of creating a website, and then to provide a practical introduction to
the role of a web developer within this process and it demonstrates an
understanding of the key factors that result in a successful website.
Section 2: Web Development Fundamentals
In this Chapter we demonstrate an understanding of how the web works (from

a website development point of view), we identify the four stages of creating a
successful website as well as identify the necessary role players and skill sets
required for the development of a website.
Section 3: Introduction to Expression Web v4
In this Chapter Microsoft Expression in introduced as the Software that is used

to design and create webpages and we demonstrate an understanding of the
way in which the various web programming languages are integrated in the
development of a website.
The interface is explained in detail and it Identifies appropriate HTML tags and
their properties to be used in webpages.
7
Web Page Design 102
Section 4: Hyper Text Markup Language v5

In this Chapter we cover Hyper Text Markup Language (HTML) is a markup language for
creating a webpage. Webpages are usually viewed in a web browser. They can include
writing, links, pictures, and even sound and video. HTML is used to mark and describe each of
these kinds of content so the web browser can display them correctly. It also shows examples
of how HTML is used to create electronic documents (called pages) that are displayed on the
World Wide Web.
Section 5: Cascading Style Sheets

In this Chapter we Identify appropriate CSS tags and their properties to be used in webpages.
It explains is details that CSS stands for Cascading Style Sheets. CSS describes how HTML
elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It
can control the layout of multiple web pages all at once. It also explains that CSS is the
language for describing the presentation of Web pages, including colors, layout, and fonts.
Section 6: JavaScript
JavaScript is most commonly used as a client side scripting language. This means that JavaScript
code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the
script is sent to the browser and it's up to the browser to do something with it. Javascript (JS) is a
scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly
found embedded in HTML code. JavaScript is an interpreted language. It also covers that
JavaScript, an object scripting language which is used in web pages along with markup language
HTML. JavaScript is very popular and adopted universally by every web browser for its support
which allows dynamic content to get execute in a webpage.
The following are important Course Book Notations.
Refer to the prescribed text book Attempt the following questions and
chapters and pages specified. research further if you could not
answer the questions.
Learning Outcomes Read/Research and write additional

notes. Make sure you use the
prescribed textbook and useful Internet
websites to write additional notes.
Important Concepts Test Your Knowledge
Solution to Test Your Knowledge

Questions
Case Study
10
Web Page Design 102
READING
This manual has been designed to be read in conjunction with the following textbooks:
Ø HTML and CSS: Design and Build Websites, by Jon Duckett
Ø JavaScript and JQuery: Interactive Front-End Web Development, by Jon Duckett
Ø Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics,
by Jennifer Niederst Robbins
Recommended Reading:
Blog on Internet marketing: http://www.gottaquirk.com/

Copywriting advice: http://www.sitepoint.com/writing-web/
Recommended Digital Engagement and Activities :
There are many websites that discuss good website design and case studies
of successful websites. Examples include:
http://www.thebestdesigns.com/
http://coolhomepages.com/Web-Design/blog-cat8.html
Web Page Design 102
SECTION ONE: WEB FUNDAMENTALS

INTRODUCTION
Contents
SECTION ONE: SOCIAL ASPECTS OF IT:

1.1 LEARNING OUTCOMES
1.2 READING
1.3 INTRODUCTION
1.4 Why build a Website
1.5 Elements of a Successful website
1.6 Measurable Success.
1.7 The Right Proportion of Content, Functions and Design
1.8 CONCLUSION
12
Web Page Design 102
• Explore reasons to build a website;
• Identify the elements that make a successful website.
• As you read through the material, think of websites that you use often, work
out what the motivation behind these websites and evaluate them using the
checklist provided.
1. Introduction
Websites are no longer simple. Creating a successful website requires focus,
application of effort, technological resources and money.
Given the scarcity of these resources, it is appropriate to consider the motivation
behind having a website. The key questions are:
• Why have a website?

• How are we going to determine whether it was worth building?
• How are we going to maintain and support the site so that it adds value to
the organisation?
Why Build A Website?
This is not an easy question to answer. The motivations for having a website vary
widely. Here are some of them:
• Direct selling (e.g. an online store)

• Indirect selling (e.g. generate leads for telephonic follow-up)
• Branding (e.g. logo, colour scheme, key brand message)
• Customer interactions (e.g. technical support, after-sales service)
• Campaigning (e.g. an organisation wanting to change government policy)
• Community (e.g. a site for working moms)
Elements of a Successful Website
A clear sense of purpose, communicated effectively to specific audiences
If you consider each of the above purposes, you can see that each purpose is
matched to a specific audience, and each audience has its own motivation for visiting
a website.
To be really successful, a website needs to communicate to a specific
audience, meet their needs as well as the organisation’s.
Content and functions to meet audience and organisation needs
Content includes text, images and videos. The content needs to be

specifically developed for the web.
Functions include shopping carts, galleries, forms, directories etc that the user can
interact with to obtain information or interact with the website owners.
Measurable success
Each website, and possibly even each page within the website should now have a
clear purpose, audience, content and feature set. What remains is to ensure that the
success of the website/ webpage can be defined and measured.
HITS – How Idiots Track Success (Paine, 2009)
Website owners and marketers used to use “hits” as a measure of success.

However, this just tracks visits and fails to measure the results of those visits. If 4
million people visited the website, but none bought anything, that is hardly a
successful website!
KPI – Key Performance Indicators
These are numerical indicators of success. Here are some examples:
Table 1: Examples of KPI data
KPI January February March April

New visitors 12,567 13,543 17,234 17,988
Online enquiries 465 423 452 780
Blog comments 12 86 147 234
Here is an example of a carefully planned webpage:

Table 2: A carefully planned webpage
Audience Audience’s Organisation’s Content/ KPI

need need Feature
Prospective Work out what Position their A webpage on People who
customer to buy. products to how to saw advert
appeal to the understand the â
prospective product. % who came
customer. to page
Ask questions Obtain a sales Enquiry form to â
about the lead. obtain lead. % who filled
product. in form
â
Obtain Show off list of Testimonials list
reassurance customers and with faces, % who
about the the work done names, bought
â
company for those companies and
service levels customers. comments. Rand value of
and product purchases
quality.
In the above example, the KPIs form a conversion funnel. We want to know more
about the path of people through the website, right down to the Rand amount they
spent.
ROI – Return on Investment
If the website and marketing campaign cost R10 000 and resulted in R400 000
of sales, then the cost was justified.
The Right Proportion of Design, Content and Functions
All web development occurs within budgetary constraints. According to Hatcher (2010)
the limited budget needs to be allocated appropriately to the following areas:
• Design – the overall look and feel of the website
• Content – the text, images and videos on the site
• Functions – interactive elements of the site
Figure 1: The right proportion of design, content and functions
A tutorial website is measured by its content. The users do not care too much about
the website design, and the only feature that may be necessary is a comments
system below each tutorial so that users can comment back to the author.
A bed & breakfast website needs to really show off the establishment. It needs to
be really stylish, with beautiful pictures of the rooms, gardens, surrounding area etc.
The only feature it will need is an enquiry form for people who wish to book a night’s
accommodation.
An online shop needs to be smart (so that potential customers think it is legitimate
and trustworthy), it needs to have a great product range (the content) and the online
ordering system (function) must be really easy to use, and always work correctly.
The Fundamentals Done Right
The following items are essential no matter what kind of site:

• Simple, clear, effective navigation
• All functions work correctly
• All internal and external links work
• Webpages load quickly
• Content always up-to-date
• Feature-rich contact details (name, phone, email, enquiry form, interactive
map)
1. Recommended Additional Reading

4. Blog on Internet marketing: http://www.gottaquirk.com/
5. Copywriting advice: http://www.sitepoint.com/writing-web/
1. Recommended Digital Engagement and Activities

There are many websites that discuss good website design and case studies of
successful websites. Examples include:
• http://www.thebestdesigns.com/
• http://coolhomepages.com/Web-Design/blog-cat8.html
• Interactive Work Space
Find and read 3 blogs on good web design. Critically assess whether the
websites they review are good in terms of their balance between design, content
and functionality, or whether the review is biased towards only one of these
elements. Find one site that has following:
• A clear sense of purpose and audience
• An appropriate balance between design, content and functionality
• Gets all the fundamentals right
Discuss this site with another student in your class.
Revision Exercise 1
Purpose:
Your institution is considering revising their website. Imagine you are

someone thinking of taking a course at your institution. Review the site and
make recommendations regarding the revisions necessary to make this a
successful website.
Task:
1. Go to the website for your college

2. Find the page that advertises your course
3. Review the overall experience of finding the course page, as well as the
content on the page from the perspective of
4. Fill in the following website review form
Website
a) Institution name: .................................................................................................

b) Website: .............................................................................................................
c) URL of course page:
............................................................................................................................
Purpose
• Target audience: Potential student

• Their need: .........................................................................................................
............................................................................................................................
............................................................................................................................
• Institution’s need: ...............................................................................................
............................................................................................................................
............................................................................................................................
• Content needed: .................................................................................................
............................................................................................................................
............................................................................................................................
• Functions needed: ..............................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
Overall impression (each out of 10):
1. Professionalism: .................................................................................................
2. Balance of design, content, functions: ................................................................
3. Content suitable for audience: ............................................................................
4. Ease of navigation: .............................................................................................
5. All links and functions work: ...............................................................................
6. Webpage loads quickly: .....................................................................................
7. Content appears to be up-to-date: ......................................................................
8. Content suitable for potential student: ................................................................
9. Good contact page: ............................................................................................
10. Suggestions for improvement: ............................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
.
Web Page Design 102
SECTION TWO: WEB DEVELOPMENT FUNDAMENTALS
CONTENTS
SECTION TWO: WEB DEVELOPMENT FUNDAMENTALS

2.2 READING
2.3 INTRODUCTION
2.4 THE FOUR STAGES OF WEB DEVELOPMENT
2. 5 THE WEB DESIGNING TEAM
2.6 BUILDING A WEB DEVELOPMENT BUSINESS
2.7 CODING TO CREATE A BASIC WEB PAGE
28
Web Page Design 102
• Identify the four stages of developing a successful website.

• Identify the necessary role players and skill sets required for the development
of a website.
• Demonstrate an understanding of the role of the developer as part of a website
development team.
• Identify the four website development approaches.
• Demonstrate an understanding of the way in which the various web
programming languages are integrated in the development of a website
5. Introduction
Web development is a complex area of work. The purpose of this Learning Unit is to
give you a broad overview to the various processes and role players that are involved
in producing and supporting a successful website.
The Four Stages of Web Development
A successful website moves through four well-defined stages (Hatcher, 2010).
The output of each stage is a specific deliverable – a contract, a budget, a graphic

screenshot, a finished website etc.
If any stage is omitted or poorly executed, the website may fail, usually in a way
that is specific to the particular stage.
Stage 1: Strategy
This stage mainly takes the form of an extended conversation between the client and
the web strategist. In many cases, clients have limited understanding of why they
want a website, and even less understanding what a website can do.
The role of the web strategist is to assist the client to explore their needs in
the context of what can be achieved with a website.
In the first part of the conversation, there are four principal questions (Hatcher,
2010) that need exploration:
9. Who will visit your website (audience)?
10. Why will they visit your website (audience’s purpose)?
11. Why do you want them to visit the website (client’s purpose)?
1. How will you know if their needs and yours have been met (KPIs)?
The second part of the conversation covers design vs content vs features. Clients
need to understand the relative importance of these three in the context of their
specific audience’s expectations.
The third part covers resources. Who will write the content, take the photos,
approve the design, and manage the maintenance work after the site is launched.
The final part of the conversation covers budget vs deliverables. Simply put, does
the client have enough money to afford the website they have requested?
Most clients are unwilling to reveal their budget, but it is helpful to obtain a rough
indication to see that the proposed website is within reach of the client.
Output:
A project brief that formally defines the project
Failure:
Site has no real purpose, invalid assumptions are made regarding cost, effort, roles
and deliverables. The website development has little chance of success unless the
project is extremely simple, or the deadlines and budget are open ended.
Proceed to next stage?
If the overall set of requirements is clear, and the client indicates that the
cost estimate is acceptable, proceed to the next stage.
Stage 2: Scoping
In this stage, we match technical resources to project brief – we make sure that
we can actually build the site to match client requirements, deadline and budget.
The result of this research is a document covering the following:
• Brief
o The big picture – purpose and goals
• Scope
o What will, and will not be included in the
project. Limitations and assumptions
made. Technology to be used.
• Budget
o Defines the total cost and an itemised list of costs for all elements so
that the client can understand the total cost and the items that drive the
cost up.
• Project plan
Roles and responsibilities.
Deadlines for each aspect of the website development
Output:
Contract = Brief + Scope + Budget + Project plan
Failure:
The technology platform selected for the site is unable to deliver key functionality,
or the web developer lacks the necessary skills to complete the project.
Proceed to next stage?
If the client signs the contract and pays the deposit, proceed to the next stage.
Sitemaps
You may also include a sitemap
showing menu structure and
pages. This defines the number
of pages, as well as their
arrangement in the menu.
Read more about sitemaps here:
http://en.wikipedia.org/wiki/Sitemap
Figure 2: Sitemap (Freedom Imaging Systems, n.d.)
Wireframes
If the page layout is unusual or
important pages have a custom
layout, you can describe these
using a wireframe. The
wireframe provides a sense of
the general layout without
dealing in the specifics of styling
and wording. The simplistic
layout keeps the client focused
on the layout (structure) rather
than the design (colour scheme).
Read more about wireframing
here:
http://en.wikipedia.org/wiki/Websit
e_wireframe Figure 3: Wireframe (Rohde, 2009)
Stage 3: Development
In this stage, we build the site to specification, budget and timeframes. The process
involves installing all the necessary features, and converting the provided content
from word processor documents to HTML.
Output:
A completed site (meets the specifications in the brief) that has been launched
(made public).
Failure:
Scope creep (an expanding or shifting set of requirements), poor

project management or lack of delivery results in an incomplete site
Proceed to the next stage?
If the client confirms that they are satisfied with the result, and that all elements of
the scope have been delivered, then the project is closed, and the work shifts from
development to maintenance.
Stage 4: Nurturing
Launching the completed website is only the start of a company’s online media and
sales process. The website will need a lot of continued attention and focus in order
to achieve the specific goals defined in the initial strategy stage. Here are some of
the activities:
• Review
Set up a regular review process so that the site is not forgotten.
• System updates
If the website features contain a bug or security flaw, the developer will
release a new version which will need to be added to the site in order to fix the
problem.
• Content updates
Changing staff, products, prices and other details will need to be reflected
on the website.
• Security
Monitor hacker activity and repair any damage done by hackers.
Backups
Making a backup copy of the site in case the server hard drive crashes.
Phase 2 elements
These are additional features or improvements identified during the strategy stage
(they were not important enough), the scoping stage (they were outside the
budget), or the development stage (it is best to stick to the scope and add new
features after the website is complete).
Marketing activities
Social media campaigns, email campaigns, online competitions, and updated

content regarding products and services.
• KPI activities
Measure KPIs agreed on during the strategy stage, and ensure that targets
are being reached, or at least that the website is improving.
• ROI analysis
Measure, report on, and assess the financial return on investment from
the money put into the site development and nurturing.
Output:
An active, up-to-date, successful site which has been improved, expanded, matured
or changed since launch to better meet client needs.
Failure:
The site grows less and less useful and fails to deliver on ROI
Proceed to the next stage?
The website eventually reaches a tipping point where the technology, content or
purpose no longer meets the company’s needs, and we return to Stage 1 to start
a new website.
The Team
Web development used to be simple enough for a one- or two-person company,

where all aspects of the project are handled by a few people. This is no longer true,
as the complexities of each area of work require specialisation and focus.
• Web strategist
o A “big picture” person who understands enough about the overall
process, roles, technologies, costs etc to guide the development of the
site. In the simplest of senses, this is the sales person who sells the
website to the client.
• Project manager
o Keeps the project to the scope, budget and deadline. Co-
ordinates the activities of the rest of the team.
• Copywriter
o Produces the text for the website. Website content is specialised for the
web, and is in no way the same as writing for a brochure, booklet etc.
• Designer
o Produces the look and feel for the site. Creates all the required
graphics. Graphic design for the web draws on general design theory
but extends into specific areas only required for the web.
• Developer
o Codes, installs and configures the software that makes the website work.
• Social media expert

o Implements social media integrations (e.g. Follow us on Facebook) and
social media campaigns (e.g. a competition on Twitter).
• Online advertising specialist

o Arranges online advertising for the client (e.g. banner ads or
AdWords campaigns).
• UX specialist
o Evaluates and improves the user experience on the site (e.g. making
navigation clearer and easier to use, moving the login button to a more
obvious location).
• Maintenance person
o Updates text, image and multimedia content on the site.
• Security specialist
o Manages server and site security, keeping hackers out of the site.
• Server administrator
o Keeps the server online and ensures that it performs adequately (e.g. that
busy sites still load quickly).
Building A Web Development Business
Given the complexities of web development today, there are several approaches:
§ Freelance, or create a small firm, and simply don’t do some of the work
Relatively unsophisticated clients just “need a basic website”. These clients are
happy with a basic HTML site without any interactive features or online marketing
activities.
§ Freelance or create a small firm and outsource several elements

o Offer a full web development service, but outsource many of the
elements to specialists in each field. It is best to inform your client that
you are outsourcing, as it keeps communications and contractual
arrangements simple. You can explain the arrangement as “an
association of specialists”.
§ Freelance, or create a small firm specialising in only one or a few

elements
o Offer a niche service. A really common niche is Search Engine Optimisation.
o In South Africa, there are very few web development firms of more than
10 staff members.
The Four Development Approaches
Broadly speaking, there are four ways to build websites. Each approach has
strengths and weaknesses.
Text editor
Figure 4: Webpage development using a text editor
Early web developers literally typed every line of code and content using Notepad
or a similar, really simple text editor.
There are no advantages to this approach, unless you like unnecessary pain
and suffering.
Code support software

Figure 5: Webpage development using code support software
These tools move beyond a simple text editor, in that they support the production
and editing of the code.
The principle advantages are:
[Numbers refer to the above screenshot]

• Code completion
o The program will fill in code as you type, making it faster to develop the site.

• Code error checking
o If you make a mistake in the code, the program will highlight the mistake.

• Syntax highlighting
o Each part of the HTML and CSS code will be formatted differently, so
that it is easy to find the various code elements.

• Browser previews
o The program can show the page in Code View (just the code), Split View
(code and preview) and Design View (a simulation of what the site will
look like in a browser). The preview is faster than reloading the page in a
web browser after each code change.
The disadvantages are:
• Collaborative development is difficult
The files are on a single computer. It is next to impossible for the graphic
designer, copywriter and developer to work on the same website
simultaneously.
• Suitable for basic websites only

Advanced website features cannot easily be integrated using these tools (e.g. a
shopping cart system), as these can only be displayed on a live webserver.
• The Design View is only a preview

It is not really a substitute for viewing the website in a real browser (or
more than one browser).
Frameworks and patterns
Figure 6: Webpage development using patterns
Whether using Notepad or a code support application, the web development work
requires that all code be prepared from scratch.
Frameworks and patterns provide libraries of reusable code that can be dropped into
a website. Examples include:
• Breadcrumb navigation elements and styling;
• Image and content sliders;
• Basic templates for the entire page.
The advantages are:
• Speed of development
The code is copy and paste, saving lots of design, typing and testing
• Tried and tested code

The code elements have been tested by hundreds of users on all browsers.
There is thus little chance that the code is incompatible or inconsistent on
various browsers.
ü You may not understand the code, since you did not generate it.
Content management system (CMS)
Figure 7: Webpage development using a CMS (Joomla)
A CMS is a completely different approach to developing a website.

The website consists of a platform (online application) with core features for
building and editing the site.
The web developer then installs additional extensions to provide for the specific
functionality required. These extensions are similar to the framewords and patterns
described above, but they are specific to the CMS selected.
The three most popular CMSs are Wordpress, Joomla and Drupal.
The advantages:
ü Building complex websites is easy

The “core and extension” architecture allows a web developer to build almost
any kind of website with minimal programming effort.
ü Collaboration is easy
The graphic designer can work on the template, the copywriter can insert the
content and the web developer can adjust the layout and install advanced
features all at the same time.
• A CMS, due to its programming logic, is more vulnerable to hackers than a

plain HTML site. Security of the webserver and the CMS is thus of major
concern.
Why doesn’t this course skip writing code and just cover CMS
development instead?
This is an introductory course. The purpose is to teach the fundamentals. The

fundamentals of using a CMS are the development approaches and programming
languages covered in this course. A solid grounding in HTML, CSS and
JavaScript are essential for professional web development using a CMS.
Programming for the Web
No modern website is constructed using a single programming language.

Instead, each page is a complex blend of code using different languages.
Core languages
HTML – Hypertext Markup Language

HTML is the primary structural language. It is helpful to think of HTML as the
bricks, cement etc that make up the floor, walls and room of the house.
CSS – Cascading Style Sheets

CSS is the primary styling language. CSS is used to create the visual
impression of the site. Think of CSS as the paint on the walls of the house.
JavaScript
JavaScript is a common language for providing client-side interactions.
JavaScript makes things happen in the browser, without referring back to the
server.
Note that folder and file names are case sensitive on most web servers –
home.html is a different file to Home.html. Links with the wrong case will work when
you are testing them on Windows, because Windows is not case sensitive.
You should therefore use the following naming structure:
• All file names are in lower case
• All html files have .html extensions
• All html file names are a single word without spaces. You can choose between
the following formats for file names with multiple words:
aboutus.html about-us.html
(recommended)
about_us.html (not recommended, as the underscore is partially
obscured when links are underlined – e.g. http://www.site.com/about_us.html)
Server-side scripting
Consider a website that has content restricted to registered, logged in users. When
you load the page, you are informed that you need to login. If you are already logged
in, it just shows the content.
This is handled by programming code on the webserver. This code serves up two
different views of the same page, depending on whether the user is logged in.
Server-side scripting is often used in conjunction with online databases in order to
make the page content even more customised to the specific user. Websites built in
this way are often called database-driven websites.
Common server-side scripting languages include PHP, ASP, Ruby-on-Rails,

PERL and Python.
All CMS systems are written in one or these server-side scripting languages.
This course does not cover server-side scripting in any detail.
Constant Innovation
One of the challenges of web development is the constant technological and

other changes in the industry. If you enter this field, expect to do at least a few
hours of research and learning every week.
Code versions
HTML has gone through several versions – HTML 1.0, 2.0, 3.2, 4 and 5. Versions 1
to 4 simply added new features. HTML 5 has fundamentally changed the code base
and approach to building website structures.
CSS has similarly gone through versions 1, 2 and 3. These have all been
incremental improvements.
Webpage display issues
Cross-browser compatibility has been a serious issue. In the early days of the
web, each web browser (e.g. Netscape and Internet Explorer) displayed the same
HTML and CSS code in quite different ways. This made it extremely difficult to
achieve a consistent display and functionality for all users on all browsers.
Nowadays, all browser developers subscribe to common coding standards, so that
all browsers display the same code in much the same way. Some layout issues
remain, for example:
Type the following:

<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
Code explanation:
• <html> - start a webpage

• <head> - the container for title, author, description (content does not appear
on the page)
• <title> - the title of the webpage and/or website
• <body> - the container for the website content
Note:
• All HTML elements start with < and end with >
• HTML is not case sensitive - <HTML> and <html> are both valid
• Most HTML elements form container pairs - <html> to start and </html> to
end
• The elements above are all structural – they create containers for content, but
in no way specify what the content should look like
• The browser or tab title bar reads Untitled (you have not given the page a
title yet)
Result:
At this point, the file has an HTML structure that can hold the various text and
other content elements.
Step 3: Enter some content
So far you have just created the empty containers. Now you are going to fill the
containers with text.
Add the text:
• Leave Notepad open

• Open Microsoft Word
• Replace Untitled with My First Webpage
• Save
Observe:
• Most of the Word formatting was removed, leaving only the content
• The paragraph structures are preserved
• The Latin text is commonly used to create a sample layout when the actual text
for the site is not yet ready. Read more about this at http://www.lipsum.com/
View the webpage:
• Return to the web browser

• Refresh the page to show your latest changes (Tip: Use the F5 shortcut)
Observe:
• The paragraph structure in the HTML code does not show on the web browser
• The browser or tab title has changed to My First Webpage
Result:
At this point, the content has been inserted, but it has no structure or formatting.
Step 4: Add HTML structure to the text
The HTML codes below will define each piece of text as being a heading,
a paragraph, a list item etc.
Add the HTML codes:
• Return to Notepad
• Change the first heading to a Heading 1
o From: Main heading
o To: <h1>Main heading</h1>
• Change the subheadings to Heading 2
o From: Subheading
o To: <h2>Subheading</h2>
• Wrap each paragraph in paragraph tags. Each paragraph starts with <p> and
ends with </p>. Note that the headings and bulleted list do not need these
tags.
• Format the bulleted list
o Start with a <ul> and end with
</ul> Remove the MS Word bullets
and spaces
o Start each bulleted item with <li> and end it with </li>
• Save
View the webpage:

Note:
• The headings show in the default styling for the browser

• The paragraphs now show correctly
• The bulleted list shows correctly, with the default styling
Result:
At this point, the content is structured into headings, paragraphs and lists, but has
only the default formatting.
Step 5: Style the document using CSS
So far, you have created the HTML containers, and filled them with text, but
they have no styling. CSS adds the styling.
Create an embedded style sheet:
• Return to Notepad
• Create a style in the head of the document, just after <title>, before </head>
<style type="text/css">
body {font-face: verdana; padding: 20px}
h1 {font-size: 18pt;}
h2 {font-size: 14pt;}
• {text-align: justify; margin: 10px
0px;} li {color: #008000;}
</style>
Note the American spelling of colour.
Save
View the webpage:

Observe:
• The CSS styling has been applied to each HTML element
Result:
The webpage now has specific formatting which overrides the default formatting.
Step 6: Add some JavaScript
The following code will display the date and time on which the document was
last edited. The date and time are updated automatically each time the webpage
is loaded.
<p>This document was last modified on: <script>
document.write(document.lastModified);
</script></p>
Review
This simple webpage has been created using a mixture of three

programming languages, each with their own purpose and syntax.
• HTML – structural
o Reference: http://www.w3schools.com/html/default.asp
• CSS – styling
o Reference: http://www.w3schools.com/css/default.asp
• JavaScript – client-side scripting

o Reference: http://www.w3schools.com/jsref/prop_doc_lastmodified.asp
Recommended Additional Reading
www.w3schools.com introduction to web design, introduction to HTML,
and Introduction to CSS.
Recommended Digital Engagement and Activities

Browse job listing websites for web developer and social media jobs.
Attempt to relate the job description to the specific roles described above. Note how
some jobs are multi-disciplinary (the web developer plays all roles) and some are
specialised.
Note how some of the jobs require competency in specific tools (Joomla,
Wordpress, Google Analytics) and some do not specify tools and approaches at all.
Find and watch a Youtube tutorial on adding content to a Joomla or Wordpress
website. Note that the work is being done live on the website (not using a desktop
application). Note the use of an editor to complete the changes, rather than the user
entering HTML and CSS code manually.
Interactive Work Space
Identify the web development role that most interests/ best suits you. Discuss this
role with another student in your class, explaining why you have selected it.
Revision Exercise
Purpose:
You need to explain the four stages of web development to your clients.
SECTION THREE: INTRODUCTION TO
MICROSOFT EXPRESSION WEB
CONTENTS
SECTION THREE: INTRODUCTION TO

EXPRESSION WEB
3.2 READING
3.3 INTRODUCTION
3.4 UNDERSTANDING THE INTERFACE
OF MICROSOFT EXPRESSION
............................................................................................................................
47
3.5 THE DIFFERENT DOCUMENT VIEWS
AND METHODS OF DESIGNING
............................................................................................................................
50
3.6 CREATING AND DESIGNING WEB
PAGES AND WEB SITES IN MICROSOFT
EXPRESSION
Web Page Design 102
• Become familiar with the User Interface.

• Understand the stages and procedures involved in developing a website.
Web Page Design 102
3.3 INTRODUCTION
Expression Web is an example of a Code support editor.
Review the advantages and disadvantages of using this type of software (see
page 30).
Installing Expression Web 4 on your own PC
You may wish to install Expression Web 4 on your own PC in order to practice and
to do the project outside the computer labs.
You need to configure the program as follows in order to provide a user interface
and code set consistent with this manual.
Go to Tools / Page Editor Options
Go to Authoring tab
Set Default document = HTML
Set Document type declaration = HTML 5
Set Secondary schema = HTML 5
Set CSS schema – schema version = CSS 3 draft
Press OK
Note: The program installs with a default dark theme. This manual shows a light
theme in order to simplify printing. The layout and functions are identical.
Loading the program
The program loads in whatever workspace view you were in, and creates a new
HTML file of the type specified in your defaults (see details of installation instructions
above). In your case, the new HTML file is an HTML 5 document.
Interface Customisation
The program is designed to suit various types of user, as well as to allow personal
modifications to suit individual needs.
Toolbars and panes
The program provides multiple dockable panes. You can decide which panes to
show, and where to position them. If you change the workspace, the panes
changes to suit (see below).
Folders Code HTML tags
Properties pane Preview
CSS styling
Views
Figure 13: Expression Web v4 interface – Designer workspace, Split screen view
Workspaces
There is a specific workspace configuration for each broad user type. We are
working in the Designer workspace.
To change the workspace, go to Panels / Workspaces and select a different
user type. Notice how the panes change as you do so.
Document views
Expression Web is similar to other code development tools in that it provides

multiple views of the code, each suited to a specific purpose.
• Design
Pure preview mode. No code is visible, and all edits are very similar to working
in MS Word.
• Split
A mix of Design View and Code view. Making a change in one part of the split
pane causes an update on the other pane.
• Code
Pure code view, with no preview. This view maximises the screen available for
code, and would therefore be preferred by users who only work in code.
Why not just code in design view?
a Some code entry is faster just by typing

b Some code has no visible effect, so you can’t see it in the design view
c Cross-browser issues dictate that you look at the code output in a browser
(in fact, several browsers).
d There is no support in the Design view for previewing CSS 3 properties (Geary,
2012) or JavaScript actions – for these, you’ll need a browser.
Developing Code
The primary purpose of Expression Web is to support you to write your own
code, and to insert code for you.
Code support features
Expression Web “Intellisense” helps you to enter code in the following ways:
(b) Statement completion

If you start typing a piece of code, Intellisense will prompt you with the rest of
the word.
(a) Close tags
If you insert a start tag, Intellisense will insert the end tag for you.
(b) Suggests code appropriate to the context

Code related to the type of page you are producing (CSS or HTML)
The colour coding helps by:
(iii) Colouring the various parts of the code differently

HTML tags, hyperlinks, attributes and CSS code each have a colour, making it
easier to read
(iv) Broken code highlighting

If you enter the code incorrectly, it gets a pale yellow highlight
Code generation and insertion
Apart from supporting you to write code, Expression Web is also able to generate
the code for you.
Design mode
If you add structure (HTML) or styling (CSS) in the design mode, the code is
generated for you.
Snippets
In Code view, you can access and insert snippets.

These are blocks of code that are available by default in Expression Web.
Access the snippets on the Snippets pane (top right sidebar).
Templates
Expression Web template provide the

overall page structure. You can select
from a range of common layouts.
(a) File / New / Page
(b) CSS layouts
(c) Select a layout
These are currently coded
in HTML 4, not HTML 5
Figure 14: CSS layouts

Working With Files
As you saw earlier in the course, websites are made up of several folders and
files. The relationship between these files is critical, especially when inserting
hyperlinks between the pages, or references from one file to another (e.g. an
HTML file referencing an image).
Hyperlink options grey out (unavailable)
Expression Web cannot make file reference links (such as hyperlinks or style sheet
references) unless it is sure of the file location (so that relative links can be used). If
you find that the hyperlink menu items are greyed out, you need to first save the HTML
file that you are working on. The menu items will then be activated again.
Working with individual files
It is possible to open a single HTML file in Expression Web, in order to make content
changes, for example. However, you need to watch out if you are making changes
that involve linking to other files. Here is a good example of the problem – an image
element.
<img
src="file:///C:/Users/Joe%20Bloggs/Documents/MyWeb/images/chair.jpg
" width="250" height="300" >
This image element refers to the C: drive, then to a series of folders and sub-
folders and then to an image called chair.jpg.
This image will display on Joe Bloggs’ computer, even when they upload the
website to the webserver. No-one else will ever see the image.
Why?
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
Working with multiple files
Expression Web uses the concept of a “site” to bring together all the
resources required to display the website.
A site is simply a folder on your PC where all the project files (webpages,
images, videos etc) will be saved.
If you create a site first, load the site and then the files, Expression Web will always be
able to build relative links between files, avoiding the issue described above.
Create a site:
(a) Load Expression Web

(b) Go to Site / New Site
(c) Choose General / Empty Site
(d) Browse to choose a starting location (e.g. your Documents folder)
(e) Select an existing folder, or create a new folder – each project needs a
separate folder
(f) Press Open
(g) Give the project a name
(h) Press OK
Open an existing site:
(a) Load Expression Web

(b) Make sure no files are open
(c) Go to Site / Open Site
(d) Choose the site from the list
(e) Press Open
The Site View will open, showing all the files and folders.
The same information will appear in the Folder list pane on the left sidebar.
Figure 15: Site view and folder list

Download the comprehensive eBook by Patricia Geary from http://www.expression-
web-tutorials.com/ew4-tutorials-ebook.html. It covers everything from installation to
publishing a website in 152 pages.

Watch the Expression Web introductory videos at:
http://expression.microsoft.com/en-us/cc197140.aspx
In particular, watch: http://expression.microsoft.com/en-us/hh290948
4 Interactive Work Space
Revision Exercise
You will have revised this Learning Unit whenever you used Expression Web for the
HTML, CSS and JavaScript activities in the following Learning Units. You should also
do this revision activity in order to focus on understanding key concepts. These
concepts could be examined as theory questions in the exam.
Purpose:
Review the key Expression Web concepts.
Task:
1. Repeat all the activities in this Learning Unit

2. Make sure that you fully understand the following concepts:
a. Workspace
b. Design, Code and Split view
c. Dockable panes
d. Intellisense
59
Web Page Design 102
SECTION FOUR: HYPER TEXT MARKUP

LANGUAGE
CONTENTS
SECTION FOUR: HYPERTEXT MARKUP LANGUAGE

4.2 READING
4.3 INTRODUCTION
4.4 DIFFERENT TAGS IN DECLARING HTML ELEMENTS
4.5 CONCLUSION
60
Web Page Design 102
• Become familiar with the HTML 5 syntax

• Review the section on web development fundamentals and ensure that you
understand the role of HTML in the overall development of a website
62
Web Page Design 102
4.3 Introduction
Understanding HTML
HTML is very simple to use, provided you pay close attention to the fundamentals.
You must be absolutely clear of the structure and purpose of the following:
• Elements
• Tags
• Attributes
Elements and tags
Hyper Text Markup Language (HTML) is a markup language. This means that text
(e.g. a paragraph) is wrapped in a set of markup tags (w3schools.com [1], n.d.).
Example: Headings
<h1>Man bites dog</h1>

• Man bites dog is the text that will be displayed on the webpage
• <h1>Man bites dog</h1> is the HTML element
• <h1> is the start tag, and defines the text that follows as being a Heading 1
• </h1> is the end tag, and defines the end of the Heading 1
Attributes
Some HTML tags can have attributes (w3schools.com [1], n.d.).
Example: Images
<img src="logo.jpg" width="210" height="140">

• logo.jpg is the image that will be displayed on the webpage
• <img src="logo.jpg" width="210" height="140"> is the HTML element
• <img> is the tag, defining an image (there is no closing tag for images)
• src="logo.jpg" is an attribute, and defines the location of the image
• width="210" is an attribute, and defines the width of the image in pixels
Syntax
Tags are not case sensitive – e.g. <h1> and <H1> are both acceptable.
Attribute values should be enclosed in double quotes – e.g. width="120".
Overall file structure
Doctype
The doctype is the first line of the HTML file. It formally declares which version of
HTML you are using. This assists the web browser to display the content correctly.
For an HTML 5 document, the doctype is:
<!DOCTYPE html>
File structure
A webpage is an HTML file. HTML files have

a required minimum set of code to provide
the structure.
You can think of these structures as
containers to hold the various parts of the
page. These containers are stacked inside
one another.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<head>
<body>
The webpage content goes here
</body>
</html>
Orderly HTML
When you insert a container, the start and end tags are usually close together. As you
add content to the container, the start and end tags end up several lines apart. You
may then end up adding another container inside the first. This can get really
confusing to read.
Common ways to deal with this include HTML comments and indented code.
HTML comments look like this 
Consider the way that the comments and indents make it easier to read the following
code block.
<!DOCTYPE html>
<html>
<head>

<title>Title of the document</title>
<head>
<body>

The webpage content goes here
</body>
</html>
Paragraphs, divs and spans
Paragraphs, divs and spans are all containers that can be used to hold text. In
general, you should use them as follows:
• Paragraphs
Actual text paragraphs
• Divs
Block elements that contain multiple paragraphs or A heading
other text elements and or images Lorem ipsum dolor
sit amet, adipiscing
• Spans elit.
Inline text elements that will be styled
Maecenas eget diam
A sidebar is a column on the left or right of the main content risus, ut diam.
area. The sidebar typically holds a menu, as well as
newsletter subscription forms, testimonials, guarantees and
Figure 16: Example sidebar
product specials. The HTML code for the example sidebar
in Figure 16 is:
<div>
<h1>A heading</h1>
<p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
<p>Maecenas <span>eget diam risus</span>, ut diam.</p>
</div>
• Semantic containers
HTML 5 introduces the concept of semantic elements. These are HTML containers
similar to CSS DIVs, except that the name of the container means something.
Consider the following:
<div id=block1>Home | About Us | Products | Contact</div>
Humans can read the page and see the menu.

Search engines can see the links, but have no easy way to identify the code block as
being a menu.
In HTML 5, we can code the same menu as follows, and now the search
engines know that the code block is a menu:
<nav>Home | About Us | Products | Contact</nav>
For more information on this concept, see

http://www.w3schools.com/html/html5_new_elements.asp
Activity 5 Create a sidebar
Purpose:
The graphic designer has produced a template for the website. The template CSS file
will control the presentation and styling of the HTML elements. Your job is just to insert
the relevant text and then mark it up using HTML.
Line Breaks
Line breaks are especially important when the webpage styling includes automatic
spacing between paragraphs. Consider the following text:
Paragraphs: Line breaks:

Address: Address:
1 Somewhere Road 1 Somewhere Road
My suburb My suburb
My city My city
4001 4001
Phone: Phone:
082 555 5555 082 555 5555
031 444 4444 031 444 4444
Figure 17: Paragraph and line breaks
Observe the difference between paragraph and line break spacing in the right hand
column.
The HTML code for the right hand column is:
<p>Address:</p>
<p>1 Somewhere Road<br>

My suburb<br>
My city<br>
4001</p>
<p>Phone:</p>
<p>082 555 5555<br>

031 444 4444</p>
Bold, Italic, Underline
Bold
HTML is intended for use as a markup language, not a formatting language.

Strictly speaking, bold is a formatting parameter, rather than a functional description
- we use bold to format important text. The markup should specify that a piece of
text is important, not that it is bold!
Therefore, the HTML markup <b> should be used as a last resort (w3schools.com
[2], n.d). The <strong> tag should be used instead.
<p>This is <strong>very</strong> important!</p>
Italic
Likewise, italics is used for emphasis, so the correct tag is <em>

<p>This is <em>very</em> important!</p>
Underline
Underline is seldom used, except in cases such as academic referencing, where book
titles may be underlined. Try to avoid underlining normal text, as users may then
interpret the underline as being a hypertext link, and try to click on it.
<p>This is <u>very</u> important!</p>
Lists
Bulleted list
Bulleted lists should be used for point form text where the items in the list are not in a
particular order. The structure is as follows:
I like: <p>I like:<p>
• Pizza.
• Reading. <ul>
• Music. <li>Pizza
<li>Reading
<li>Music
</ul>
Numbered list
Numbered lists should be used for items that are in a logical order (e.g. steps in a
recipe) or where reference to a specific item will be necessary (e.g. a contract in which
one paragraph refers to another – e.g. See point 4 above). The structure is as follows:
Chocolate Brownies <h1>Chocolate Brownies</h1>
1. Melt butter. <ol>

2. Add vanilla and eggs. <li>Melt butter
3. Add cocoa <li>Add vanilla and eggs
<li>Add cocoa
</ol>
.
Activity Mark up a list
Purpose:
Format a list as a bulleted and then a numbered list.
Instructions:
Bulleted list
1. Mark up My Interests as a Heading 1

2. Mark up I like: as a paragraph
3. Create a bulleted list for the three interests
4. Add one more interest
5. Save
Numbered list
1. Change the bulleted list to a numbered list
Nested lists
You can insert one list inside another. Modify the numbered list as follows:
I like:
1. Pizza
1. Must have lots of garlic
2. Cheese must be stringy
2. Reading
3. Music
Tables
Tables (with invisible borders) have historically been used to create page layouts.
However, this is now considered bad practice (Kyrnin, n.d.). Tables should only be used
for the presentation of actual tables (e.g. a price list) within the content of the page.
Tables such as the one below are defined differently in HTML than in MS Word:
• Word – 3 columns and 2 rows
• HTML – 2 rows, 3 cells in each row
Core table elements Example table
Code Product Price

Tables are created using several HTML
001 Blue pen 12.34
elements:
002 Red pen 14.34
• <table>…</table> <table cellspacing="0"
This creates the overall container for the entire cellpadding="4">
table. 
<tr>
Attributes include:
<th>Code</th>
cellspacing – the space between cells cellpadding
<th>Product</th>
– the space between the cell border and the cell
<th>Price</th>
content
</tr>

• <tr>…</tr>
<tr>
This creates the container for each row.
<td>001</td>
<td>Blue pen</td>
• <th>…</th>
<td>12.34</td>
This creates the container for each heading
</tr>
cell.
<tr>
<td>002</td>
• <td>…</td>
<td>Red pen</td>
This creates the container for each cell.
<td>14.34</td>
</tr>
</table>
Tables in Expression Web
Given how much code is required to generate a table, you can consider using the
Expression Web code generator to make the table for you. Go to Table / Insert
Table
The interface is very similar to that in MS Word, except that there are settings
specific to HTML tables which are not found in word processor tables.
Activity Insert and comment a table
Purpose:
Insert a table and make sense of its structure.

3. Place the insertion point between <body> and </body>
4. Insert a table
a. Go to Table / Insert Table
b. 2 rows and 3 columns
c. Cellpadding = 4
d. Cellspacing = 0
e. Border size = 1
f. Everything else on default
g. Press OK
5. Insert comments for each cell. For example, for the first cell:

6. Refer to the example table above and fill in the data, replacing the & nbsp;
7. Save in WEDE5010 / Activity 8 / my-table.html
8. Preview the table in Split view
9. Why was it necessary to add the HTML comments to identify the start of each
cell? ....................................................................................................................
............................................................................................................................
............................................................................................................................
More complex table layouts
You can merge rows and columns to create more complex layouts.
Columns are merged using the colspan attribute.
Rows are merged using the rowspan attribute.
Note that the cells that have been merged are reduced to a single <td>.
2012 price list <table cellspacing="0"
Code Product Price cellpadding="4">
001 Blue pen 12.34 
<tr>
<td colspan=3>
<h3>2012 price list</h3>
</td>
</tr>

<tr>
<td>Code</td>
<td>Product</td>
<td>Price</td>
</tr>

<tr>
<td>001</td>
<td>Blue pen</td>
<td>12.34</td>
</tr>
</table>
Activity Add a merged row
Purpose:
Work with an existing table structure and modify the code.
Images
Uses of images
• Background styling
Background images create visual effects on the whole page, a content block or an HTML
button. These images therefore usually form part of the overall template for the site.
Background images are inserted using CSS (see Learning Unit 5).
• Other template elements

Template elements include bullet images, and other foreground images.
• Content
These are images that form part of the website content – e.g. a product photo.
Image formats for the web
Only certain image formats can be used on the web:

• GIF
Largely obsolete. Do not bother to use these.
• JPG
A bitmap format with full colour. Images are compressed to reduce the file size, but the
compression results in a loss of quality. JPG images cannot have transparency. Use
JPG for photos.
• PNG
A bitmap format with full colour. Images are compressed to reduce the file size, and the
compression results in no loss of quality, but bigger file sizes. PNG images can have
transparency. Use PNG for logos and non-photographic images.
These terms are explained in Activity 10 below.
Image location
On-site images must be inside your Site folder.

<img src="logo.jpg" width="210" height="140">
In order to keep things tidy, many web developers use an images folder just for the
site images.
<img src="images/logo.jpg" width="210" height="140">
If you reference an off-site image, be aware that, if the image is removed from the
other site, the image will no longer display on yours.
<img src="http://www.anothersite.com/images/logo.jpg" width="210"
height="140">
Image attributes
The following attributes apply to images. The positioning and styling options are
found in CSS, not HTML.
• Height and width
The dimensions of the image in pixels. This attribute needs to be omitted when building
responsive websites (see page 35).
• Alt
This is a text description used by screen readers. Screen readers are programs that read
out the content of the website to the blind user. The alt description is also used by search
engines to find out what an image is about.
Activity Insert an image
Purpose:
Work with images in HTML
Links
Links, or, more correctly, hyperlinks, are a core feature of the web.
You should make it as easy as possible for the user to use the site by “rich linking”. For
example, instead of relying on users returning to the products main page to get to the
next product, have a small product menu on every page.
When you mention a product in the text, make sure that you link the name to the
specific page for that product.
Syntax
<a href="http://www.site.com">Visit our website</a>

• <a href="http://www.site.com">Visit our website</a> is the
HTML element
• <a> is the start tag, and defines the beginning of a hyperlink
• href=http://www.site.com is an attribute, and defines the
hyperlink destination
• </a> is the end tag, and defines the end of a hyperlink
• Visit our website is the text that will be displayed on the webpage
An image can also be a hyperlink:
<a href="http://www.site.com"><img src="images/logo.png"></a> File

names are really important in web development
Refer back to Programming for the Web on page 33 for important information on your
folder and file names.
Watch out!
Some HTML editors may insert absolute links for internal resources. They will look like
this: file:///C:user/name/documents/filename.html. This will happen
if you have opened an individual page rather than the whole site.
Refer to page 52 for more details.
A link to another webpage on the same website
Purpose
Allow users to move from one webpage to another on the same website.
Structure
These links within your website (e.g. from the home page to the contacts page) are
always formatted as relative links. Relative links do not specify the domain name, and it
is assumed that these links refer to the same website as the page that the user is
currently on.
<a href="contact.html">Contact us</a>
1. The user is on www.site.com
2. They click on a link to contact.html
3. The browser loads http://www.site.com/contact.html – the
browser combines the current domain name with the selected file name and
builds the URL to be visited.
Inserting this link type in Expression Web
Ideally, you should have all the webpages already saved in your site folder (they can be
blank).
1. Create the link text, or insert the image that will be a link
2. Select the text or image, being careful not to select a space before or after
the text
3. Go to Insert / Hyperlink
If the Hyperlink menu option is greyed out, just save your file and then try again.
4. Browse to the folder
5. Click on the file
6. Press OK
If you have not already made the page that you are linking to, you can simply type
the filename in the Address field.
A link to another website
Purpose
Allow users to move from one website to another.
Structure
Using just the domain, in order to link to the website homepage:

<a href="http://www.anothersite.com">Visit us</a>
Or, the full URL, to link to a specific page:
<a href="http://www.anothersite.com/products/overview.html">View our
products</a>
Links to external resources (e.g. a different website) are always formatted as
absolute links. The href for these links always contains the entire URL, starting
with http://.
the text
4. In the Address field, enter the web address, starting with http://
5. Press OK
If you want the other website to open in a new window, leaving your website open in
the first window, adjust the link code as follows:
<a href="http://www.anothersite.com" target="_blank">Visit our
website</a>
A link to a location on the same page
Purpose
If you create a really long page, and cannot break it into separate pages, then create a
Table of Contents at the top of the page. When users click on a link, the page scrolls
down to the relevant heading or section.
Structure
The code consists of two parts – the hyperlink, and the target location on the page.
Table of Contents:
<ul>
<li><a href="#product-1">Product 1</a></li>
</ul>
Place where the link jumps to (called a bookmark in Expression Web):

<h3><a name="product-1">Product 1</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Create the bookmark:

1. Select the text (e.g. Product 1)
2. Go to Insert / Bookmark
3. Adjust the bookmark to be a single word in lowercase
4. Press OK
the text
4. Press the Bookmark button
5. Select the relevant target
6. Press OK
7. Press OK again
A media resource
Purpose
A hyperlink can open an image, video or text block in a popup.
Structure
This is often done using the lightbox effect. The screen goes grey and the image or
video appears in a box in the center of the screen.
You will create a lightbox image gallery in the JavaScript part of this course.
A new email message
Purpose
When the user clicks on the email address, it starts a new email message. This relies on
the user’s web browsing device having a configured email application (e.g. Outlook), so
it should be avoided.
Structure
The code for the email link is:

<a href="mailto:name@domain.co.za">Email me</a>

the text
4. In the Address field, type mailto:name@domain.co.za
5. Press OK again
Presentation of links
Navigational links
Table of Contents
Inline link
Figure 18: Presentation of links

There are several ways that links can be presented:
• Navigational links
These are found on a menu running across the top or side of the webpage.
• Inline links
These are found within the text on the webpage.
• Table of contents links

These are found at the top of a long page, and lead the user to points lower on the
same webpage. These are also known as Internal Links.
Referencing folders
The following hyperlink is relative. It contains only the name of the file to be loaded,
without specifying either the domain or the folder. In most cases this will work
correctly.
<a href="contact.html">Contact us</a>
Imagine a larger website, with thousands of pages (e.g. a large company with several
divisions). In such a situation, you might have folders for each division so that file
management is easier. Relative links then get a bit more complex. You are on:
http://www.site.com/international-sales/south-africa.html
You want to follow a link back to the overall website home page. The link needs to “hop”
from the international-sales folder back to the root (public_html) folder of the site.
The link would be structured as follows:
<a href="../index.html">Home</a>
The ../ hops back one folder level.
This concept and syntax also applies to any HTML code that refers to other files:
<img src="../images/logo.png">
Activity Working with links
Purpose:
Add several kinds of hyperlinks to a webpage.

Forms
Purpose
Forms collect information from users. The information is structured, as it is collected in

a series of named fields. Forms are, therefore, a preferred method of gathering
information, rather than email.
Consider a webpage that encourages users to make an enquiry about a product:
Option 1: Supply an email address and phone number
The user cannot phone because they are looking at the site after hours.
They send an email, but leave out critical information in their request. The sales
representative then has to contact them and ask for further information before they
can provide a quote.
Option 2: Supply a phone number, as well as an enquiry form
The user fills in the form, providing complete information about their requirements.
The sales representative is able to provide a quote without needing any more
information from the user.
Common forms
• Enquiry form
As in the example above
• Login form
A form that collects username and password, granting the user access to the
restricted areas of the site.
• Newsletter subscription form

A form that collects the name and email address of a user and adds them to an email
newsletter subscriber list so that they can receive newsletters from the site owner.
Structure
<form> container
All forms start with <form> and end with </form>. There are several attributes.
<form method="post" action="submit.php">
…
</form>
Note: You cannot nest one form inside another.
Labels
Labels are text snippets that label each field so that the user knows what to fill in.
<label for="FirstName"> First Name </label>
The label “for” must match the ID of the field (see below).
Fields
A field is the space where the user types or makes selections. There are several field
types. The following code is for a text field.
<input name="FirstName" type="text" id="FirstName" />
Field names should be meaningful. It is simplest to use CamelCase for names –

Each word starts with a capital letter, and there are no spaces between words.
Form field types
Text
Simple text data entry
<label id="FirstName">First Name</label>

<input name="FirstName" type="text" />
Text area
A larger block for entering more text – e.g. a comments box Note
that the code is very different to the other field types.
<label id="Comments">Please comment on our service</label>

<textarea name="Comments" cols="20" rows="2"></textarea>
Password
Same as a textbox, but the data entered by the user shows up as stars instead of
revealing their password to people looking over their shoulder.
<label id="Password">Password</label> <input
name="Password" type="password" />
Select
A drop-down list of choices

The choices consist of the value (which is returned to the server) and the visible
option in the list.
<label id="Province">Province</label>
<select name="Province">
<option value="">Please choose</option>
<option value="KZN">KwaZulu-Natal</option>
<option value="GP">Gauteng</option>
</select>
Checkboxes
A checkbox is a box which can be ticked or blank.

You can have a single checkbox:
<input name="Terms" type="checkbox" />

<label id="Terms">I accept the terms and conditions</label>
Or multiple items, where the user can choose several:
<h1>Interests:</h1>
<input name="Interests" type="checkbox" value="Movies" />
<label id="Interests">Movies</label><br>
<input name="Interests" type="checkbox" value="Theatre" />
<label id="Interests">Theatre</label><br>
<input name="Interests" type="checkbox" value="Concerts" />
<label id="Interests">Concerts</label><br>
Note that the name of each checkbox in the group is the same, and the value defines
the content of each checkbox. If you do not do this carefully, the form will submit, but the
recipient won’t be able to understand the content. Here is an example of a form gone
bad:
<label id="Name"> Name</label>

<input name="Name" type="text" />
<h1>Interests:</h1>
<input name="" type="checkbox" value="Interests" />
<label id="Interests">Movies</label><br>
<input name="" type="checkbox" value="Interests" />
<label id="Interests">Theatre</label><br>
Resulting email to website owner:
Name: Joe Bloggs

: Interests
See how the label is missing, because we did not give the field a name. We also
cannot tell if the user ticked Movies or Theatre, as we gave both fields the same
value.
Note that for checkboxes and radio buttons, the label is placed after the field.
Radio buttons
Radio buttons have the same structure as checkboxes but are only presented in
groups, never singly. While checkboxes allow for multiple items to be selected, radio
buttons only allow for one item in the list to be selected.
<h1>Mailing<h1>
<p>How often would you like us to mail you regarding upcoming
events?</p>
<input name="Mailing" type="radio" value="Daily" />
<label id="Mailing">Daily</label><br>
<input name="Mailing" type="radio" value="Weekly" />
<label id="Mailing">Weekly</label><br>
<input name="Mailing" type="radio" value="Monthly" />
<label id="Mailing">Monthly</label><br>
<input name="Mailing" type="radio" value="Never" />
<label id="Mailing">Never</label><br>
It is essential that all radio buttons in the group have the same name, otherwise the
user can select multiple radio buttons instead of just one. In the above example,
name="mailing" groups all the radio buttons together.
Submit button
Clicking on the Submit button causes the form data to be submitted back to the
webserver for processing.
<input name="submit" type="submit" value="Submit enquiry" />
You can change the wording on the button by editing the value attribute.
Processing form content
When the user presses the submit button, some or all of the following happen.
Validation
Has the user filled in the required fields?
If so, send the data.
If not, request the data before sending.
You will add validation to this form later in this course (See Learning Unit 6).
Submission processing
The <form> tag attribute action="submit.php" links to a server-side script, which is an

application on the webserver that handles the incoming data. It is not possible to build a
completely functional web form without using a server-side script. Server-side scripting
is outside the scope of this course. You can use PHP, ASP or other server-side scripting
language to build the form processor. Most webservers have a default script that you
can use.
Data delivery
Usually the form data is sent to the website owner or person responsible for replying. It is
also a good idea to also send the form data to the user who submitted it, for their own
records.
Data capture
Some form processors also save the incoming data to an online database. This is a
good idea, as the email to the website owner could easily get lost, and it is hard to find
the details of previous submissions if they are not in a database.
Activity 12 Create a form
Purpose:
To create an HTML form for an event publicity company’s website.
Instructions:
The client wants to gather information about users. They have provided you with the
following basic requirements:
• First and last name
• Email address
• Province – the company only operates in KwaZulu-Natal and Gauteng
• Interests – users must select one or more of movies, theatre, concerts, and
must be able to type in their own interests as well
• Mailing – users must choose either daily, weekly, monthly or never receive
mails
The UX (User Experience) specialist has defined the form for you as follows:
Labels and headings Field type Option values
Personal Details Heading 2
First Name Text
Last Name Text
Email Text
Province Select KZN – KwaZulu-Natal
GP – Gauteng
Interests Heading 2
Interests Checkboxes Movies, Theatre, Concerts
Other Interests TextArea
Mailing Heading 2
How often would you like us to mail Paragraph
you regarding upcoming events?
Frequency Radio group Daily, Weekly, Monthly,
Never
Submit your details Submit
button
Limitations of HTML 5
At the time of writing (October 2012), HTML 5 is in draft form, and is therefore not an
official standard (w3schools.com, n.d.). This means that some features of HTML 5 do
not currently work in all web browsers (see the section on cross-browser compatibility).
However, this will improve over time.
1. Recommended Additional Reading
Visit www.w3schools.com for a comprehensive review of each HTML element,

including the HTML 5 elements.
Use the online editor and preview system at

http://www.w3schools.com/html/html_examples.asp.
This will enable you to deepen your understanding of the HTML elements and
syntax.
3. Interactive Work Space

In addition, take the w3schools quiz at http://www.w3schools.com/html/html_quiz.asp
SECTION FIVE: CASCADING STYLE
SHEETS
CONTENTS
SECTION FIVE: CASCADING STYLE SHEETS

5.2 READING
5.3 INTRODUCTION
5.4 RELATIONSHIP BETWEEN HTML AND CSS
5.5 GENERAL SYNTAX OF CSS
5.6 CODING OF CSS
5.7 CONCLUSION
75
Web Page Design 102
• Become familiar with the CSS 3 syntax

• Understand the difference between external, internal and inline styling and the
way that these can be integrated
• Understand how to integrate CSS with HTML
77
Web Page Design 102
5.3 Introduction
Understanding CSS
These questions are key

The integration of HTML and CSS is a difficult concept to grasp. Go through the
following questions carefully, then keep returning to them as you go through the
actual material.
To understand CSS, focus on the following:

• The relationship between HTML and CSS
What does the HTML code do, what does the CSS code do?
• Location
Where do you put the CSS code?
• Syntax
How do you write CSS code?
• Combining HTML and CSS

How do you connect a CSS style to an HTML element?
The relationship between HTML and CSS
Remember, Cascading Style Sheets (CSS) are used for styling (see page 33). To
understand the separation between structure (HTML) and design (CSS), consider the
CSS Zen garden.
This site contains a single page of HTML.
Designers from around the world are invited to submit a CSS style sheet and
associated images.
You can load the site with any of the style sheets, and see a completely different
presentation each time. In each presentation, the underlying HTML file has not been
changed in any way.
CSS Zen Garden HTML page CSS Zen Garden sample page (with CSS)
http://www.csszengarden.com/zengarden-sample.html http://www.csszengarden.com/
Three CSS style sheets applied

Figure 19: CSS Zen Garden
CSS code locations
There are three locations for CSS styling:

• External style sheet
This provides styling for HTML elements across all webpages in the website. This
approach requires a separate CSS file and then a line of code in the HTML file that
fetches the CSS file.
• Internal style sheet

This provides styling for HTML elements within a specific webpage. All that is
required is a code block in the head of the specific page.
• Inline styling
This provides styling for the specific HTML element only. All that is
required is a code snippet inside the HTML tag.
Syntax
General syntax
CSS attributes are presented as attribute:value pairs, separated by a colon.

Each pair is separated from the next using a semi-colon.
p {font-family: Tahoma; font-size: 12pt; color: blue}
• The HTML tag that has been styled is the paragraph <p>
• There are three attribute:value pairs
• The font has been set to Tahoma
• The font size is 12 points
• The text colour is blue
External style sheet coding
The external style sheet concept requires:

• The style sheet
A plain text file with the extension .css
• The HTML file containing a link to the style sheet

The HTML file is loaded in the browser, and then causes the browser to
download the style sheet as well
Example style sheet – style.css:

body {background: blue;}
h1 {color: red;}
Example webpage – index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Linking a style sheet to an HTML page in Expression Web

Preparation:
1. Create the style sheet
2. Save in the same folder as the HTML file, or in a css sub-folder
Link:
1. Open the HTML page in Expression Web

2. Go to Format / CSS Styles / Attach style sheet
3. Browse to the style sheet
4. Press OK
Internal style sheet coding
This particular page will have a black background and all Heading 1 headings will be
green.
<!DOCTYPE html>
<html>
<head>
body {background: black;}
h1 {color: green}
</style>
</head>
Inline styling
On this specific page, all Heading 1 headings will be green, except for the first one,
which will be grey.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
body {background: black;}
h1 {color: green}
</style>
</head>
<body>
<h1 style="color: grey;">This is a heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam

mollis libero sit amet nunc tempus sed cursus velit consectetur.</p>
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam

mollis libero sit amet nunc tempus sed cursus velit consectetur.</p>
Cascades and precedence
In the code block immediately above, the HTML page has an external style sheet, an
internal style sheet and inline styling. In each case, the colour of the heading is
specified, and they conflict with one another.
How does the browser resolve which colour to use?
1. As the browser loads the HTML page it encounters the link to the external style
sheet, and loads that file. At this point, all Heading 1 headings will be red.
2. On the very next line of the HTML file, the browser encounters the internal style
sheet. At this point all Heading 1 headings will be green.
3. Finally, the browser encounters the inline styling encounters the inline styling
on the first heading, making that one grey. The rest remain green.
As can be seen from this example, the general rule is that the last-encountered style
attribute is the one that is applied.
There are three exceptions to this rule:
Importance overrides
H1 {color: blue !important}

Because !important has been added to the CSS font colour attribute, all Heading 1
elements will be blue, even if there is another CSS code somewhere later in the
document that defines the colour as red.
Specific styling for specific elements
Any HTML element can be given different styling. For example:
Style sheet:
h3 {color: blue}
.golden {color: gold}
HTML code on the webpage:
<h3>This heading will be blue</h3>

<h3 class="golden">This one will be gold</h3>
Child classes
Nested containers can have different styling.
Style sheet:
h3 {color: blue}
aside h3 {color: gold}
HTML code on the webpage:
<h3>This heading will be blue</h3>

<aside>
<h3>This one will be gold</h3>
</aside>
Combining HTML elements
You can apply a single set of CSS attributes to multiple HTML tags. In the following
example, all the heading levels are styled globally, and then individually.
h1, h2, h3, h4, h5, h6, h7 {font-family: Tahoma}
h1 {font-size: 28pt; color: red}
h2 {font-size: 24pt}
h3 {font-size: 20pt}
ID and classes in CSS
An ID may only be used once per page.
A class may be used many times on the same page.
<div id="header"></div>
<h1>Heading</h1>
<p class="quote"></p>
In the above example, there is only ever 1 header on a page, so an ID is appropriate.
You can have several quotes on one page, so the quotes need to use class, not ID.
In the CSS file, these 3 elements are referred to differently:
#header {styling here}

H1 {styling here}
.quote {styling here}
Notice:
• IDs have a # in front of the name
• HTML elements have no character in front of the name
• Classes have a dot in front of the name
Combining HTML and CSS
CSS styling can be added to the following elements:

• Any HTML element
You can style the body, paragraph, list, link, image or any other HTML element.
• Any CSS element

CSS provides two additional containers, DIVs and SPANs.
CSS containers
A DIV is a container, but it is part of the CSS code set, not the HTML code set. It
creates a block element that, by default, fills the entire width of the container that it is in.
<body>
<div><img src="images/logo.png"></div>
The above div creates a block that spans the entire width of the page. It contains the
logo image.
A SPAN is an inline container. It is, by default, only the width of its content.
<p>This is a <span>really</span> important concept</p>
The above span is only as large as the word “really”.

DIVs and SPANs can be styled in any manner (external, internal or inline styling).
Margins and Padding
Margins create space outside the HTML

container.
Padding creates space inside the HTML
container.
You can specify one value for all sides, or
specific values for each side of the container.
The relationship between margins and
padding, and container height and width is
known as the box model.
Margins and padding are commonly set in
pixels.
You can specify a single value for all
sides. Figure 20: Box model
p {margin: 10px; padding: 5px;}

Or a single side…
p {margin: 10px; padding-left: 5px;}
Or different settings for each side, in this order - top, right, bottom, left…
p {margin: 10px 0px 5px 0px; padding-left: 5px;}
Floats
Block containers (such as DIVs and paragraphs) occupy the full width of the space
allocated, even if you make them less than 100% wide. The main method of placing
HTML elements next to a block element is to float it to the left or right. The most
common reasons to float containers are:
• To wrap text around an image
• To position sidebars
Vertical positioning of floated objects
The vertical position of the floated object is determined by the position of its code
relative to the rest of the page.
Figure 21: Vertical alignment of floats
<h1>Main heading</h1> <p><div

class="quote">Lorem ipsum dolor sit
amet … </div>Maecenas eget diam
risus, ut ullamcorper diam … </p>
In the above example, note how the quote DIV is inside the paragraph container, and
how it lines up vertically with the top of the paragraph.
<h1><div class="quote">Lorem ipsum
dolor sit amet … </div>Main
heading</h1> <p>Maecenas eget diam
risus, ut ullamcorper diam … </p>
In this example, the quote is in the H1 container, and the vertical position of the quote
box has changed.
Activity Floating
Purpose:
Explore the purpose of floating HTML elements.
Colours
Colour systems
Colours on websites are specified using Named Colours and RGB (Red, Green, Blue)
values. There are only 147 named colours, but 16.7 million RGB values! Most of the
time, the Graphic Designer will specify the colours in RGB, as this is the most versatile.
If the Graphic Designer specifies colours in CMYK or another colour system, then they
do not understand colour for the web. Only HTML named colours and RGB values are
suitable.
Both colour systems can be applied using HTML and CSS.
Named colours
<p style="color: red"> Lorem ipsum dolor sit amet.</p>
RGB values
RGB values are usually given in hexadecimal (see #DC143C below) or, less
commonly, as three numeric values.
<p style="color: #DC143C"> Lorem

ipsum dolor sit amet.</p>
Access colour pickers in HTML
1. Select the text item

2. Click on the Font Colour tool down arrow
to access the colour picker
Figure 22: Colour picker

3. Select:
• Standard colours from a palette
• Enter the RGB values in hexadecimal
• Enter three values for RGB
• Select a colour from the visual colour selector tool
• Use the eyedropper to pick a colour from anything visible on the screen
Access colour pickers in CSS
1. Type color:
2. Open the style sheet
3. At the appropriate location,
type color:
4. A drop down list of named colours
will appear
5. Double click Pick color… at the top
of the list
6. Select from:
•Standard colours from a colour
wheel
Figure 23: CSS colour picker
• Click on Custom to enter RGB
values
• Use the eyedropper to pick a colour from anything visible on the screen 7. Press OK
Further resources
You can see the named colours here:

http://www.w3schools.com/html/html_colornames.asp
You can see some sample RGB colour codes here:
http://www.w3schools.com/html/html_colorvalues.asp
You can explore colour palettes here: http://kuler.adobe.com
Borders
Borders can be placed all the way around the element…

<h1 style="border: solid 1px black">This is a heading</h1> Or
just on one side…
<h1 style="border-bottom: solid 1px black">This is a heading</h1> Or
on several sides…
<h1 style="border-bottom: solid 2px black; border-top: solid 1px
black;">This is a heading</h1>
• The positions are top, right, bottom, left
• The thickness of the border is defined in pixels
• The style is solid, dotted or dashed
• The colour is any HTML colour code
Activity Border styling
Purpose:
To implement border styling of various HTML elements.
Backgrounds and Shading
Any element can be filled with a graphic or a single HTML colour, or a CSS gradient
(see below).
A background image is usually a seamless repeating tile.
This is a small graphic that, when placed next to itself forms a seamless block (does not
show the borders of each repeated image). This is useful because webpages are a
variable width and length, so we cannot create a single, big image to “fill the screen”.
Figure 24: Seamless tiling – the border shows the boundary of the small image that has been
repeated.
<div style="background: url('images/bg5.gif') repeat">

…
</div>
You can also repeat background graphics in a single direction (e.g. across the page
only).
<div style="background: url('images/bg5.gif') repeat-x">

…
</div>
You can add a background color instead of, or in addition to, a background image. In the
following example, the image will repeat across the page only, and the rest of the
container will have a light grey background (#f4f4f4):
<div style="background: url('images/bg5.gif') repeat-x #f4f4f">

…
</div>
Path issues
In the above example, the image (bg5.gif) is in a project subfolder. The html files are in
/myproject and the image files in /myproject/images
Because we are using relative paths, you do not need to reference myproject when
referring to the image in the images folder.
If we were to move the background image formatting to an external style sheet, the
above code would no longer work.
CSS file: /myproject/css/template.css
.wrapper {background: url('images/bg5.gif') repeat-x #f4f4f}

HTML file: /myproject/index.html
<div class="wrapper">
…
</div>
Here is why
The background image path is now relative to the CSS folder path. The web browser
will try to load the image from /myproject/css/images/bg5.gif – the image folder location
is wrong!
The correction is
.wrapper {background: url('../images/bg5.gif') repeat-x #f4f4f}
The ../ says “Go back one level from /myproject/css/ to /myproject. Then go
forward to the /myproject/images folder and fetch bg5.gif”
Activity Adding a repeating background
Purpose:
To learn how to add backgrounds to HTML elements.

Text Formatting
Character formatting
The following styling can be applied to anything from a single character of text to an
entire website.
Font
You can specify a font for any HTML element. The font must be installed on the
user’s computer, which restricts your selection to a small set of fonts.
<p style="font-family: Verdana">…</p>
You can specify a set of fonts so that, if the first is not installed, the second is
selected.
<p style="font-family: Verdana, Arial, sans-serif">…</p>
Finally, you can integrate Google Web Fonts to select from over 560 fonts (and
growing). This technique works whether the font is installed on the user’s computer or
not. See http://www.google.com/webfonts.
Text size
The size of the text can be set in points, pixels, ems or percentage of base text size.
For the purposes of this course, we will use pixels.
The default text size on most web browsers is 16px. Headings will therefore need to be
larger than 16px and fine print smaller than 16px. External or internal style sheet
example:
h1 {font-size: 28px}
Inline styling example:
<div style="font-size: 22px">…</div>
Text colour
This uses the standard colour specifications and insertion method (see 89). The
CSS code is:
<p style="color: #CABDAD">…</p>

Underline
This is mostly used to remove the default underlining on hypertext links.

a {text-decoration: none}
Character spacing
Letter spacing increases or decreases the space between characters in the text
h2 {letter-spacing: 10px}
Word spacing increases or decreases the space between words in the text
h2 {word-spacing: 10px}
Text shadow
This specifies the shadow effect added to text. It is mostly used on large text sizes such
as headings. The two pixel values define the offset (right, then bottom). 1px 1px means
that the show starts 1px to the right of the text, and 1px below the text. The hexadecimal
colour value sets the shadow colour.
h1 {text-shadow: 1px 1px #c0c0c0;}
Text block formatting
The following styling can be applied to any block of text (paragraph, div, span, table
cell etc).
Alignment
This applies to text and images within a block container.
h1 {text-align: center}
p {text-align: justify}
.footer {text-align: right}
Note the American spelling of centre.
Line height
This functions in a similar way to line spacing in MS Word. Use this CSS style to
create space between lines of text within a block.
Explore text formatting further at http://www.w3schools.com/css/css_text.asp
Activity Text styling
Purpose:
Review general CSS concepts and apply character and block level text styling.
Perform the following tasks:
Figure 25: Task 17 result

Links
Hyperlinks can have several states. The order of link styles in the style sheet is
important. Add them in the following order:
• A link
This is a normal hyperlink that has not been visited, and is not being hovered on.
• A visited link
This is a link that has been visited before using the current web browser (and the web
browser has the link in the browsing history). The purpose of this link state is to help
users identify webpages that they have already viewed.
• A hover link
This is the link state when the mouse is over the link.
• An active link
This is the link state as the user clicks on it.
CSS styling is commonly used to remove underlines on menu items and create hover
effects on menus.
a {text-decoration: none; background: white; color: blue}
a: hover {background: green; color: white; font-weight: bold;}
In the above example, links appear as blue text on a white background.

When the user hovers over the link, the background goes green, the text goes white
and bold.
Lists
Adjust bullet style
ul { list-style-type: x}
x = circle, disk (default), square
Adjust number style
ol { list-style-type: x}
x=
• lower-alpha, upper-alpha
• lower-roman, upper-roman
Example:
ul {list-style-type: square;
margin: 0px;
padding: 0px;}
li {margin: 2px 0px;

padding: 0px;}
</style>
Discuss with the person sitting next to you:
1. Why was there a difference between the bullet position in the Expression Web
preview and in the actual web browser? .............................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
2. What are the implications for design work precision for items other than
bullets? ...............................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
Answers
1: All Design previews display discrepancies between the preview screen and the
actual display in a web browser.
2: You cannot really trust the preview in Expression Web. You really do have to
save the changes and preview them in at least one web browser.
Table styling
Review HTML tables

This section covers the CSS styling of HTML tables. Before you begin, review the
HTML code for tables on page 62.
Figure 26: Table styled using CSS

Tip:
Use the notes above and the resources at www.w3schools.com
Instructions:
1. Open table-styling.html in your web browser. Note the lack of styling.

2. Open table-styling.html in Expression Web.
3. Review the table code and ensure that you understand what the various
elements do.
4. Create an internal style sheet in the head of the file.
5. In the internal style sheet, do the following (see Figure 26)
a. Set the table to fill 100% of the width of the screen
b. Add a 5 pixel solid blue border to the table
c. Add 5px of padding to the table headings and table cells
d. Add a 1 pixel solid black border to the table headings and table cells
e. Add a light grey (#f4f4f4) background to the table headings
f. Add a 2 pixel solid black border to the bottom of the table headings
Note that the borders between the table cells are not correct – some of the borders that
are meant to be 1px thick are actually 2px. Discuss this issue in class and work out what
is wrong and why. Apply a CSS attribute that fixes this issue.
Hint: Research border-collapse.
Table cell vertical alignment
By default, cell content aligns to the center of the cell vertically. However, most of the
time, we would want the text to align to the top of the cell. To do this:
td {vertical-align: top;}
Image Styling
By default, images are aligned to the left,

with the text starting immediately to the right
of the bottom right hand corner.
We use the CSS float attribute to flow the
text around the image.
We use other CSS attributes to style the
image.
Figure 27: Default image positioning
Global vs Specific Styling
Consider the following CSS in the external style sheet.

All paragraphs will be justified. Usually this is appropriate.
However, paragraphs in the sidebar should not be justified, as the spacing looks
strange.
Here is the code for the sidebar (HTML):
<div class="sidebar"><p>This is some text</p></div>

To set paragraphs in the sidebar to left aligned, use the following code:
.sidebar p {text-align: left}
Note that the second line specifies “paragraphs inside the sidebar container”.
The order is important. The sidebar code must appear in the CSS file after the
general paragraph code.
Consider a site that has a blue sidebar, a white content area and a black footer.
Each of these containers contains hyperlinks. The CSS code would be:
a {text-decoration: none; color: green}

.sidebar a {color: white}
.footer a {color: yellow}
• The first line sets global parameters (all links have no underline).
• The first line also sets the default link colour to green. This will affect the links
in the main content area.
• The sidebar and footer lines set specific link colours for those areas.
Overriding Block Properties
Many HTML elements have similar block or inline properties to divs and spans.
For example, an H1 is a block element – no text can appear alongside an H1. A link is
an inline element.
In all cases (CSS and HTML), the element’s default characteristics can be overridden
using CSS.
Consider a menu made up of a bulleted list. Each menu item hyperlink is as long as
the text on that line. This is because links are inline elements. This creates the
following problem.
<style type="text/css"> Home

nav a {border: solid 1px black} About Us
</style> Tips
<nav>
<ul>
<li><a href="index.html">Home</a>
<li><a href="about.html">About Us</a>
<li><a href="tips.html">Tips</a>
</ul>
</nav>
The problem is that “Home”, “About Us” and “Tips” are different lengths, and the
menu items do not look neat.
The solution is to transform the hyperlinks from inline elements to block elements, so that
they all occupy the full width of the sidebar, no matter how short the text of each link.
<style type="text/css"> Home

nav a {
border: solid 1px black; About Us
display: block;
} Tips
</style>
<nav>
<ul>
<li><a href="index.html">Home</a>
<li><a href="about.html">About Us</a>
<li><a href="tips.html">Tips</a>
</ul>
</nav>
CSS 3 formatting
CSS 3 has several new features that make the production of websites a lot easier.
Unfortunately, these features are quite new, and therefore not all web browsers
support them, or support them in exactly the same way.
Rounded corners
Historically, rounded corners were achieved using a set of images. In CSS 3,

rounded corners are now far easier to implement.
Unfortunately, the code for rounded corners is not yet completely standardised
across all web browsers.
See http://caniuse.com/border-radius
This is the most basic implementation, that will

work in many, but not all browsers.
.container_name {
border: solid 1px blue;
border-radius:8px;
}
If you use the following online tool, you can

generate CSS code that will create more
sophisticated rounded corners that work in all
modern browsers.
Visit: http://border-radius.com/ Figure 28: CSS rounded corner generator
Gradients
CSS 3 gradients also suffer from cross-browser

compatibility issues.
See http://caniuse.com/#feat=css-gradients You can
generate a gradient using this online generator:
http://www.colorzilla.com/gradient-editor/
1. Recommended Figure 29: CSS 3 gradient

Additional Reading
Visit www.3schools.com for a comprehensive review of each CSS element, including

the CSS 3 elements.

http://www.w3schools.com/css/css_examples.asp.
This will enable you to deepen your understanding of the CSS elements and syntax.
Web Page Design 102
SECTION SIX: JAVASCRIPT
CONTENTS
SECTION SIX: CASCADING STYLE SHEETS

6.2 READING
6.3 INTRODUCTION
6.4. THE ROLE OF JAVASCRIPT
6.5 JAVASCRIPT CODE DEVELOPMENT
6.6 INTEGRATING JAVASCRIPT INTO YOUR WEBSITE
6.7 CONCLUSION
Web Page Design 102
• Understand the role of JavaScript

• Add simple JavaScript codes to a webpage
• Understand JQuery
• Integrate JQuery snippets into a webpage
77
Web Page Design 102
The role of JavaScript
JavaScript adds a third programming language to those covered already. Just as HTML
has a purpose (structure) and CSS has a role (styling), so too does JavaScript
– mainly client-side page manipulation/interactions.
Client-side interactions are activities that happen in the web browser without further
interactions with the server.
JavaScript Code Development
There are several ways to develop JavaScript code for your site.
• From scratch
You can write your own JavaScript code from scratch. However, unless your
requirements really are unique, you are re-creating code that already exists.
• Download code snippets

As an alternative, you can download other programmer’s code snippets from
sites such as Dynamic Drive (http://www.dynamicdrive.com/. However, each
programmer’s code will be structured differently, so there is still quite a lot of
effort required to understand each specific code snippet.
• Build your own code on top of a supporting library

Instead of rewriting code that already exists, you can simply load “standard”
code used by many web developers. Once you have loaded that code, you can
customise it to suit your specific needs.
JQuery Code Library
By far the best approach is to use the JQuery code library (http://jquery.com/) and
example scripts. JQuery saves a lot of development time, is well documented and
supported by many users, and all code produced using JQuery will be similar,
reducing your effort to understand and integrate it.
According to builtwith.com (2012), JQuery is used on 50% of the top 10,000 sites
in the world.
Integrating JavaScript into your Website
JavaScript files are integrated into the website in the same way as CSS:
• External Javascript
Separate file, usually in a sub-folder called js
• Internal JavaScript
A block of code in the <head>
• Inline JavaScript
A code snippet inside an HTML element
Most commonly, the approach combines a:

• Call an external JavaScript
• Link the external JavaScript to an HTML element
The code for calling an external Javascript is placed in the <head> container:
<script language="javascript" src="js/name.of.js"></script>
Integrating JQuery into your website
Your website needs to call an external JavaScript file that contains the JQuery
library. There are a variety of methods. The simplest is to fetch the script from the
Google API library. A single line of code in the <head> of the page is all that is
needed.
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j
s"></script>
Note: On campus, you may need to login in the browser in order to fetch the JQuery
library from Google.
©
Case study 1: Form validation
Consider the following activity on

a standard website:
1. A user fills in a form
2. They press submit
3. The form content is sent to the
webserver
4. The webserver detects that a
required field was left empty
5. The webserver sends back the
same form, and asks the user to fill
in the required field. Unfortunately, Figure 30: JavaScript alert box and inline
the form is now blank and they validation alert
have to fill in everything again!
Now look at the way that this is handled using JavaScript:
1. A user fills in a form

2. They press submit
3. The JavaScript is triggered and the
form fields are reviewed
4. Because the required field was left empty, the JavaScript alerts the user
that they need to fill in the field
5. The user fills in the field and tried to submit again
6. This time the submission is successful
7.
Activity 23 Add required field validation to a form
Purpose:
Understand how to integrate a JQuery code snippet into an existing website.
Instructions:
The User Experience expert has reviewed the website development and is
concerned that the Contact Me form is not user friendly. Specifically, the required
fields do not validate. This means that users can submit incomplete form data.
As the web developer, you have decided to use a JQuery snippet to manage
form validation.
You can use JavaScript to obtain the file modification date and display it
automatically.
<div class="footer">
<script>
var theDate=new Date()
document.write("©" + theDate.getFullYear())
document.write(" Company X | Last modified: ")
var theModifiedDate=new Date(document.lastModified)
document.write(theModifiedDate.toDateString())
</script>
</div>
• The two vars set up variables to hold the current date and the date the file
was modified.
• The document.write elements display the text and formatted variables on the
page.
• document.lastModified fetches the update date from the file properties.
• The toDateString() function displays the date in a neat, human-friendly
format.

Visit www.3schools.com for a comprehensive review of each JavaScript element.

http://www.w3schools.com/js/js_examples.asp.
This will enable you to deepen your understanding of the JavaScript elements
and syntax.
REFERENCES
www.w3schools.com
www.codeacademy.com
www.developers.google.com
www.google.com
HTML and CSS: Design and Build Websites, by Jon Duckett
JavaScript and JQuery: Interactive Front-End Web Development, by Jon Duckett
Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics,
by Jennifer Niederst Robbins
Communicating Design: Developing Web Site Documentation for Design and Planning, by
Dan M. Brown
Universal Principles of Design, Revised and Updated, by William Lidwell, Kritina Holden
& Jill Butler

Study Guide - Web Page Design 102

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

Study Guide - Web Page Design 102

Uploaded by

Copyright:

Available Formats

DIPLOMA IN INFORMATION TECHNOLOGY

WEB PAGE DESIGN 102

SECTION ONE:WEB FUNDAMENTALS: INTRODUCTION .......................................................................................12

SECTION TWO: WEB DEVELOPMENT FUNDAMENTALS .......................................................................................28

SECTION THREE: INTRODUCTION TO MICROSFT EXPRESSION V4.......................................................................40

SECTION FOUR: HYPERTEXT MARKUP LANGUAGE ..............................................................................................60

SECTION FIVE: CASCADING STYLE SHEETS ............................................................................................................75

5.1 LEARNING OUTCOMES ................................................................................................................................77

SECTION SIX: JAVASCRIPT .....................................................................................................................................75

Ø HTML and CSS: Design and Build Websites, by Jon Duckett

Ø JavaScript and JQuery: Interactive Front-End Web Development, by Jon Duckett

INTRODUCTION TO THIS MODULE

The broad aims of this module are to:

• Rapid technological change

• Increasing complexity of websites

• Sweeping changes to the business models of those engaged in web

This course is an introduction. It is therefore impossible to fully describe all aspects of

Contents and Structure

Section 1: Web Fundamentals

In this Chapter we expose students to a broad overview of the principles and

Section 2: Web Development Fundamentals

In this Chapter we demonstrate an understanding of how the web works (from

Section 3: Introduction to Expression Web v4

In this Chapter Microsoft Expression in introduced as the Software that is used

Section 4: Hyper Text Markup Language v5

Section 5: Cascading Style Sheets

Learning Outcomes Read/Research and write additional

Important Concepts Test Your Knowledge

Solution to Test Your Knowledge

Ø HTML and CSS: Design and Build Websites, by Jon Duckett

Ø JavaScript and JQuery: Interactive Front-End Web Development, by Jon Duckett

by Jennifer Niederst Robbins

Blog on Internet marketing: http://www.gottaquirk.com/

Recommended Digital Engagement and Activities :

SECTION ONE: WEB FUNDAMENTALS

SECTION ONE: SOCIAL ASPECTS OF IT:

Web Page Design 102

1.1 LEARNING OUTCOMES

• Explore reasons to build a website;

• Identify the elements that make a successful website.

• Why have a website?

Why Build A Website?

• Direct selling (e.g. an online store)

Elements of a Successful Website

A clear sense of purpose, communicated effectively to specific audiences

Content and functions to meet audience and organisation needs

Content includes text, images and videos. The content needs to be

HITS – How Idiots Track Success (Paine, 2009)

Website owners and marketers used to use “hits” as a measure of success.

KPI – Key Performance Indicators

These are numerical indicators of success. Here are some examples:

Table 1: Examples of KPI data

KPI January February March April

Here is an example of a carefully planned webpage:

Audience Audience’s Organisation’s Content/ KPI

ROI – Return on Investment

The Right Proportion of Design, Content and Functions

The Fundamentals Done Right

The following items are essential no matter what kind of site:

1. Recommended Additional Reading

1. Recommended Digital Engagement and Activities

Your institution is considering revising their website. Imagine you are

1. Go to the website for your college