website end-user requirements

1a
 expectations that visitors to the website would have,
• the purpose in accessing the website
• it should be attractive to look at
• it should be simple to find links to go between pages
• the content should be well organised
1b
website functional requirements

2a
technical outcomes that the HTML and CSS code must deliver so that website operates properly
• displays the text and image content accurately
• styles the consistently
• allows users to navigate and to control media like audio and video

2b
home page (website structure)

3a
 landing page for the website,
• page that a search engine would suggest first,
• should provide navigation to other pages
• filename could be home.html or index.html
3b
linked pages (website structure)

4a
 topic pages that should be reachable from the home page
• the home page will have hyperlinks to other pages on the same website
• there should be links to return to the home page
4b
media content

5a
text, audio, video and images that may be displayed on a web page
• jpg, png, gif
• wav, mp3
5b
external weblink

6a
a hyperlink that connects to a webpage on another website,
• usually requires an absolute address
6b
website structure (diagram)

7a
a visual plan naming each page on the website and
• showing how site pages are linked to each other,
• also shows external links to other websites
7b
user interface (design stage)

8a
 • the visual appearance (and audio presentation) of the website
along with
• interaction by the user (navigation and other clickable elements)
8b
wireframe (design stage)

9a
 a line diagram showing a plan for
• the structure of a web page,
• it presents the placement for content and notes for basic styling
• the actual content is not usually shown,
• placeholders are used to show position and size of text, image and media
• the file type of images and audio/video players may be shown

9b
visual layout (design stage)

10a
the placement or arrangement of elements on the web page is:
• organised, attractive logical
• the vertical stack sequence of elements (1st at the top)
• the size of elements (font size, image size) to be readable
• organisation of sections
• a plan for placing navigation links

10b
page readability

11a
 text is presented to a high standard so that it is
• clear and understandable by all end-users,
• includes careful choice of colours, sizes, typeface
• good use of :
• <h1> .. <h6>
• <div> sections
• appropriate lists <ol>, <ul> and <li>
• images of an appropriate size

11b
navigational links (design stage)

12a
 clickable elements like text or images that allow a
user to choose and browse to another page on the
same website
12b
vertical positioning of media (on the web page)

13a
a simple page layout where elements such as images and players one below the
other,
• and not side by side
• important content like navigation links will be placed at the top
13b
media file formats (design stage)

14a
 a file extension or file type,
• examples: .png .mp3 .jpeg .wav .gif
• identifies how the image, video or audio data has been encoded in binary
• file type should be stated in the wireframe if possible
14b
(web site) page consistency

15a
 a well designed website will have
• common features on all pages that help the user to recognise the "brand" of the site and
• also help with the readability and navigation
• same image sizes
• same styling for all headings
• navigation links same position on all pages
• it also means a website should look similar on all devices (desktop PC, laptop, tablet, phone) and browsers

15b
low fidelity prototype (web design)

16a
 a type of design for a webpage,
• based on a wireframe, sketches in basic details like actual colours, text, rough images,
• lets client see a more lifelike design, not yet 100%
• client gives feedback on likes, dislikes, changes

16b
audio compression (audio file format)

17a
 music and other sound data is processed to reduce the file size,
• lossy audio compression will lose some quality but makes small files (mp3),
• lossless compression loses nothing on quality

17b
WAV (audio file format)

18a
 audio format,
• usually no compression (sometimes lossless compression),
• advantage: high quality,
• disadvantage: large file size so its limited to maximum of about 4GB
18b
MP3 (audio file format)

19a
 audio format,
• lossy compression,
• advantage: good at making file size small
• very good quality even though some data is lost
19b
audio quality (audio file format)

20a
 sound quality is reduced by:
• low sample rate and lossy compression
quality is increased by:
• high sample rate and no compression or lossless compression
(high quality sounds like radio broadcast or cinema sound, low quality is like how people sound on the phone)

20b
audio file-size (audio file format)

21a
 amount of storage required for sound is reduced by
• low sample rate and lack of compression
file size is increased by
• high sample rate and lack of compression
• when files are smaller, more files can fit onto a storage device
21b
graphic compression

22a
 bitmap images can be processed to reduce file size
• this may also reduce the quality depending on type of compression
• example: png and jpeg use lossy compression
• example: gif uses lossless compression
22b
JPEG (image file format)

23a
 a lossy compression image format
• often used for full colour photos,
• no animation and no transparency
• sometimes written as .jpg
23b
GIF (image file format)

24a
 a lossless compression image format,
• often used for cartoons and icons as
• only 256 colours are used,
• animation and transparency are both supported
24b
PNG (image file format)

25a
a lossless compression image format,
• used for full colour images,
• transparency is supported but
• animation is not supported
25b
bitmap (image)

26a
 an image represented as a grid of pixels or dots,
• the number of pixels is called resolution,
• the number of colours for a pixel is called colour-
depth
26b
graphic animation

27a
 a moving image,
• more like a cartoon or very short movie,
• example would by animated GIF
• no animation for jpeg or png
27b
graphic transparency

28a
when images overlap on different layers it is possible to see "through" the top layers and
• identify images behind or below the top layer,
• 100% is completely see-through
• gif and png do support transparency
• no transparency for jpeg
28b
graphic colour depth

29a
a measure of the number of colours available for a pixel,
• a colour "code" can have
• 1 bit depth (2 colours),
• 8 bit depth (256 colours),
• 16 bit depth (64 thousand colours) or
• 24 bit depth (16 million colours)

29b
audio resolution

30a
 sound is digitised by storing short snapshots (samples)
• a single digital sound sample is an approximate measure of real sound,
• the real sound is measured on a scale,
• a 16 bit sample is more accurate than an 8 bit scale but uses more data
storage
30b
image resolution

31a
 the number of pixels in a bitmap grid,
• many small pixels produce better quality than fewer larger
pixels but need more data storage
31b
audio sampling rate

32a
 sound is digitised in a sequence of snapshot clips,
• typically 44,100 samples per second are taken,
• a higher rate increase quality but also needs more data storage
32b
file compression

33a
 reducing the amount of data required to encode a file
• means more information can be squeezed into the same storage and
• files take less time to upload / download
• lossy compression reduces data by throwing away some data (also reduces quality)
• lossless compression uses advanced mathematical techniques to transform the data using fewer values, none of the original data is lost
• compressed files have to be decompressed to use again

33b
copyright designs and patents act

34a
a UK law that protects the rights of the creator of media like photos or music,
• it is illegal to copy the original work without a suitable licence and possible
payment,
• anyone breaking the law can be taken to court and fined
34b
copyright and businesses

35a
 a business must get permission to use media from
the copyright owner,
• a business can also protect any work that it creates

35b
copyright and individuals

36a
a person who creates music or photos is protected in law from anyone copying
without permission,
• also it is illegal for a person to copy and use images from the internet without
getting permission
36b
external CSS stylesheet

37a
 a file containing CSS rules (separate from HTML file),
• an HTML file must include a <link> to access the rules in the stylesheet,
• useful when many HTML files use the same CSS rules
• helps to make pages consistent by using same styles on each page
• lower priority than internal stylesheet and inline styles
37b
<link> tag

38a
a tag placed within the <head> section of an HTML
file to link to CSS rules in an external file

38b
internal stylesheet

39a
CSS style rules placed directly in the <head> section of an HTML file using the
<style> tag
• has a higher priority than external stylesheet, lower priority than inline
• rules only affect a single web page
39b
<style> tag

40a
a tag used to set a CSS rule within an internal style sheet in the <head> section of
an HTML file
• the rules within the <style> section on an internal stylesheet will only affect the
HTML content on the same page
40b
inline style

41a
 sets a style property for an element within the
element HTML tag itself
• has a higher priority than internal stylesheet or
external stylesheet
• only works for the single tag with the inline
property

41b
style property for HTML tag

42a
a way to style a single element without using an internal or external stylesheet :
• example: <h1 style="color:blue;">This is a heading</h1>
• has a higher priority than internal or external CSS but only affects a single
element
42b
CSS style sheet priority

43a
when more than one CSS rule selects the same element there
may be conflict about which style to use:
• usually inline has the highest, then internal, then external
43b
CSS selector

44a
the element(s) that a CSS rule is designed to affect,
• could be an element like p, h1, li, img, body etc or
• a class like .contents or
• an id like #summary
44b
CSS element selector

45a
used to select all elements of same type in an HTML
document:
• p, h1, ul, ol, li, img, div also body
45b
CSS class selector

46a
 used to select elements marked with an group membership
identifier like .photoCaption
• similar elements which are not members will not be affected
46b
CSS ID selector

47a
 a unique identifier like #conclusion,
• a single element can be selected and styled
• other similar elements will not be affected
47b
CSS selector priority

48a
when more than one CSS rule selects the same element there may be
conflict about which style to use:
• usually #ID has the highest priority, then .class, then ordinary element
48b
font-family (css property)

49a
 identifies which font face to use for text,
• a single font can be set or a list of alternative fonts in order of priority incase some fonts are not available on the browser
• example:
p { font-family: verdana; }
• warning: it is font-family, not simply font

49b
font-size (css property)

50a
 specify how large or small text should appear,
• example:
h1 { font-size: 16px; }
• although px is most common unit others are possible (%, em, pt)
• warning:
the property is called font-size, not simply size
50b
color (text) (css property)

51a
 the colour of text,
• example:
body { color: gray;}
• US spelling,
• colour can be specified as a name or a code
• red,
• #ff6347,
• rgb(255,99,71),
• hsl(9,100%,64%)

51b
• setting colour for body will affect the whole page
text-align (css property)

52a
 the horizontal placement of text on a line:
• example:
h2 { text-align: center; }
• left (default),
• right
• center (US spelling)
• warning: the property is called text-align, not simply align

52b
background-color (css property)

53a
 the colour of the block area surrounding elements such as
• body, h1, p, ul, ol, li, div
• example:
div { background-color: azure; }
• warning the property is called background-property not simply background
53b
<html> (HTML tag)

54a
 tag used for page structure in html,
• encloses the <head> and <body> zones,
• it stands for "Hyper Text Markup Language"
54b
<head> (HTML tag)

55a
part of an HTML document that contains metadata
• <title>,
• <link> to external stylesheet
• or <style> rules for an internal style sheet.
55b
<title> (HTML tag)

56a
tag used to set the document title that is displayed
at the top a browser window or tab
56b
<body> (HTML tag)

57a
 used to contain all the text, media and navigation content of an
HTML file
• any style rules for body { } will affect all elements on the page
57b
<div> (HTML tag)

58a
 used to define a part or section of the HTML document
• example: a section containing a heading a paragraph and media element
• using div sections organised into different css classes or id with various
background colours can help to make a page look attractive
58b
<h1> (HTML tag)

59a
 a content heading,
• the numbers indicate the size, 1 is largest, 6 is the smallest
• <h1> is often used at the top of a page as the main heading
• do not confuse with the <head> tag
• proper use of different heading sizes is a good way to help make a page more readable
59b
<p> (HTML tag)

60a
 a paragraph,
• could be a word, a line or several lines
• sometimes a hyperlink may appear within a paragraph
• example:
<p> The quick brown fox jumped over the lazy dog. </p>
60b
<ol> (HTML tag)

61a
 used to mark a numbered list,
• will contain a set of <li> list items
• don't confuse with <ul>, an unordered list or bullet list
• example:
<ol>
<li> first </li>
<li> second </li>
<li> third </li>
</ol>
61b
<ul> (HTML tag)

62a
used to mark a bullet list or unordered list,
• will contain a set of <li> list items
• don't confuse with <ol>, an ordered list
• example:
<ul>
<li> first </li>
<li> second </li>
<li> third </li>
</ul>
62b
<li> (HTML tag)

63a
 used for an individual list item,
• always use with either either <ol> or <ul> at start/end of the list
63b
<img> (HTML tag)

64a
HTML tag to include an image element such as a jpeg photo file,
• used along with the src (source) property is the relative or
absolute address for the image file
• it is good to include the alt description to help accessibility.
• example:
<img src="kitten.png" alt="cute cat">
64b
src (img property)

65a
 a property of the <img> tag,
• the source of the image,
• could be an absolute reference or a relative reference
• the source could be a jpeg, png or gif file in the same internal website
• the course could be an image file on an external server
• a common error is the misspell as "scr"

65b
<audio> (HTML tag)

66a
HTML tag to include sound file element such as an
mp3 music file,
• used along with the <source> tag and src property
to identify the sound file name

66b
<video> (HTML tag)

67a
HTML tag to include movie file element such as an
mpeg file,
• used along with the <source> tag and src property
to identify the movie file name

67b
<a> (HTML tag)

68a
 HTML tag to include a hyperlink,
• applied to text or an element,
• used along with the href property to identify the destination of the link
• stands for "anchor"
• example:
<a href="www.stkentigernsacademy.org">Click to see our school site</a>
68b
href (property of a tag)

69a
 a property of the <a> tag,
• the destination URL (web address) to link to,
• could be an absolute reference or a relative reference
• example:
href = "www.stkentigernsacademy.org"
href = "home.html"
69b
hyperlink

70a
 a clickable element on a webpage,
• text or another element
• example: an image,
• allows a user to navigate to another webpage or website
70b
relative address

71a
 defined by the href property of a hyperlink or the src property of an image
• a file or file path that assumes the target is in the same folder/directory or a sub folder of the same folder as the HTML file
that contains the hyperlink
• can only be used to an internal address reference
• example 1: href = "home.html",
• example 2: src = "photos/selfie.jpeg"

71b
absolute address

72a
 defined by the href property of a hyperlink or the src property of an image
• a full path URL that names the protocol, the (web) server, possibly folder and finally the filename and extension (see the graphic)
• an external reference will need to be an absolute address
• also possible to write an absolute address to the same website
• example:
href = "www.stkentigernsacademy.org"

72b
internal address reference

73a
 the reference is to a file on the same website,
• could be a relative address or an absolute address
• don't confuse with internal CSS stylesheet
• example
href = "home.html"
href = "www.acme.com/home.html"
73b
external address reference

74a
the reference is to a file on another website,
• must be an absolute address
• don't confuse with external CSS stylesheet
• example:
href = "www.acme.com"
74b
javascript code (script)

75a
 A programming language often used on a website,
• small javascript programs are called scripts and are executed by the browser
• scripts can be stored in separate external script files or script code can be written internally in an HTML file
• example: mouse events
onmouseup, onmouseover

75b
onmouseup javascript command

76a
 a javascript command which is used to
• make a webpage respond to the user clicking on an element
like a button
76b
onmouseover javascript command

77a
 a javascript command which is used to
• make a webpage respond to the user moving the mouse over
an element like a button
77b
check link operation (web testing)

78a
 during web testing a developer will
• make sure that linked CSS files are styling the
content as per design
78b
check navigation (web testing)

79a
 during web testing a developer will
• make sure that clickable hyperlinks work and take
the user to the correct webpage destination

79b
check text and styles (web testing)

80a
 during web testing a developer will
make sure that text is the correct font, alignment, colour and
size
80b
check media (web testing)

81a
during web testing a developer will make sure that
• images are in the correct place,
• correct size,
• correct image file,
• audio and video should play as per design
81b
check consistency (web testing)

82a
 during web testing a developer will make sure that
• page elements are placed and styled and sized in a similar way and that
• each page also matches the same overall design
• navigation links should be in the same position on every page
82b
website fitness for purpose (web testing)

83a
 the finished website is
• compared to the original end-user and functional
requirements to make sure it does all that is expected.
83b