Scribd
Upload
23 views50 pages

Scheme of Work For Unit 2

Uploaded by

syeda khatija
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views50 pages

Scheme of Work For Unit 2

Uploaded by

syeda khatija
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

INTERNATIONAL ADVANCED LEVEL

INFORMATION
TECHNOLOGY
SCHEME OF WORK
Unit 2
Pearson Edexcel International Advanced Subsidiary in Information Technology (XIT11) Pearson Edexcel
International Advanced Level in Information Technology (YIT11)
First teaching September 2018
First examination from June 2019
First certification from August 2019 (International Advanced Subsidiary)
and August 2020 (International Advanced Level)

1
INTRODUCTION

The following scheme of work provides an overview of the content of the 2018 International Advanced Level Information Technology and
shows how the content could be taught as a guideline approach only.

It should be adapted by schools to fit their timetabling and staffing arrangements. It is based upon a two-year delivery model where all IAS
content is being taught in the first year and the remaining IA2 content in the second year.

The scheme of work is broken up into units and topics, so that there is greater flexibility for moving topics around to meet planning needs.

It includes:

● recommended teaching time for topics, though of course this is adaptable according to individual teaching needs

● classroom activities, teaching points and suggested teaching resources

● objectives for students at the end of the topic area and integrated Transferable Skills* that are being developed.

The number of guided learning hours for Advanced Level is 360. Teachers should be aware that the estimated teaching hours are approximate and
should be used as a guideline only.

2
Unit 2
(Refer also to the specification and the delivery and assessment guidance in the Getting Started Guide)

Topic 7: Understanding the functionality of HTML


Topic 7 deals with the understanding of HyperText Markup Language (HTML). It is expected that students will carry out
most of the styling within CSS. Audio and video content will use HTML only. Students may wish to specify the height and
width of images, emphasising or specifying the importance of text and the start and/or type of lists within HTML. Styling
will be intensively covered within the CSS content.
Week Topic area / aims / Exemplar classroom activities / teaching points / suggested teaching Integrated Transferable
learning outcomes resources Skills
1 7.1.1 Understand how Activity 1: Webpage structure • Communication
HTML is used to structure • Adaptive learning
web pages: Tutors to discuss/demonstrate the basic structure of a webpage including: • Adapting prior knowledge,
a. doctypes skills and experience of IT
b. elements • adding a doctype <!DOCTYPE html> to deal with new
c. tags. • specifying the character set <meta charset="UTF-8"> situations/contexts
• adding elements (encompass opening tag, closing tag and content)
7.1.2 Understand how to • adding tags (labels used to mark up the beginning and end of an
declare the language of element)
an html document. • declaring the language of an html document <html lang="en">
7.1.3 Understand how • adding a document title <title>Example Title</title>
the head element is used • writing organised syntax.
to supply information
about the document: Tutors to provide a task that will enable the students to create the basic
a. document title. structure of a web page.

7.1.4 Be able to write Note: Students should include this basic structure in every web page they
organised syntax: create.
a. lower case letters
within element Activity 2: Headings and paragraphs, refreshing pages
names, values and
attributes Tutors to introduce and demonstrate:
b. indenting nested
elements • the use of headings and paragraphs <h1></h1><h2></h2> etc,
c. double quotes. <p></p>
• refresh a page after a particular amount of time, e.g. <meta http-
7.1.5 Understand how equiv="refresh" content="30">
global attributes are
used to define elements: Tutors to provide a task that will enable students to:
a. language.

3
7.2.3 Be able to use • create a web page around a topic
some key elements to • include the basic structure of a web page, headings and paragraphs.
define the structure and
formatting of text on a Activity 3: Identifying HTML code errors
webpage:
a. headings Tutors to provide tasks that will enable the students to:
b. paragraphs.
• identify/explain/describe the basic structure of a web page
7.2.4 Be able to create • identify/explain the code/errors in the code
lists: • add to or amend code.
a. unordered
b. ordered (and use Activity 4: Lists
the start and type
attributes) Tutors to discuss/demonstrate the difference between ordered, unordered,
c. definition/ nested and definition/description lists including:
description
d. nesting lists. • ordered lists
o <ol></ol>
o <li></li>
o using uppercase or lowercase letters in place of numbers
(type)
o specifying a start number/letter (start)
• unordered lists
o <ul></ul>
o <li></li>
• nesting lists
o ordered list within ordered list
o unordered list within unordered list
o unordered list within ordered list
o ordered list within unordered list
• definition/description lists
o <dl></dl> defines the description list
o <dt></dt> defines a data term
o <dd></dd> defines a data definition
• double quotes
o &#34
o &quot

Tutors to provide tasks that will enable the students to:

• create a web page or pages to incorporate the lists above


• identify/explain/discuss/describe the different types of lists

4
• identify/explain the code/errors in the code
• add to or amend code.

2 7.1.4 Be able to write Activity 5: Links • Communication


organised syntax: • Adaptive learning
a. removing the Tutors to discuss/demonstrate links including: • Adapting prior knowledge,
forward slash at skills and experience of IT
the end of self- • an external link that opens in the same browser window to deal with new
closing elements. • an external link that opens in a new browser window situations/contexts
• linking to a specific part of the same page
7.2.5 Be able to create • linking to a specific part of another page
links: • email links.
a.internal
b.external Tutors to provide a two-page website that will enable students to:
c.email
d.opening links in a • add the links above
new browser • identify/explain/discuss/describe the different types of links
window or tab • identify/explain the code/errors in the code
e. linking to a • add to or amend code.
specific part of the
same page Activity 6: Tables
f. linking to a
specific part of Tutors to demonstrate/discuss:
another page.
• <table></table> to define the table
7.3.2 Be able to
• <tr></tr> to define rows
represent information in a
• <td></td> to define data
table:
• <th></th> to define headings
a. rows
• colspan/rowspan to combine multiple cells.
b. data
c. headings, body
Tutors to provide tasks that will enable the students to:
and footer
d. combining multiple
• create a web page to present a table incorporating the above
cells.
• identify/explain the code/errors in the code
• add to or amend code.

Activity 7: Table grouping

Tutors to demonstrate/discuss:

• <thead></thead> used to group header content


• <tbody></tbody> used to specify body content

5
• <tfoot></tfoot> used to group footer content
• Browser can use the <thead><tbody> and <tfooter> to enable
scrolling of the table body independently of the header and footer.
Also allows the table header and footer to be printed at the top
and bottom of each page for tables spanning multiple pages.

Tutors to provide tasks that will enable the students to:

• create a web page to present a table using table grouping


incorporating the above
• identify/explain the code/errors in the code
• add to or amend code.

3 7.1.1 Understand how Activity 8: Adding images to web pages • Communication


HTML is used to structure • Adaptive learning
web pages: Tutors to discuss/demonstrate images including: • Adapting prior knowledge,
a. attributes. skills and experience of IT
• different file formats (GIF, JPG and PNG) to deal with new
7.1.4 Be able to write • specifying the size and height of an image (pixels, %) situations/contexts
organised syntax: • adding alt tags
a. double quotes • explain the purpose of image resolution within a web page (number
b. omit the values on of pixels within an image) and how to maintain proportions when
Boolean attributes. scaling an image (e.g. specifying only one unit of length - either
7.3.1 Be able to add width or height)
images to web pages: • removing slashes from self-closing elements (using slashes is also
a. file format acceptable).
b. image size
c. resolution Tutors to provide a task that will enable the students to:
d. retaining original
proportions • create a two-page website on a topic of the tutor’s choice that
f. alt tag. includes:
o headings
7.3.5 Be able to prepare o paragraphs
audio and video: o an unordered list of images
a. multiple file ▪ using different file formats
formats ▪ with the heights and widths specified
b. embed in a web ▪ with alt tags
page o an external link that opens in a new browser window
c. controls o a link to a specific part of another page
d. customising o an email link
controls • identify/explain the code/errors in the code
e. adding attributes • add to or amend code.

6
f. using the source
element to specify Note: Images will be expanded upon in the topics for CSS and responsive
multiple resources. page design.
7.3.6 Understand how to
Activity 9: Preparing audio and video
use inline frames to add
dynamic content from
Tutors should discuss/demonstrate:
external websites.
o multiple file formats (wav, mpeg, mp3, mp4, webm, ogg,
possible browser playback issues)
o <audio></audio>
o <video></video>
o controls
o <source> (can include multiple sound files in different
formats to combat possible browser playback issues)
o type
o autoplay
o loop

For example:
<audio controls autoplay loop>
<source src=“barkingDogs.mp3” type=“audio/mpeg”>
<source src=“barkingDogs.wav type=“audio/wav”>
</audio>

<video controls width=“320” height=“240”>


<source src=“barkingDogs/mp4”>
<source src=“barkingDogs/ogg “>
</video>

Tutors to provide tasks that will enable the students to:

• embed audio (answers written on paper only)


o with controls
o without controls
o setting height and width
o specifying multiple file formats
o specifying multiple resources
o playing automatically
o looping
• embed video (answers on paper only)
o with controls

7
o without controls
o setting height and width
o specifying multiple file formats
o specifying multiple resources
o playing automatically
• identify/explain the code/errors in the code (answers written on paper
only)
• add to or amend code (answers written on paper only).

Activity 10: Inline frames

Tutors to discuss/demonstrate how inline frames can be used to add


dynamic content from external websites:

• <iframe></iframe>
• src
• width
• height

Tutors to provide a task that will enable the students to:

• create a web page incorporating the above


• identify/explain the code/errors in the code
• add to or amend code.

Resources
• https://www.w3schools.com/tags/tag_iframe.asp
• https://www.w3schools.com/html/html_iframe.asp

4 7.2.1 Understand what is Activity 11: Block-level elements, inline elements and content • Co-operation
meant by block-level models • Communication
elements and inline • Adaptive learning
elements. Tutors to lead discussion or students to work in small groups to research • Adapting prior knowledge,
block-level elements, inline elements and content models: skills and experience of IT
7.2.2 Understand that to deal with new
elements can belong to • prior to modern HTML specification, HTML elements were either situations/contexts
different content models block-level or inline elements
which follow certain rules: o block level elements
a. flow ▪ take up the entire width of their parent
b. sectioning ▪ always begin on a new line in the flow of the
c. heading document
d. phrasing o inline elements

8
e. embedded ▪ are on the same line (could have many inline
f. interactive. elements, one after another, and they will all still be
displayed on the same line
7.2.3 Be able to use ▪ restricted to only contain other inline elements
some key elements to ▪ take up only as much space as necessary
define the structure and • modern content models
formatting of text on a
webpage:
a. article
b. section
c. headings
d. paragraphs
e. thematic breaks
f. emphasis
g. importance.

11.1.1 Understand how to


add semantic markup to
web pages that describes
the content of a web page o a content model refers to the set of rules that define what
and how this is used by type of content each element can have
browsers and assistive o they can still loosely be thought of as falling into either
technologies. block-level or inline elements
o flow content
11.1.2 Be able to use ▪ roughly translates into the block-level category.
elements that define what ▪ most elements used in the body of documents are
the content is on the web flow content (e.g. table, video, embed, article, etc.)
page: ▪ elements can wrap (almost) all other elements
a. headers and o sectioning content
footers ▪ content that defines the scope of headings and
b. navigation footers (e.g. article, nav, section, etc.)
c. articles o heading content
d. asides ▪ defines the header of a section (e.g. h1, h2, etc.)
e. sections ▪ they convey a meaning – the content they wrap is
f. main. to be treated as heading content
o phrasing content
11.1.3 Understand that ▪ roughly translates into the traditional inline category
you can still group ▪ defines the text and the markup it contains (e.g.
elements together even if abbr, cite, em, etc.)
there is not a relevant o embedded content
semantic tag: ▪ imports another resource (e.g. audio, embed,
a. div iframe, img, video, object, etc.)

9
b. span. o interactive content
▪ elements that are specifically designed for user
11.1.5 Be able to use interaction (e.g. button, embed, iframe, select etc.).
semantic markup to add
textual meaning: Tutors to ensure tasks that will enable the students to:
a. importance
b. emphasis. • identify/explain/discuss/describe inline/block level elements
• identify/explain/discuss/describe content models.

Resources
• https://www.w3.org/TR/2011/WD-html5-20110525/content-
models.html
• https://clearlydecoded.com/html-content-models
• http://w3c.github.io/html-reference/common-models.html

Activity 12: The Semantic Web

Tutors to use a pre-created web page to discuss/demonstrate:

Semantic web
• gives content on the web page meaning and structure by using the
correct HTML element
• describes the content rather than how content should look
• enables computers, screen readers, search engines and other
devices to understand the content
• always uses semantic elements if they exist.

Elements
• <div><span> used for layout only – semantically meaningless
• <header></header>
• <footer></footer>
• <nav></nav>
• <article></article>
• <section></section>
• <hr> used to signify and thematic break in content
• emphasis <em></em><i></i>
o while both are typically (but not always) styled to display
as italic, <em> is used when you want to put more stress
on a word or phrase rather than just display a word or
phrase using italics. <em> is semantic mark up
• importance <strong></strong><b></b>

10
o both will embolden a word or phrase so they will look the
same in a browser; however, only <strong> is of use to a
screen reader. <strong> is semantic mark up.
• <aside></aside>
• <main></main>

Tutors to provide two pre-created webpages that will enable the students
to:

• identify/explain the code/errors in the code


• add to or amend the code.

Resources
• http://web-
accessibility.carnegiemuseums.org/foundations/semantic/
• https://www.w3schools.com/html/html5_semantic_elements.asp

11
Topic 8 Understanding the functionality of CSS
CSS documents contain styling rules that describe how HTML elements are displayed. Understanding CSS sizing, alignment,
spacing and responsiveness will allow you to control the layout of a web page and create consistent and visually appealing
web pages that can adapt to different device sizes.

Week Topic area / aims / learning Exemplar classroom activities / teaching points / suggested teaching Integrated Transferable Skills
outcomes resources
5-6 7.1.3. Understand how Activity 13: CSS fundamentals • Communication
the head element is used • Adaptive learning
to supply information Tutors to discuss/demonstrate: • Adapting prior knowledge,
about the document: skills and experience of IT
a. styles • the purpose of CSS to deal with new
b. links to external o controlling page design situations/contexts
files. o giving an entire website a consistent appearance
o improve navigation and readability of websites
7.1.5 Understand how • inheritance
global attributes are used o an element’s style values are copied from its parent
to define elements: element
a. ID o it allows consistent styles throughout a website without
b. style. having to repeat code
• cascading
8.1.1 Understand the o children inherit from their parents unless they override the
purpose of CSS: parents’ style
a. controlling page o when multiple style sheets are used, they cascade
layout o general rule is that the last style sheet overrides the ones
b. consistent page specified before
design. o order depends on other factors such as weight, specificity,
use of special keywords, and browsers
8.1.2 Be able to • how it is included within an HTML document
reference CSS within the o <link rel=”stylesheet”> (external stylesheet)
HTML code: o <style type=”text/css> (Internal in <head>)
a. inline styles o style=”color: red” (inline)
b. internal style • external CSS folder structure and naming conventions
sheets o styles folder
c. external style o relative paths (../style.css)
sheets o absolute paths (C:/www/styles/style.css)
(i) folder structure • what classes and IDs are used for, and why they are different
(ii) naming o IDs
conventions ▪ unique
(iii) relative path. ▪ used to identify one element
▪ allow styling of one HTML element
8.1.3 Understand how to ▪ each element can have only one ID
write CSS rules: ▪ each page can have only one element with that ID

12
a. selectors o classes
b. properties ▪ not unique
c. values. ▪ used to identify more than one element
▪ allow styling for many HTML elements with the same
8.1.4 Understand CSS class
selectors: ▪ can use the same class on multiple elements
a. type ▪ can use multiple classes on the same element
b. class o you can use an ID and class on a single element
c. ID • CSS selectors
d. universal o properties of those selectors
e. attribute o values of those properties
f. child o types of selectors
g. descendant ▪ universal (*) – applies to all elements on the page
h. adjacent sibling ▪ element (e.g. div) – applies to specific elements
i. general sibling ▪ class (.myclass) – applies to any html element with
j. multiple selectors. that class
▪ ID (#myid) – applies to any html element with that
8.1.5 Understand how to id
write efficient style sheets ▪ attribute (e.g. input[type=”text”]) – targets
through general rules that elements based on the presence or value of html
apply to most elements attributes
and applying specific ▪ pseudo class (e.g. a:hover) – targets an element in
rules to individual a specific pseudo state, e.g. a link being hovered
elements: ▪ pseudo element (e.g. .title:before, #header:after) –
a. cascade inserts and targets a pseudo element either before
b. inheritance. or after an actual element. Can be used for e.g.
inserting an icon before a link, or the word “tel:”
8.1.7 Be able to create before a telephone number.
rules using CSS attribute ▪ multiple selectors: (e.g. p, div, #header) – targets
selectors that apply every element in a comma separated list and
elements that have an applies the same styles to all
attribute with a specific • style elements
value: (Note: This may be done anywhere the tutors feel most
a. existence appropriate within the CSS/Design websites sections.)
b. equality o text layout (color, alignment, text-decoration)
c. space o font (font-family, font-style, font-size (em, px, %, font-
d. prefix weight)
e. substring o links (color, link, visited, hover, active, text-decoration,
f. suffix. background-color)
o lists (list-style-position, list-style-type:none)
8.2.4 Be able to style o tables (border, border-collapse, height, width, text-align,
elements: padding, background-color, nth-child(even), nth-
a. text layout child(odd))

13
b. font o images (border-radius, border, padding, width, height,
c. links opacity, visibility – also see positioning.
d. lists
e. tables Tutors to provide a range of tasks that will enable the students to:
g. images.
• describe the purpose of CSS
• explain cascading
• explain inheritance
• explain/describe/discuss the difference between external and
internal style sheets
• use external and internal style sheets
• name/identify/explain/describe/discuss and use these selectors:
o universal
o element
o class
o ID
o multiple selectors
• use these selectors:
o pseudo class
o pseudo state
o pseudo element
• style elements
o text layout
o font
o links
o lists
o tables
o images
• identify/explain errors in the code.

Resources
• https://css-tricks.com/the-difference-between-id-and-class/
• https://www.w3schools.com/cssref/css_selectors.asp
• https://www.w3schools.com/css/css_text.asp
• https://www.w3schools.com/css/css_font.asp
• https://www.w3schools.com/css/css_link.asp
• https://www.w3schools.com/css/css_list.asp
• https://www.w3schools.com/css/css_table.asp
• https://www.w3schools.com/css/css3_images.asp

14
Activity 14: Further CSS selectors

Tutors to discuss/demonstrate these selectors:

• descendant (eg #header .title) – applies to a more specific


selection, e.g., targets every element with the .title class within
the #header element. Does not have to be an immediate child of
#header
• child (eg #header > .title) – same as descendant but only targets
elements with the .title class that are a direct child of the #header
element
• general sibling (eg h2 ~ p) – targets every <p> which is a sibling
of a <h2>. Does not have to be an immediate sibling
• adjacent sibling (eg h2 + p) – same as general sibling but targets
only <p> elements that are adjacent siblings to <h2> elements.

Tutors to provide a range of tasks that will enable the students to


name/identify/explain/discuss/describe the selectors above.

Activity 15: Attribute selector syntax

Tutors to discuss/demonstrate:

• [attr] – selects element with specific attribute


• [attr=value] – selects element with specific attribute and specific
value for that attribute
• [attr~=value] – same as previous but can specify multiple,
whitespace-separated values to match against
• [attr|=value] – selects element with a specific value, or element
beginning with a specific value immediately followed by a hyphen
(often used for language subcode matches)
• [attr^=value] – selects element with a prefix of a specific value
• [attr$=value] – selects element with a suffix of a specific value
• [attr*value] – selects element with at least one occurrence of
specific value.

Tutors to provide a range of tasks that will enable the students to:

• [attr] and [attr=value]


o use both
o describe how code examples work
o identify/explain the code/errors in the code

15
o add to or amend code
• the rest
o identify/explain them.

7-8 8.1.6 Understand the Activity 16: CSS box model • Communication
CSS Box Model. • Adaptive learning
8.2.1 Be able to specify Tutors should discuss/demonstrate: • Adapting prior knowledge,
colours: skills and experience of IT
a. colour names • the CSS box model to deal with new
b. hexadecimal o every element of a web page is made up of a rectangular situations/contexts
notation box consisting of four layers – content, padding, border and
c. RGB values. margin, in that order
o content box – the area in which content is displayed, e.g.
8.2.2 Understand how to text or images. The CSS width and height properties set
manipulate colour: the width and height of the content box
a. opacity o padding – the inner margin of a CSS box, like the margin of
b. gradients an A4 piece of paper
c. HSL values. o border – the border between the padding and margin of a
content box. Has 0 width by default and is invisible, but can
8.2.5 Be able to use the be displayed with a variety of styles
box model to add o margin – the outermost part of a CSS box, surrounding the
backgrounds border, padding and content box. The margin of one CSS
(background images, box touches against the margin of other CSS boxes, and
gradients, CSS sprites) can be used to create space between them
and borders to elements. • block level elements take up the entire width of their parent
• inline elements take up only as much space as necessary.
8.3.2 Be able to use the
box model to control the Tutors to provide a range of tasks that will enable the students to:
appearance of boxes:
a. display • describe the CSS box model
b. width • use the CSS box model
c. height • identify/explain the code/errors in the code
d. borders • add to or amend code.
e. margins and
padding. Resources
• https://developer.mozilla.org/en-
8.2.3 Be able to specify US/docs/Learn/CSS/Introduction_to_CSS/Box_model
length values:

16
a. absolute lengths Activity 17: Lengths and CSS units
b. relative lengths.
Tutors to discuss/demonstrate:

• absolute lengths units are a fixed length and will appear exactly at
the size specified. Length examples include px and pts
• relative lengths are a length relative to another length property
(generally font size), e.g. a div with a width of 10em will appear
10 times the size of the font size.

Tutors to provide a range of tasks that will enable the students to:

• name/identify/explain/discuss/describe the lengths above


• use the lengths above
• identify/explain the code/errors in the code
• add to or amend the code.

Activity 18: Colour and backgrounds

Tutors to discuss/demonstrate:

• colour names
o there are a number of colours specified by name in CSS,
e.g. red, black, etc.
• RGB
o red, green, blue values (e.g. rgb(255, 99, 70)
• HSL
o hue, saturation and lightness (e.g. hsl(0, 100%, 50%)
• hexadecimal
o hexadecimal value for colours (e.g. #24ba13)
• opacity
o cannot be used with Hex, can only be used with RGB or
HSL (e.g. opacity: 0.5)
• gradients
o transiting between two or more specified colours
• backgrounds can be transparent, an image or colour. For example:
o background-image: url(image.jpg)
o background-position:center
o background-color: #000000
o background-image: linear-gradient (top, red, black)
• image sprites may be used to decrease memory usage and the
number of http requests made by combining all images into one.

17
When an image sprite is set as a background, you are able target
the specific area of the combined image.

Tutors to provide a range of tasks that will enable the students to:

• name/identify/explain/discuss/describe/use the different ways of


specifying a colour
• use opacity
• use backgrounds
• identify/explain the code/errors in the code in terms of
o specifying a colour
o using opacity
o using backgrounds
• add to or amend code in terms of
o specifying a colour
o using opacity
o using backgrounds
• describe how images sprites can be used as a background.

9-10 7.3.1 Be able to add Activity 19: Positioning • Communication


images to web pages: • Adaptive learning
a. positioning Tutors to discuss/demonstrate: • Adapting prior knowledge,
images. skills and experience of IT
• positioning of CSS boxes to deal with new
8.3.1 Be able to control o normal flow (position: static) - one CSS box follows another situations/contexts
the position of elements: o relative positioning (position: relative) – CSS box
a. normal flow positioned in relation to its default (static) positioning, e.g.
b. relative positioning adding “top: 10px” to a relatively positioned element will
c. absolute move it 10px down from its normal starting position
positioning o absolute positioning (position: absolute) – CSS box
d. fixed positioning positioned exactly where specified. Unless otherwise
e. floating elements configured, will position elements in relation to the <html>
f. overlapping element, e.g. “top: 0px” will move it to the top of the
elements. browser window, “bottom: 0px” will move it to the bottom.
If an absolutely positioned element is the descendant of a
box which has absolute or relative positioning itself, it will
be in relation to that box, rather than the <html> element
o fixed positioning (position: fixed) – is relative to the
viewport, or the browser window itself. The viewport does
not change when the page is scrolled, so a CSS box with
“top: 10px” will always appear 10 pixels from the top of the

18
browser, no matter where the user scrolls (it will appear to
“float” above the rest of the page)
o floating elements (float: left) place an element on the left
or right side of its container, allowing text and inline
elements to wrap around it. The element is removed from
the normal flow of the page. Absolutely positioned
elements cannot be floated
o images may be positioned using floats
o overlapping elements – z-index applies to any element that
has a position other than static and controls the stacking of
elements. Elements with a higher z-index appear stacked
on top of an element with a lower z-index
o clearfix to clear floats
o img.hover, e.g. to change opacity.

Tutors to provide a range of tasks that will enable the students to:

• use the above


• identify/explain the code/errors in the code
• add to or amend code.

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/position
• https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
• https://developer.mozilla.org/en-US/docs/Web/CSS/float
• https://www.w3schools.com/howto/howto_css_clearfix.asp

11 8.4.1 Be able to use CSS Activity 20: Animations • Communication


transitions and • Adaptive learning
transforms to create Tutors to discuss/demonstrate: • Adapting prior knowledge,
animations: skills and experience of IT
a. transition • transition properties to deal with new
properties o allows you to change property/properties values smoothly situations/contexts
b. transform (from one value to another) over a give duration
properties o need to specify CSS property to add effect to and the
c. 3D transforms duration of the effect
d. cubic-bezier. • transform
o applies a 2D or 3D transformation to an element
o allows you to rotate, scale, move, etc.
• transition and transform combined
o you can use a transition to add an effect to a transformation

19
• shapes with a transition effect applied to:
o width
o height
o width and height
o cubic-bezier – variable speed from start to end
• shapes with a rotate transform effect
• shape with a combined transition and 2D rotate transform effect.

Tutors to provide a range of tasks that will enable the students to:

• identify/explain the code/errors in the code


• add to or amend code.

Resources
• https://www.w3schools.com/css/css3_transitions.asp
• https://www.w3schools.com/cssref/func_cubic-bezier.asp
• https://www.w3schools.com/css/tryit.asp?filename=trycss3_transiti
on_transform
• https://thoughtbot.com/blog/transitions-and-transforms

20
Topic 10: Designing web pages
Adopting a design, implement, test and iterate approach to coding for the web enables web designers and developers to
build functional web pages for specific audiences and purposes. Effective page layout and design is essential to guiding
the user through a web product. Students will understand how to incorporate the principles of design, accessibility and
usability within their coding to be best placed to create visually appealing page layouts that enhance the user experience.
Topic 11: The semantic web
Semantic code describes the content rather than how the content should look. Semantic HTML adds functionality to web
pages, works better on mobile devices and supports search engine optimisation (SEO). Semantic markup also makes the
code easier to write and maintain, as it shows what each piece of content is about, as well as enabling students to take
advantage of default styles and functionality.
Week Topic area / aims / learning Exemplar classroom activities / teaching points / suggested teaching Integrated Transferable Skills
outcomes resources
12- 8.3.3 Understand how to Activity 21 : Different sized screens • Co-operation
13 design for differently • Communication
sized screens: Tutors to lead discussion or students to work in small groups to research • Adaptive learning
a. fixed width layouts designing for different sized screens including: • Adapting prior knowledge,
b. liquid layouts skills and experience of IT
c. layout grids • fixed width layouts to deal with new
d. CSS frameworks. o width of the entire page is set with a specific numerical value situations/contexts
o remain this width regardless of the size of the browser
window viewing the page
10.1.1 Understand how o allows the designer to build pages that will look identical no
to design web pages: matter who is looking at them
a. wireframes o can cause horizontal scrolling in smaller browser windows
b. mock-ups o can result in a lot of unused space and more scrolling
c. web-design style vertically
guide • liquid layouts
d. prototyping. o based on percentages of the current browser window’s size
o expands and contracts to fill the available space
10.1.3 Understand how o do not allow for precise control over the width of the various
to use design principles to elements
create effective page • layout grids
layout and design: o made up of rows and columns
a. visual hierarchy o vertical line of grid items is a column
b. flow o horizontal line of grid items is a row
c. colour theory o spaces between each column/row are called gaps
d. balance and o lines between rows are called row lines
contrast. • CSS frameworks
o software framework that is meant to make it easier to make
sure a web page/web site complies to standards using CSS
language

21
o bootstrap is a widely used example.

Tutors to provide tasks that will enable the students to:

• name/identify/explain/describe the layouts and CSS framework.

Note: Students will create a fixed layout web page in Activity 25.

Resources
• https://www.lifewire.com/fixed-width-vs-liquid-layouts-3468947
• https://www.sitepoint.com/resizing-fixed-fluid-or-responsive-
layouts/
• https://visme.co/blog/layout-design/
• https://www.w3schools.com/css/css_grid.asp
• https://en.wikipedia.org/wiki/CSS_framework

Activity 22 : Designing web pages

Tutors to lead discussion or students to work in small groups to research


designing web pages including:

• wireframes
o sketch of a web page/web site before any design or
development takes place
• mock-ups
o look more like a finished product or prototype but is not
interactive and not clickable; it is still a graphical
representation
• web-design style guide
o document that details the elements and patterns of a web
page/site, e.g. headers, links, buttons, etc.
• prototyping
o close to the finished product
o processes can be simulated, and user interaction tested
o looks very similar to the finished product.

Tutors to provide tasks that will enable the students to:

• name/identify/explain/discuss/describe/use a wireframe
• name/identify/explain/discuss/describe/use a mock-up
• name/identify/explain/discuss/describe/use a web-design guide
• name/identify/explain/discuss/describe/use prototyping.

22
Note: Students will create a prototype of a web page using a wireframe and
web-design style guide in Activity 26.

Resources
• https://www.youtube.com/watch?v=T0vt3nLZKks
• https://uxplanet.org/basic-ui-ux-design-concept-difference-
between-wireframe-prototype-e38cd3580543
• https://premium.wpmudev.org/blog/web-design-style-guide/
• https://www.mockplus.com/blog/post/wireframe-mockup-prototype-
selection-of-prototyping-tools

Activity 23: Effective page layout and design

Tutors to lead discussion or students to work in small groups to research


designing web pages including:

• an effective web page/site design should meet its intended function


by getting across its message while engaging the user by
considering:
o visual hierarchy
▪ the order in which a user processes information of a
page
▪ taken into account so that users can understand
information easily
▪ F pattern is a reading pattern that roughly resembles
the letter F
• Users first read in a horizontal movement,
usually across the upper part of the content
area. This initial element forms the F's top bar.
• Next, users move down the page a bit and then
read across in a second horizontal movement
that typically covers a shorter area than the
previous movement. This additional element
forms the F's lower bar.
• Finally, users scan the content's left side in a
vertical movement. This last element forms the
F's stem.
o flow
▪ guiding the user through the page
o colour theory

23
▪ colour wheel – circle of colour hues showing
relationships between primary, secondary and tertiary
colours
▪ monochromatic – uses a single base colour and any
number of hues of this colour
▪ analogous – use any three colours that are side by
side on a 12-part colour wheel; usually one of the
three colours is predominant
▪ complementary – uses colours that are located
opposite each other on the colour wheel
▪ triadic – use three colours equally spaced around the
colour wheel
▪ compound – nearly the same as complementary
except it uses colour on both sides of the opposite
colour
o balance and contrast
▪ balance – the distribution of elements of the design
• symmetrical – mirrored balance of elements
across a centre line
• asymmetrical – no mirrored balance of
elements across a centre line
• radial – elements focussed around a central
point rather than line
▪ contrast
• can be through colours or use of shapes,
space, textures, etc. Elements that are the
opposite of each other.

Tutors to provide tasks that will enable the students to:

• name/identify/explain/discuss/describe
o visual hierarchy
o flow
o colour theory
o balance and contrast
• assess the effectives of a page layout and design
• analyse a page layout and design and provide recommendations.

Resources
• https://www.youtube.com/watch?v=7wvQd3-nDCs
• https://www.youtube.com/watch?v=oztFP1eBjY8
• https://www.interaction-design.org/literature/topics/visual-hierarchy

24
• https://tomkenny.design/articles/the-principles-of-good-web-
design-part-1-layout/
• https://www.w3schools.com/colors/colors_monochromatic.asp
• https://www.w3schools.com/colors/colors_analogous.asp
• https://www.w3schools.com/colors/colors_complementary.asp
• https://www.w3schools.com/colors/colors_compound.asp
• https://www.smashingmagazine.com/2015/06/design-principles-
compositional-balance-symmetry-asymmetry/
• https://www.wix.com/blog/2018/07/7-principles-of-design-
websites/

14- 10.1.2 Be able to use web Activity 24: Web typography • Communication
15 typography: • Adaptive learning
a. web-safe fonts Tutors to discuss/demonstrate: • Adapting prior knowledge,
b. embedding web skills and experience of IT
fonts. • web-safe fonts to deal with new
o each device comes with its own pre-installed font selection situations/contexts
11.1.5 Be able to use based largely on its operating system
semantic markup to add o problem is systems can differ
textual meaning: o if this is not taken into account, then the font a user sees
d. quotations when they view a web page may not be the font that was
e. abbreviations and intended
acronyms o web-safe fonts are fonts that will appear across all operating
f. citations and systems
definitions o designers should specify fonts to fall back to if the font they
g. address use is not recognised by a particular operating system
h. mark. o common web safe fonts include Arial, Helvetica, Times New
Roman, etc.
11.1.6 Be able to • embedding web fonts.
semantically mark up
self-contained content: Tutors to provide tasks that will enable the students to:
a. figure
b. caption. • identify/explain/discuss/describe/use web-safe fonts
• describe how to embed web fonts.

Activity 25: Semantic mark up

Tutors to discuss/demonstrate:
• semantic markup that adds textual meaning
o quotations
▪ <blockquote></blockquote> long section that is
quoted from another source

25
▪ <q></q> short quotation
o abbreviations and acronyms
▪ <abbr></abbr>
o citations and definitions
▪ <cite></cite>
▪ <dfn></dfn>
o address
▪ <address></address>
o mark
▪ <mark></mark>
• semantic markup for self-contained content
o figure
▪ <figure></figure>
o caption
▪ <caption></caption>

Tutors to provide tasks that will enable the students to:

• use semantic markup


• identify/explain the code/errors in the code
• add to or amend the code.

Activity 26: Create web-page using a fixed layout

Tutors to provide a wireframe, style guide and assets for students to use in
order to create a fixed layout web page. The sample and additional sample
material should be used as a general guide as to the type of information
they will need in order to complete the task.

16- 10.3.1 Be able to design Activity 27: Intuitive navigation • Communication


17 intuitive navigation • Adaptive learning
systems: Tutors to discuss/demonstrate: • Adapting prior knowledge,
a. horizontal scroll skills and experience of IT
menu • horizontal scroll menus to deal with new
b. vertical menu o menus that are placed across a screen situations/contexts
c. dropdown menus o the navigation is generally always visible although some of
d. breadcrumb the items may not be
navigation o can be more natural to use on devices where you ‘swipe’
e. button groups. o can be good to use on responsive pages as may not require
any changes between desktop and mobile versions
o forces users to scan horizontally, which may not be a bad
thing as that is what people do when they read

26
o can be more visible than vertical menus
o can be easier to find that vertical menus
o may not be so good for those using a mouse
o some of the content may be missed as users don’t expect
further menu items to be there
• vertical menus
o menus that are placed down the screen either left or right
o can be faster and more efficient for users to scan
o can be less visible than horizontal menus as sometimes there
are too many items to fit on the screen
o can be better than horizontal for those using a mouse
o may not be suitable for tablets or mobile phones, etc. as
those can take up too much space unless the designer
provides methods of hiding/viewing it
• dropdown menus
o list of items that appear when clicking a button, icon or text
selection
o good for grouping pages into categories
o good for showing a large list of choices without taking up
much space
o good for big sites with many sections as can improve
usability
o would only be on screen as and when needed
o can mean users skip top-level pages
o can be difficult to scroll, e.g. with mouse
o users have to click to see what options are available
• breadcrumb navigation
o should use if there is a large amount of content in a strict
linear or hierarchical structure with definite categories
o should not be used for single-level websites that have no
logical hierarchy or grouping
o navigation that allows a user to see where the current page
is in relation to the web site’s hierarchy
o easily shows where a user can go on the site
o users may not use this design element, but they understand
what they are showing and can use them
• button groups
o series of buttons grouped together on a single line in a
button group.

Tutors to provide tasks that will enable the students to:

27
• identify/explain/discuss/describe the different types of navigation
systems
• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code
• assess the suitability of navigation systems
• analyse navigation and make recommendations as to how it could
be improved.

Resources
• https://www.web-designlondon.co.uk/horizontal-scrolling/ (talks
about horizontal scrolling in general but still useful
• https://codepen.io/mahish/pen/RajmQw demonstration of a
horizontal scroll menu
• https://www.w3schools.com/howto/howto_css_menu_horizontal_scr
oll.asp demonstration of a horizontal scroll menu
• https://www.wix.com/blog/2015/07/vertical-navigation-menus-
should-you-use-them/
• http://www.grayboxpdx.com/blog/post/making-a-comeback-the-
vertical-menu
• https://designshack.net/articles/navigation/side-navigation-trend/
• https://www.w3schools.com/howto/howto_css_vertical_menu.asp
demonstration of a vertical menu
• https://baymard.com/blog/drop-down-usability
• https://uxplanet.org/breadcrumbs-for-web-sites-what-when-and-
how-9273dacf1960

18 8.3.4 Understand Activity 28: Responsive design techniques • Communication


responsive design • Adaptive learning
techniques. Tutors to discuss/demonstrate: • Adapting prior knowledge,
skills and experience of IT
• a responsive web page is a page that adapts to any screen size so it to deal with new
is as easy to use on a mobile as it is on a tablet or desktop situations/contexts
• the design instinctively adapts to the device it is being viewed on,
so it looks just as good on any device
• can use a fluid layout
• uses HTML and CSS to automatically resize, hide, shrink or enlarge
elements
• in terms of this unit creating a responsive web page, responsive will
include
o <meta name="viewport" content="width=device-width,
initial-scale=1.0"> needs to be added to the head element

28
o specifying the design for mobiles first in CSS
o adding a breakpoint for devices 600px or over (@media only
screen and (min-width: 600px)
o specifying the design for these larger devices in CSS.

Tutors to provide:

• a mock-up of a mobile web page


• a mock-up of how the page should look when the browser reaches
600px
• assets
• a style guide detailing the design below 600px and the differences
at 600px and over.

Resources
• a responsive layout template has been included
• https://www.youtube.com/watch?v=snQp757_Rr0
• https://www.w3schools.com/css/css_rwd_mediaqueries.asp

19 10.3.2 Understand how Activity 29: Targeting specific devices and browsers • Communication
to target specific devices • Adaptive learning
and browsers: Tutors to discuss/demonstrate targeting specific devices and browsers: • Adapting prior knowledge,
a. cross-browser skills and experience of IT
compatibility • cross-browser compatibility to deal with new
b. functionality and o is the manner in which your web page, web site or web situations/contexts
usability testing applications work properly across all browsers
c. code validation o the aim is to provide all users with the same experience
d. browser across all browsers
development tools. • functionality and usability testing
o functionality testing
▪ assesses whether the web page, web site or web
applications works the way it should (behaves
according to the functional requirements) without
taking design principles into consideration
o usability testing
▪ focuses on how well the customer can use the web
page, web site or web app to complete the required
task
▪ tests overall structure, navigational flow, layout of
elements on a page, clarity of content and overall
behaviour
o code validation

29
▪ the process of checking that the coding of an HTML or
XHTML web page follows the standards and
recommendations set by the World Wide Web
Consortium (W3C) for the web
▪ can validate HTML, CSS and links
• HTML validators check that HTML coding
complies with the HTML standards set by the
W3C
• CSS validators check that CSS coding complies
with the CSS standards set by W3C
• link validators check that the hyperlinks work
correctly
o browser development tools
▪ most popular browsers have built-in tools to help web
developers and many additional plugins can be added.

Tutors to provide tasks that will enable the students to:

• explain/describe/discuss cross-browser compatibility


• explain/describe/discuss functionality and usability testing
• explain/describe/discuss code validation
• explain/describe/discuss browser development tools
• carry out functionality and usability testing
• use code validators
• use browser development tools.

Resources
• https://medium.com/@sarahelson81/what-is-cross-browser-
compatibility-and-why-we-need-it-b41423c3501a - what is cross
browser compatibility and similar concepts
• https://www.qualitestgroup.com/white-papers/functional-testing-vs-
usability-testing/ - difference between functional and usability
testing
• https://chatbotslife.com/9-ways-to-avoid-cross-browser-
compatibility-issues-ada192ef47bf - cross browser issues
• http://www.htmlbasictutors.ca/code-validation-clean-code.htm -
code validation
• http://validator.w3.org/ - HTML validator
• http://jigsaw.w3.org/css-validator/ - CSS validator
• http://validator.w3.org/checklink - link validator
• https://developer.mozilla.org/en-
US/docs/Learn/Common_questions/What_are_browser_developer_t
ools - what are browser development tools

30
• https://developers.google.com/web/tools/chrome-devtools/?hl=en –
Chrome developer tools
• https://getfirebug.com/ - Firebug developer tools
• https://developer.mozilla.org/en-US/docs/Tools - Firefox developer
tools
• https://developer.apple.com/safari/tools/ - Safari developer tools
• https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide -
Microsoft Edge developer tools

20 7.1.3 Understand how the Activity 30: Accessibility • Communication


head element is used to • Adaptive learning
supply information about Tutors to demonstrate/discuss: • Adapting prior knowledge,
the document: skills and experience of IT
a. metadata. • Web accessibility is the inclusive practice of ensuring there are no to deal with new
barriers that prevent interaction with, or access to, websites on the situations/contexts
7.1.5 Understand how World Wide Web by people with disabilities
global attributes are used • All users should have equal access to information and functionality
to define elements: • Web accessibility aims to include
a. tabindex o visual impairments including blindness, various common
b. data types of low vision and poor eyesight and various types of
c. hidden. colour blindness
o mobility issues, e.g. difficulty or inability to use hands
10.2.1 Understand how to o auditory (hearing) issues, e.g. deaf or hard of hearing
make websites accessible o seizures, e.g. people who suffer from epileptic seizures
to the widest possible caused by flashing effects, etc.
audience referring to the o cognitive and intellectual issues, e.g. developmental or
Web Content Accessibility learning difficulties, etc.
Guidelines (WCAG). • WCAG
o guidelines
11.1.4 Understand how ▪ perceivable – information cannot be invisible to all of
semantic code is used by user’s senses
search engines (search ▪ operable – interface cannot require interaction that a
engine optimisation user cannot perform
(SEO)). ▪ understandable – content or operation cannot be
beyond their understanding
11.1.7 Know how Web ▪ robust – interpreted reliably by a wide variety of user
Accessibility Initiative – agents, including assistive technologies
Access Rich Internet • WAI-ARIA
Applications (WAI-ARIA) o technical specification published by W3C that specifies how to
can be used to provide increase the accessibility of web pages for assistive
additional semantics and technologies such as screen readers
improve accessibility:

31
a. functionality o set of attributes for plugging the accessibility gaps in HTML5
through roles semantics
b. states and o has no effect on how page elements are displayed or behave
properties in browsers
c. live regions for o only use where HTML5 semantics are not available or not
dynamic content sufficient
d. enhanced o functionality through roles – enables the classification of
keyboard otherwise meaningless tags
navigation. o states and properties – information on how to interact with a
particular widget
o live regions for dynamic content – allow notifications
whenever there are changes in that particular part of the
page
o enhanced keyboard navigation – allows every HTML element
to receive keyboard focus
o things to think about
▪ images
▪ audio and video
▪ colours
▪ text
▪ links
▪ forms
▪ navigation and site structure
(see checklist 1 below)
▪ page regions
▪ labelling regions
▪ headings
▪ content structure
(see checklist 2 below)
o tabindex, data, hidden
▪ tabindex – can be used to set the focus on elements in
a particular order when the user uses the tab key;
tabindex=0 is default order, -1 means no tab stop.
Only use them where absolutely necessary, e.g.
custom elements that would not ordinarily receive
focus from tab
▪ data – used to store custom data (data-*)
▪ hidden – Boolean attribute, when present specifies
whether an element should be seen/heard; useful for
hiding elements that people with disabilities are not
required to see or hear, e.g. people with visual
impairments would not need to see asterisks for
compulsory fields.

32
• SEO
o name given to activity that attempts to improve search
engine rankings
o should ensure a website can be found in search engine for
words and phrases relevant to what the site is offering
o some of most important techniques to use
▪ remove anything that slows down the site
▪ link to other websites with relevant content
▪ write for humans first, search engines second
▪ encourage other trustworthy sites to link to you
▪ use web analytics to see what is working and what is
not
▪ write unique and relevant meta descriptions for every
page
▪ use readable and meaningful URLs only
▪ use the right keywords in your images
• metadata
o data about the HTML document, e.g.
▪ meta name=”description” content=”Free CSS
Lessons”>
▪ meta name=”keywords” content=”HTML, CSS”>

Tutors to provide tasks that will enable the students to:

• explain/describe/discuss web accessibility


• explain/describe/discuss WCAG
• explain/describe/discuss HTML5 semantics
• explain/describe/discuss WAI-ARIA
• explain/describe/discuss SEO (including metadata)
• use metadata
• assess how well particular web pages incorporate accessibility
through the use of semantics, WCAG and WAI-ARIA
• analyse the use of semantics, WCAG and WAI-ARIA employed on
particular pages and make recommendations where appropriate
• assess how well particular web pages incorporate SEO techniques
• analyse the use of SEO techniques used on a particular web page
and recommend improvements.

Resources

• https://www.w3.org/TR/UNDERSTANDING-
WCAG20/intro.html#introduction-fourprincs-head

33
• http://www.disability.wa.gov.au/Global/Publications/Understanding
%20disability/Built%20environment/Accessible%20websites%20che
cklist.pdf – checklist 1
• https://www.w3.org/WAI/tutorsials/page-structure/ - checklist 2
• http://heydonworks.com/practical_aria_examples/ - examples of
ARIA in action
• https://developer.mozilla.org/en-
US/docs/Web/HTML/Global_attributes/tabindex - tab index
• https://www.w3schools.com/tags/att_global_data.asp - data
• https://www.w3schools.com/tags/att_hidden.asp - hidden
• https://www.youtube.com/watch?v=B4IqW-5a16o – SEO
• https://www.youtube.com/watch?v=sd0ypO9MTWY - SEO

34
Topic 9: Understanding the functions of JavaScript
JavaScript is the programming language that, when applied to a HTML document, provides dynamic interactivity, such as
image sliders, galleries and fluctuating layouts. To make web pages interactive, the JavaScript selects elements on the
page. Students will select an element through the Document Object Model (DOM), and affect it to make it behave a
certain way when a user interacts with it. They will develop an understanding of fundamental programming concepts and
the syntax of the language to enable them to use JavaScript to create interactive web pages that respond to user actions.
Week Topic area / aims / learning Exemplar classroom activities / teaching points / suggested teaching Integrated Transferable Skills
outcomes resources
21- 7.1.3. Understand how Activity 31: Programming functionality • Communication
22 the head element is used • Adaptive learning
to supply information Tutors to discuss/demonstrate: • Adapting prior knowledge,
about the document: skills and experience of IT
a. scripts. • writing single line comments to deal with new
• writing multi line comments situations/contexts
9.3.1 Understand how to • using alerts to display as pop ups
add JavaScript to web • declaring variables and constants
pages. • assigning values to variables and constants
• carrying out calculations
9.3.2 Be able to program o addition
functionality: o subtraction
a. comments o division
b. assignment o multiplication
c. selection o use BODMAS/BIDMAS effectively
d. variables • using selection including
e. subprograms. o IF…THEN
o IF…THEN…ELSE
9.3.5 Understand how to o IF…THEN…ELSEIF
use error handling and o IF…THEN…ELSEIF…ELSE
debug JavaScript. o SWITCH
• using comparison operators including
9.3.4 Understand how to o == equal to
combine JavaScript with o === equal value and equal type
HTML and CSS to create o != not equal
page components: o !== not equal value or not equal type
a. pop-ups. o > greater than
o < less than
o >= greater than or equal to
o <= less than or equal to
o IsNaN is not a number
• Using logical operators including
o && and
o || or

35
o ! not
• Using string methods
o length
o substring
o substr
o replace
o toUpperCase
o toLowerCase
o split
o charAt
• subprograms
o function declarations
o calling functions
o passing parameters
o executing functions
o returning values (when required).

Tutors may use ‘prompt’ and ‘alert’ pop up boxes for input at this stage.
Form input and similar concepts are covered in later weeks.

Tutors should explain the purpose of try, catch, throw and finally in error
handling though it does not need to be coded.

There is no preference as to whether students terminate lines using semi-


colons.

Tutors to provide tasks that will enable the students to:

• create code to cover all the above


• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code.

Resources
• https://www.w3schools.com/js/js_string_methods.asp
• https://www.w3schools.com/jsref/jsref_try_catch.asp

23 9.3.2 Be able to program Activity 32: Repetition and iteration • Communication


functionality: • Adaptive learning
a. repetition Tutors to explain that: • Adapting prior knowledge,
b. iteration. • repetition is an instruction or instructions that need(s) repeating skills and experience of IT
• iteration is the carrying out of this/these instruction(s). to deal with new

36
situations/contexts
Tutors to discuss/demonstrate:

• definite iteration
o loops where the exact number of iterations can be defined
o for loop
• indefinite iteration
o the exact number of iterations cannot be defined
o while loop
▪ condition will be tested at beginning of loop
▪ code within loop may or may not be executed
o do…while loop
▪ condition will be tested at end of loop
▪ code within loop will be executed at least once
o increment
o decrement.

Tutors to provide tasks that will enable the students to:

• create code to cover all the above


• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code.

24 9.3.2 Be able to program Activity 33 : Arrays • Communication


functionality: • Adaptive learning
a. 1D and 2D data Tutors to explain the difference between 1D and 2D arrays: • Adapting prior knowledge,
structures. skills and experience of IT
• 1D array can be thought of as a single column, multiple row table to deal with new
• 2D array can be thought of as a multiple column, multiple row situations/contexts
table
• both are used to store multiple values in a single variable.

Tutors to discuss/demonstrate 1D arrays including:

• declaring and initialising an empty array


o var names = []
• declaring an array and initialising it with values, e.g.
o var names = [“Simon”,“Steve”,“Mobin”]
o var ages = [12,16,19,21,45]
• adding values to an array, e.g.
o ages[1] = 12

37
o names[2]= “Julie”
o age.push(10)
• sorting an array alphabetically
o names.sort()
• setting the length of an array, e.g.
o age.length=10
• finding the length of an array using array.length
• looping through arrays, e.g. loop to find a value within the array.

Tutors to provide tasks that will enable the students to:

• create code to cover all the above


• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code.

Resources
• https://www.quora.com/What-is-the-difference-between-one-
dimensional-area-and-a-multidimensional-array
• https://www.w3schools.com/js/js_arrays.asp

25- 7.3.3 Be able to create a Activity 34: DOM • Co-operation


26 form on a web page: • Communication
a. form structure Tutors to lead discussion or students to work in small groups to research the • Adaptive learning
b. form elements HTML Document Object Model (DOM) and how JavaScript works with it • Adapting prior knowledge,
c. form controls including: skills and experience of IT
d. form buttons to deal with new
e. organising and • the HTML DOM is an Object Model for HTML and a programming situations/contexts
grouping for interface for JavaScript
elements • the HTML DOM defines
f. input types o HTML elements as objects
g. text areas o properties of all HTML elements
h. drop-down lists. o methods to access all HTML elements
o events for all HTML elements
7.3.4 Understand how web • JavaScript can
forms work: o add/change/remove HTML elements
a. how information is o add/change/remove HTML attributes
sent from the o add/change/remove CSS styles
browser to the o react to HTML events
server o add/change/remove HTML events.
b. form validation.

38
8.2.4 Be able to styles to Tutors to explain that the ‘document’ object represents the web page in
elements: the browser and that to access any element in the HTML page you would
a. forms. always start with accessing the document object.

9.1.1 Understand how Tutors to provide tasks that will enable the students to:
the Document Object
Model (DOM) allows • name/identify/explain/discuss/describe the HTML DOM and how
JavaScript to access and JavaScript works with it.
update the contents of a
web page while it is in the Resources
browser window. • https://www.w3schools.com/whatis/whatis_htmldom.asp
• https://www.w3schools.com/js/js_htmldom.asp
9.2.1 Understand regular
expressions. Activity 35: Creating forms

9.2.2 Understand regular Tutors to discuss/demonstrate forms including:


expressions used for
validation check. Search • <form></form> to define the form
for matching: • these form elements/attributes/types/properties
a. letters and o <input>
sequences of ▪ type
upper/lower case • button
characters • checkbox
b. numbers • radio
c. punctuation and • submit
other symbols. • text (tutors could include number, tel,
password, etc. if they want to)
9.2.3 Be able to interpret • url
and construct patterns o <select></select> (drop-down list)
consisting of repeating ▪ <option></option> (options that can be selected)
characters and digits. ▪ selected
o <textarea></textarea> (multi-line input field)
9.3.3 Understand how ▪ rows
events can be used to ▪ columns
trigger a function: o <label></label> (label for an <input> element)
a. form events. o <fieldset></fieldset> (to group related elements in a form)
o <legend></legend> (caption for a <fieldset> element)
o placeholder (hint to describe what to enter)
o CSS styling (e.g. input field widths, padding, margins, box-
sizing, borders)

Tutors to provide tasks that will enable the students to:

39
• create code to cover all the above
• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code.

Resources

• https://www.w3schools.com/css/css_form.asp
• https://developer.mozilla.org/en-
US/docs/Learn/HTML/Forms/Styling_HTML_forms

Activity 36: Events and validation

Tutors to provide short introduction to events and their use in form


validation:

• event - action a browser or user does that can be detected


• event handler – attribute added to an HTML element used to
trigger functions in JavaScript code
• can be used to trigger validation checks (e.g. clicking submit
button).

Tutors to discuss/demonstrate validating forms using JavaScript including:

• presence checks (including making sure input is present, items


selected from drop down boxes, checkboxes, etc.)
• type checks (including isNaN())
• range checks (between min and max numeric values)
• length checks (input is a length).

Format checks to be covered in regular expressions.

Tutors to provide tasks that will enable the students to:

• create code to cover all the above


• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code.

Resources
• https://www.geeksforgeeks.org/form-validation-using-html-javascript/

40
Activity 37: Regular expressions and validation

Tutors to explain that a regular expression is a sequence of characters


that define a search pattern. Input is then checked against this pattern to
determine whether it is valid.

Tutors to explain:

• [ ] finds range of characters


• ^ look at the beginning of string
• | or - pattern can be one thing or another
• + at least one character
• * zero or more character
• ? zero or one character
• $ looks at end of string
• { } how many occurrences
• /s a whitespace.

Tutors to provide written tasks for students to define particular patterns.

Tutors to discuss/demonstrate declaring and defining regular expressions


in Javascript such as:

• var regExpExample =/^[A-Z]{7}[a-z]+$/

/ start of expression
^ match beginning of string
[A-Z] uppercase letters
{1} 7 characters only
[a-z] lowercase letters
+ at least one of
$ end of string
/ end of expression

This regular expression searches the beginning of the string to


make sure there are exactly seven uppercase letters and then
checks to make sure the rest of the string is made up of at least
one lowercase letter.

SUNSETTing – acceptable
sunsetTTing – not acceptable
SUNSET – not acceptable

41
SUNSETT3ng – not acceptable

• var regExpExample2 = /[0-9]{3}/

/start of expression
[0-9] digits 0 to 9
{3} 3 digits only
/end of expression

this regular expression searches for exactly three digits

054 – acceptable
2 – not acceptable
a23 – not acceptable

• var regExpExample3 = /[A-Z]{2}[0-9]{1}\s[0-9]{1}[A-


Z]{2}

/start of expression
[A-Z]{2} two uppercase letters
[0-9]{1} one digit
\s a space
[0-9]{1} one digit
[A-Z]{2} two uppercase letters

This regular expression searches for two uppercase letters,


followed by one digit, followed by a white space, followed by one
digit, followed by two uppercase letters.

BE1 1BB – acceptable


Bb1 1BB – not acceptable
0B1 2XY – not acceptable

Tutors to discuss/demonstrate testing input using .test. For example:

if (regExpExample.test(input)===false){
alert("Must start with an uppercase letter then lowercase letters ")
}

Tutors to discuss/demonstrate testing whether a word can be found in a


string using .match. For example:

var str = "the cat and the dog"

42
if (res = str.match(/the/g)){
alert("a match was found")
}else{
alert("no match found")
}

Tutors to provide tasks that will enable the students to:

• write a regular expression pattern


• interpret a regular expression pattern
• create code to cover all the above
• describe how code examples work
• identify/explain the code/errors in the code
• add to or amend code.

Tutors could also stress the importance of JavaScript validation by


demonstrating how a page with a form can be inspected in the browser
and HTML attributes overridden.

Resources
• https://regexr.com/
• https://www.w3schools.com/jsref/jsref_isnan.asp

Activity 38: Sending form information

Tutors to discuss the basic principles of how form information is sent from
the browser to the server.

• At some point forms will normally require interactivity with a


server; for example, adding records to a database.
• This interaction is called a request.
1. The request is sent from a user through a client device to
the server.
2. The server acknowledges the request and replies to the
client device with the results of the request.
3. The client device displays the results to the user.

Students to produce an annotated diagram of the process.

43
27 9.3.3 Understand how Activity 39: Events in more depth • Communication
events can be used to • Adaptive learning
trigger a function: Tutors to recap events and explain that the user interface can trigger • Adapting prior knowledge,
a. User Interface (UI) events including keyboard, mouse, focus and blur events. skills and experience of IT
events to deal with new
b. keyboard events Students could work in small groups to research these events or tutors situations/contexts
c. mouse events could provide worksheets for students to complete.
d. focus and blur
events. Keyboard events

• keydown – triggered when any key is pressed down, triggered first,


and always before the browser processes the key
• keypress – triggered when a key that produces a character value is
pressed down, triggered after keydown, and before the browser
processes the key
• keyup – triggered when any key is released, triggered last, and the
browser processes the key

Mouse events

• mousedown – triggered when a user presses a mouse button over


an element
• mouseup – triggered when a user releases a mouse button over an
element
• onclick – triggered when a user clicks a button

Focus and blur events

• focus – triggered when an element gets focus


• blur – triggered when an element loses focus

Other events

• load – triggered immediately after a page has been loaded


• change – triggered when a user changes the selected option of a
<select> element

Tutors to provide tasks that will enable the students to:

• create code to cover all the above (change will be covered in weeks
28 to 29)
• describe how code examples work
• identify/explain the code/errors in the code

44
• add to or amend code.

Resources
• https://www.mutuallyhuman.com/blog/2018/03/27/keydown-is-
the-only-keyboard-event-we-need/
• https://www.w3schools.com/js/js_events.asp
• https://www.w3schools.com/js/js_htmldom_events.asp

28- 9.3.4 Understand how to Activity 40: Slideshow • Communication


29 combine JavaScript with • Adaptive learning
HTML and CSS to create Tutors to discuss/demonstrate a slide show program that: • Adapting prior knowledge,
page components: skills and experience of IT
• includes multiple images to deal with new
a. slideshow • includes a next and back button situations/contexts
b. modal boxes • displays the first slide when the page loads
c. modal images • moves to the next image when the next button is clicked
d. filter list • moves to the previous image when the back button is clicked
e. sort list • moves to the first image when the next button has been clicked
f. pop-ups and the last image has been viewed
g. tabbed content. • moves to the last image when the back button has been clicked
and the first image has been viewed.

Tutors to provide tasks that will enable the students to:

• describe how code examples work


• identify/explain the code/errors in the code
• add to or amend code.

Tutors could use the code in the resources for these tasks.

Resources
• https://www.makeuseof.com/tag/how-to-build-javascript-slideshow/
• https://www.w3schools.com/w3css/w3css_slideshow.asp
• http://javascript-tutors.net/index.php/lesson-29-creating-slideshow-
in-javascript/

Activity 41: Modal boxes

Tutors to explain that modal disables the main window but keeps it visible
and that users must interact with the modal window before they can
return to the main window.

45
Tutors to discuss/demonstrate modal boxes including:

• displaying the modal box


• closing the modal box
• textual content
• action button(s), e.g. yes, no
• drawing attention to the model by darkening the background of the
page.

Tutors to provide tasks that will enable the students to:

• describe how code examples work


• identify/explain the code/errors in the code
• add to or amend code.

Tutors could use the code in the resources for these tasks.

Resources
• https://www.w3schools.com/howto/howto_css_modals.asp
• https://sabe.io/tutorsials/how-to-create-modal-popup-box

Activity 42: Modal images

Tutors to discuss/demonstrate modal images including:

• displaying the modal image


• closing the modal image.

Tutors to provide tasks that will enable the students to:

• describe how code examples work


• identify/explain the code/errors in the code
• add to or amend code.

Tutors could use the code in the resources for these tasks.

Resources
• https://www.w3schools.com/howto/howto_css_modal_images.asp
• https://codepen.io/Muhnad/pen/dMbXNb

46
Activity 43: Filter list

Tutors to discuss/demonstrate filter lists including:

• a filter list used to narrow down a list to a specific search item


• a search input field
• search items
• a method of filtering the search items depending on the contents of
the search field.

Tutors to provide tasks that will enable the students to:

• describe how code examples work


• identify/explain the code/errors in the code
• add to or amend code.

Tutors could use the code in the resources for these tasks.

Resources
• https://www.w3schools.com/howto/howto_js_filter_lists.asp
• https://www.w3schools.com/howto/howto_js_filter_table.asp

Activity 44: Sort list

Tutors to discuss/demonstrate sort lists including:

• an unsorted list
• a button to trigger the process of sorting the list
• the sorted list to be displayed in place of the unsorted list.

Tutors to provide tasks that will enable the students to:

• describe how code examples work


• identify/explain the code/errors in the code
• add to or amend code.

Tutors could use the code in the resources for these tasks:

• sortingListExample.html
• https://www.w3schools.com/howto/howto_js_sort_list.asp

47
Activity 45: Tabbed content

Tutors to discuss/demonstrate tabbed content including:

• tabs
• different content depending on the tab selected.

Tutors to provide tasks that will enable the students to:

• describe how code examples work


• identify/explain the code/errors in the code
• add to or amend code.

Tutors could use the code in the resources for these tasks.

Resources
• https://www.w3schools.com/howto/howto_js_tabs.asp
• https://www.101computing.net/creating-tabs-in-html-css-js/

30 9.3.2 Be able to program Activity 46: Object orientation • Communication


functionality: • Adaptive learning
a. object orientation. Tutors to discuss/demonstrate basic object orientation including: • Adapting prior knowledge,
skills and experience of IT
• JavaScript is an object-based language based on prototypes to deal with new
• This allows you to create hierarchies of objects and to have situations/contexts
inheritance of properties
• user defined objects types
o can be used for complex kinds of variables
o can store multiple data items and functions
o allow you to group related data items into a single object
o allow you to create as many ‘instances’ of that particular
object type as you want to
o can be thought of as a ‘blueprint’ for objects
o the ‘blueprints’ can be expanded.

Tutors to provide tasks that will enable the students to:

• explain/describe/discuss JavaScript object orientation


• create an object type
• create objects of that type.

48
Tutors could use the task provided (objectTutorResource.pdf and
ooExample.html).

Resources
• objectTutorResource.pdf
• ooExample.html
• https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
• https://www.tutorsialspoint.com/javascript/javascript_objects.htm
• https://www.w3schools.com/js/js_object_definition.asp

49
FOR INFORMATION ABOUT EDEXCEL, BTEC OR LCCI QUALIFICATIONS
VISIT QUALIFICATIONS.PEARSON.COM

EDEXCEL IS A REGISTERED TRADEMARK OF PEARSON EDUCATION LIMITED

PEARSON EDUCATION LIMITED. REGISTERED IN ENGLAND AND WALES NO. 872828


REGISTERED OFFICE: 80 STRAND, LONDON WC2R 0RL
VAT REG NO GB 278 537121

GETTY IMAGES: ALEX BELMONLINSKY

You might also like