Scheme of Work For Unit 2
Scheme of Work For Unit 2
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
● 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)
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 "
o "
4
• identify/explain the code/errors in the code
• add to or amend code.
Tutors to demonstrate/discuss:
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.
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>
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).
• <iframe></iframe>
• src
• width
• height
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.
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
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:
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:
Tutors to provide a range of tasks that will enable the students to:
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:
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:
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:
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
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:
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.
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
• 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.
• 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
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.
• 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.
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 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.
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.
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
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:
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.
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
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”>
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.
Resources
• https://www.w3schools.com/js/js_string_methods.asp
• https://www.w3schools.com/jsref/jsref_try_catch.asp
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.
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.
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
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
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
Resources
• https://www.geeksforgeeks.org/form-validation-using-html-javascript/
40
Activity 37: Regular expressions and validation
Tutors to explain:
/ 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
SUNSETTing – acceptable
sunsetTTing – not acceptable
SUNSET – not acceptable
41
SUNSETT3ng – not acceptable
/start of expression
[0-9] digits 0 to 9
{3} 3 digits only
/end of expression
054 – acceptable
2 – not acceptable
a23 – not acceptable
/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
if (regExpExample.test(input)===false){
alert("Must start with an uppercase letter then lowercase letters ")
}
42
if (res = str.match(/the/g)){
alert("a match was found")
}else{
alert("no match found")
}
Resources
• https://regexr.com/
• https://www.w3schools.com/jsref/jsref_isnan.asp
Tutors to discuss the basic principles of how form information is sent from
the browser to the server.
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
Mouse events
Other events
• 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
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/
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:
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
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 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
• 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 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
• tabs
• different content depending on the tab selected.
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/
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