1621ICT Web Design and

Development

HTML5 and CSS3 Illustrated

Units A-L and N:

Review
 Objectives
• Section 1
• Discuss the three parts of the final exam
• Discuss the relative weightings of each part
of the exam
• Discuss what is expected in each section of
the final examination
• Section 2
• Walk through the objectives and summaries
of each of the Units from week 1 to 11
2
 Final exam details
• Please check your learning@griffith
student portal for the date, time, and
venue information for the exam
• Important: Sometimes examination times
change. Please check your
learning@griffith portal daily during the
exam period to ensure that you have the
most up to date information for the exam

3
 Final exam details
• The final exam will be worth 100 marks (40% of the total
marks available for the course)
• To gain an overall grade higher than a PASS, you must
achieve at least 40% on the final exam.
• There will be three sections in the final exam
• Section 1:
• Multiple choice (50 marks)
• Section 2:
• Short answer (25 marks)
• Section 3:
• Write HTML and CSS code (25 marks) 4
 Final exam details
• Multiple choice questions (50 marks total)
• Answer these questions on the mark
sense sheet provided
• Use the appropriate pencil (bring your
own)
• Choose the most correct answer

5
 Final exam details
• Example multiple choice question (1 mark)
Q: A search engine can find all the files
in your Web site via a _______ file
a) robots.txt
b) robots.html
c) sitemap.txt
d) sitemap.html

6
 Final exam details
• Example multiple choice question (1 mark)
Q: A search engine can find all the files
in your Web site via a _______ file
a) robots.txt
b) robots.html
c) sitemap.txt 
d) sitemap.html

7
 Final exam details
• Short answer questions (25 marks total)
• Answer these on the examination paper
in the space provided
• Make sure that you address all parts of
each question
• Learn definitions for common terms
• Learn how HTML tags are used
• Learn how css properties and styles are
used 8
 Final exam details
• Example short answer question (2 marks)
Q: a) What does CSS stand for
b) What is CSS used for?
Answer
a) _____________________________
b) _____________________________

9
 Final exam details
• Example short answer question (2 marks)
Q: a) What does CSS stand for
b) What is CSS used for?
Answer:
a) Cascading Style Sheets
b) CSS handles the look of the web page

10
Final exam details
• Write HTML and CSS code section (25 marks total)
• Write HTML and/or CSS code
• Practice for this by writing code out by hand
• Don't forget details like:
• !doctype
• html and /html tags
• meta tag
• title tag
• head and /head tags, body and /body tags
• closing tags (HTML) and opening and closing braces
(CSS)
• Appropriate attributes for HTML tags (eg.
alt="description of image" for img tag
• Including a reference to the CSS file in the HTML head 11
Section 2

• Review units A-L and N covered

in weeks 1 - 11

12
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit A:
Preparing to Create a Web Site
Objectives
• Discuss the world wide web, Uniform
Resource Identifiers, the internet, web
pages, web sites, and Web browsers
• Discuss the required preparation for
creating a website
• Assemble a project plan
• Create a storyboard
• Implement Web accessibility
standards 14
Objectives

• Evaluate Web site usability

• Manage Web browser compatibility
issues
• Practice good file management
• Configure your FTP/SSH client
• Upload Web site files

15
Summary

• Prior planning is a crucial component

in designing a good Web site
• When planning a Web site, the
designer must consider the uses of the
site and the target audience
• When planning a Web site, steps can
be taken to make the site more
accessible, more usable, and
functional using different user agents
16
Summary

• Web documents are developed in a

local computer and are transferred to a
Web server for publication
• Proper file management is key in
preventing erroneous publication of
Web pages
• Documents can be transferred from
the local computer to the Web server
using FTP and FTP clients
17
 1621ICT Web Design and
Development
HTML5 and CSS3 Illustrated
Unit B:
Getting Started with HTML
Objectives

• Discuss the role of servers and clients

• Discuss Web addresses
• Discuss getting started with HTML
• Discuss common terms
• Discuss the history of HTML
• Compare HTML and XHTML
• Create a HTML document
19
Objectives
• Learn how to add a head and body to
a HTML document
• Learn how to add text to a web page
• Learn how to preview a web page
• Learn how to use one-sided tags
• Discuss how to validate HTML5 code

20
Summary

• HTML is a coding language which has

standards but is constantly under
transformation
• An HTML document is a text
document which defines a structure of
the text to be displayed
• The structure of the text to be
displayed is defined by the use of tags

21
Summary

• Tags can include attributes which

specify their properties
• Two-sided tags enclose the text that
they relate to
• One-sided tags are for specific
occurrences
• Problems in a Web page can be
identified by rendering it in a Web
browser or by validating the code
22
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit C:
Getting Started with CSS
Objectives
• Discuss the origins of the internet and
ARPANET
• Assess style rules
• Create an embedded style sheet
• Implement an id selector
• Implement the div element
• Implement a class selector

24
Objectives
• Create an external style sheet
• Link to an external style sheet
• Validate your CSS code

25
Summary
• CSS is a coding language that adds
style information to HTML elements
• A style is defined by style rules
• A style rule contains:
• Selectors for the elements that are to
have a style applied
• Name-Value pairs that specify how that
elements should be styled
• The HTML div element can be used to
group elements 26
Summary
• Different types of selectors affect
different groups of elements
• Type selector:
• applies to all HTML elements of a
specific type, such as h1 elements
• id selector:
• applies to a single element having a
specific unique id
• class selector:
• applies to all elements having a
specific class attribute
27
Summary
• Embedded style sheets are included in
the HTML code
• Suitable for single page Web sites
• External style sheets can be linked to
multiple Web pages
• All the Web pages can be changed by
changing a single style sheet
• CSS code can be validated against
CSS rules
28
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit D:
Formatting Text with CSS
Objectives
• Assess Web fonts
• Declare a font family
• Declare font sizes
• Implement bold and italics
• Change font colors
• Change background colors
• Use special characters
• Provide alternative style sheets 30
Summary
• It is important to implement fonts so
that they will be displayed consistently
on different user agents
• Font stacks are declared using the
font-family property
• span element: generic element used
to isolate a portion of another element
• Used to format the font of only a specific
portion of the whole element
31
Summary
• Different aspects of font can be set
using CSS properties:
• font-size property: set the font size
• font-weight property: make font bold
• font-style property: make font italic
• In CSS colors can be specified using
names, rgb, hexadecimal, or hsl
• color property: sets font color
• background property: sets background
color
32
Summary
• Character references are used to
identify characters that may be
misinterpreted as computer instructions
• They have the format &code;
• You can specify different style sheets for
different user agents
• Using the media attribute of the link
element to the stylesheet

33
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit E:
Inserting and Working with Links
Objectives
• Understand links
• Create relative links
• Create absolute links
• Style links with CSS pseudo-classes
• Open links in new windows or tabs
• Link to anchors
• Create a link to a document
• Increase navigational accessibility 35
Summary
• Hypertext provides links in and
between documents
• Links are defined using the a element
• href attribute specifies location of target
document
• A navigation bar is a set of links for
moving between Web pages
• Absolute link: complete address of
target document (URI)
36
Summary
• Relative link: path/filename information
needed to locate target document. The path
is relative to the directory of the current
Web page
• Pseudo-class: categorization of web page
elements based on temporary condition
• Used to format links with CSS

• Target Web page can be opened in a

different window or tab using the target
attribute of the a element

37
Summary
• Anchors are links to locations in the
current Web page
• Created using id attribute
• id preceded by # in href value
• You can create a link to any computer
readable document
• To increase accessibility, provide
users a way to skip or ignore the
navigation bar
38
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit F:
Inserting and Working with Images
Objectives
• Evaluate image file types
• Insert images
• Align images
• Control page flow
• Insert a background image
• Associate images with related text
• Use images as links
• Insert a favicon (address bar picture) 40
Summary
• Bitmap images are represented as a
grid of dots of specified colors
• Vector graphics are encoded as
geometric shapes
• Bitmaps should be created and
formatted specifically for use on the
Web
• The quality of an image is determined
by its resolution and size
41
Summary
• To insert an image into a Web page, use
the one sided HTML img element
• You must include src and alt attributes
• To mark images use the HTML figure
element
• You can control the page flow by using
the CSS float and clear properties
on HTML figure elements

42
Summary
• Images can be used as backgrounds for
Web pages
• User agents may tile the image if necessary
• You can add captions to images using the
HTML figcaption element
• Images can be used as links when
enclosed in an HTML a element
• You can add an icon to the browser's
address bar using a favicon
43
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit G:
Organizing Content with Lists and Tables
Objectives
• Create an ordered list
• Create an unordered list
• Create a description list
• Create a navigation bar using a list
• Insert a table
• Span columns and rows
• Format a table with CSS
• Apply a table-like structure to other elements
45
Summary

• Ordered lists, unordered lists, and

description lists can be used to organize
information in HTML pages
• Information that does not of itself
constitute a list can be marked as a list
to increase the usability of a Web page
• List item markers, as well as other list
properties, can be set using CSS

46
Summary
• HTML information can be organized as
a table, in rows, columns, and cells
• Use table, th, tr, and td HTML
elements to create a table
• Semantic HTML elements can be used
to add structural information to a table
(colgroup)
• The rowspan and colspan attributes
allow a single cell to span multiple
rows or columns 47
Summary

• CSS can be used to apply styling to a

table, including styling of fonts, colors,
and borders
• The semantic HTML elements col and
colgroup can be used to apply CSS to
one or more specific column(s)
• A table-like structure can be applied to
non-tabular elements using semantic
HTML elements, such as div, and CSS
48
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit H:
Implementing Page Layout with
HTML and CSS
Objectives
• Assess the CSS box model
• Construct a multicolumn layout with float
• Implement relative positioning
• Implement absolute positioning
• Stack elements
• Create a multicolumn layout using positioning
• Create a fluid layout
• Control the visibility of elements
50
Summary
• The CSS Box model is used to represent
the shape characteristics of HTML
elements
• The Box model
• treats HTML elements as rectangular boxes
• defines the border, margin and padding
• Margins of directly adjacent elements can
combine into one margin (in this case the
larger margin is applied to both HTML
elements)
51
Summary
• Use CSS float, clear and width
properties to create multicolumn layouts
• Relative positioning allows you to adjust
the location of an HTML element relative
to its page flow location using the CSS
position property
• The space that the HTML element takes up
in the page flow is preserved

52
Summary

• Absolute positioning allows you to take

elements out of the page flow entirely
• The space that the HTML element takes up
in the page flow is not preserved.
• Other HTML elements flow into the empty
space
• Positioning can be used to create
multicolumn layouts

53
 Summary
• A fixed layout allows you to specify a fixed
width for Web page content
• A fluid layout allows you the flexibility to
adjust a Web page width while maintaining
your intended layout
• You can use CSS to style whether an
HTML element is displayed by either:
• Setting the visibility property to hidden
• or by setting the display property to none
54
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit I:
Applying Advanced CSS Styling
Objectives
• Assess advanced CSS styles
• Implement pseudo-elements
• Add generated content
• Integrate opacity
• Create rounded corners
• Create text shadows
• Add box shadows
• Test browser capabilities with Modernizr 56
Summary
• CSS3 added many new properties
which are not supported by all
browsers
• Use progressive enhancement,
graceful degradation, patches and
shims to ensure usability across the
various different browsers
• CSS Pseudo-elements allow you to
select a portion of an element for
styling 57
Summary
• :before and :after CSS pseudo-
elements allow you to repeatedly
generate content from style rules, without
changing the HTML code
• The rgba and hsla colour systems
include a fourth value which represents
the level of opacity (transparency) of an
element
• Rounded corners can be created using
the CSS border-radius property 58
Summary
• Text shadows and box shadows can be
created using the CSS text-shadow
and box-shadow properties,
respectively
• Free tools, such as Modernizr, enable
the creation of alternative code in order
to provide graceful degradation for older
browsers

59
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit J:
Creating and Processing Web Forms
 Objectives
• Understand the 2 stages of Web Form processing
• Design a form
• Create a form
• Create text fields
• Customize text fields
• Create check boxes
• Create option buttons
• Create a drop-down menu
• Enable form submission 61
Summary
• Web forms need to be planned and
designed before coding
• Identify the types of information to collect
• Create a logical flow for the user to follow
• Use labels and legends to clearly identify the
meaning of each Web form element
• A Web form is created using the HTML
<form> </form> element
• The HTML <fieldset> element groups
fields in sections of the form
62
Summary
• Text boxes are created using the HTML
input type with value text
• Text areas are created using HTML
textarea elements
• The layout of text fields can be
customized using CSS and attributes
• Checkboxes allow a user to select
multiple options
• Checkboxes are created using the HTML
input type with value checkbox 63
Summary
• Option buttons and drop-down menus allow a
user to select one of several options
• Option buttons are created using the HTML
input type with value radio
• Drop down menus are created using the HTML
select element and nesting the required option
elements
• A submit button is clicked when a user wants to
submit data in a form
• A submit button is created using the HTML
input type with value submit 64
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit K:
Incorporating Video and Audio
Objectives
• Understand Web video and audio
• Use the video element
• Incorporate the source element
• Control playback
• Add video support for older browsers
• Provide a fallback image
• Implement the audio element
• Add audio support for older browsers 66
Summary
• Media files can be included in a Web
page, provided that you take into
consideration:
• Encoding and container formats
• Inclusion of helper programs and plugins
• Providing support for older browsers
• Video is added using the HMTL <video>
</video> element
• Attributes specify how the video is displayed
and how the user interacts with the video
67
Summary
• source elements allow you to provide
multiple copies of the file in different
formats
• Various attributes of the video element
enable control of video playback
• Video support for older browsers is
added using HTML object and
param elements

68
Summary
• Fallback images can be provided
• For the video tag, use the poster
attribute
• For the object tag, nest an img tag before
closing the object tag
• Audio is added using the HTML audio
element
• The audio element has similar attributes to
the video element
• Use HTML object and param elements
to provide audio support for old browsers
69
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit L:
Programming Web Pages with
Javascript
Objectives
• Explore the Document Object Model
• Add content using a script
• Trigger a script using an event handler
• Create a function
• Store and compare data in variables
• Generate Web page content dynamically
• Script fallback options with Modernizr
• Integrate an existing script
71
Summary
• The Document Object Model (DOM) is a
way of referring to parts of a Web page
• Script code is created by combining DOM
objects, properties, and methods, often
using the dot notation
• Code for a single instruction in a script is
known as a statement
• Scripts can be used to add contents to a
page 72
Summary
• Scripts can be triggered in response to
events
• Event handlers are used to link a script
with a specific event
• A function is a block of code which is
called as a single unit and has a name
assigned to it
• A function has a specific syntax
• A function is used to simplify the structure
of a script 73
Summary
• Operators and variables are used to
create more complex scripts
• JavaScript can be used to dynamically
generate Web page content
• This can be done in response to user
actions or input
• JavaScript can be used to provide
fallback options for older browsers
• Scripts for many common tasks are
available on the Web 74
 1621ICT Web Design and
Development

HTML5 and CSS3 Illustrated

Unit N:
Optimising Your Web Site for
Search Engines
Objectives
• Understand search engine optimisation
(SEO)
• Write indexable content
• Add a description with the meta element
• Incorporate microdata
• Create a Sitemap file
• Create a robots.txt file
• Preview and finalise your site
• Submit your site
76
Summary
• Search Engine Optimisation tailors your
Web site with search engines in mind
• This is done in order to increase site
popularity and give applications
useful information about your site
• Algorithms and microdata are SEO tools
• It does not take much to make site more
SEO friendly
• Indexable content element changes are
easily achieved by adding appropriate text
for each HTML element that may be indexed 77
Summary
• Vocabularies define keyword values for
specific information groupings
• Creation of a Sitemap file contains list of
information in all pages of a Web site
• Bots are used by search engines to
target indexable information
• View your site from the point of view of a
bot to finalise
• Submit your site directly to search
engines 78