Web Design

Question 1

What is a site structure diagram?

Answer 1

A diagram used to design the names of the required web pages and how the web pages will link together using hyperlinks

Question 2

What are the two types of site structures?

Answer 2

• Linear
• Hierarchal

Question 3

What is a linear site structure?

Answer 3

Structure that allows users to move forwards or backwards through a set of web pages - no direct hyperlinks to specific web pages

Question 4

What is a hierarchal site structure?

Answer 4

Structure that groups web pages into ain topics, which is used to create topic and subtopic web pages

Question 5

What must an effective user interface have?

4

Answer 5

• Navigational links
• Consistency across multiple pages
• Relative vertical positioning of media
• File formats of the media (text, graphics, video and audio)

Question 6

What are the two hyperlink types?

Answer 6

• Internal
• External

Question 7

What does an internal hyperlink do?

Answer 7

Takes the user from one web page to another within the same website

Question 8

What does an external hyperlink do?

Answer 8

Takes the user from one web page to another in a different website

Question 9

What is a wireframe used for?

Answer 9

To design the layout of every web page in a website

Question 10

What must a wireframe include?

4

Answer 10

• All text elements on the page
• Any media elements (graphics, video & audio)
• Elements that allow the user to interact with the page
• Intended position and type of all hyperlinks on page

Question 11

What are the standard image file formats?

3

Answer 11

• Gif
• PNG
• JPEG

Question 12

What are the standard video file formats?

2

Answer 12

• MP4
• AVI

Question 13

What are the standard audio file formats?

2

Answer 13

• MP3
• WAV

Question 14

Gif Properties

Compression, Animation, Transparency & Colour Depth

Answer 14

• Compression: Lossless
• Animation: Yes
• Transparency: Yes
• Colour Depth: 8 bit

Question 15

PNG Properties

Compression, Animation, Transparency & Colour Depth

Answer 15

• Compression: Lossless
• Animation: No
• Transparency: Yes
• Colour Depth: 24 bit

Question 16

JPEG Properties

Compression, Animation, Transparency & Colour Depth

Answer 16

• Compression: Lossy
• Animation: No
• Transparency: No
• Colour Depth: 24 bit

Question 17

MP4 Properties

Compression

Answer 17

Compression: Lossy

Question 18

AVI Properties

Compression

Answer 18

Compression: Lossless

Question 19

WAV Properties

Compression, Quality & File Size

Answer 19

• Compression: Lossless
• Quality: Higher
• File Size: Larger

Question 20

MP3 Properties

Compression, Quality & File Size

Answer 20

• Compression: Lossy
• Quality: Lower
• File Size: Smaller

Question 21

What are prototypes used for?

Answer 21

To demonstrate or test the usability of the website design

Question 22

What is a low-fidelity prototype?

Answer 22

Paper based prototype

Question 23

What factors affect size / quality?

3

Answer 23

• Resolution
• Colour Depth
• Sampling Rate

Question 24

How does resolution affect size / quality?

Answer 24

The larger the resolution, the more pixels (better quality), the more datat store and the larger the file size

Question 25

How does colour depth affect size / quality?

Answer 25

The larger the colour depth, the more colours can be used (better quality), the more data and the larger file size

Question 26

How does sampling rate affect size / quality?

Answer 26

The larger the sampling rate, the more data to store (better quality) and the larger file size

Question 27

What is lossless compression?

Answer 27

Compression without quality reduction

Question 28

What is lossy compression?

Answer 28

Compression with quality reduction

Question 29

Why is compression used? | 2

Answer 29

* To have media require less storage space * To have media be able to transmit faster

Question 30

What does HTML stand for?

Answer 30

Hyper Text Markup Language

Question 31

How is the anchor tag used? | HTML code

Answer 31

` Next Page `

Question 32

What does the href attribute do?

Answer 32

Contain the address of a web page or the name of a HTML file

Question 33

What are relative addresses used for?

Answer 33

To link pages and resources within the same website (internal link)

Question 34

What are absolute addresses used for?

Answer 34

To link to web pages outside of your website (external link)

Question 35

What does the Copyright, Designs and Patents act 1988 make illegal? | 3

Answer 35

* Make unauthorised copies of content * Distribute content without permission of the owner * Use unauthorised content

Question 36

What is the purpose of the div tag?

Answer 36

To define and group together a section of code to format with CSS

Question 37

What are the required attributes of the img tag? | 2

Answer 37

* src: specifies the file path of an image * alt: specifies alternative text for the image if it cannot display

Question 38

What is the structure of the audio tag? | HTML Code

Answer 38

``` ```

Question 39

What is the structure of the video tag? | HTML Code

Answer 39

``` ```

Question 40

What is CSS used for?

Answer 40

To describe how HTML is to be displayed on the screen

Question 41

What are the two ways of implementing CSS?

Answer 41

* Internal * External

Question 42

What is the selector?

Answer 42

Which element, class or ID of the web page is being styled

Question 43

What is the declaration?

Answer 43

What is being changed by the CSS

Question 44

What is the property?

Answer 44

The aspect of the selector being changed

Question 45

What is the value?

Answer 45

The new value you want for the property

Question 46

What are the CSS selectors? | 4

Answer 46

* Asterisk * Element * Class * ID

Question 47

What is asterisk applied to?

Answer 47

Every element

Question 48

What is element applied to?

Answer 48

All HTML elements specified

Question 48

What is class applied to?

Answer 48

All HTML elements assigned to the class

Question 49

What is ID applied to?

Answer 49

All HTML elements assigned to the specific ID

Question 50

What are the five CSS properties and their functions?

Answer 50

* font-family: change text font * font-size: change text size * color: change text color * text-align: change text alignement to left, right or center * background-color: change background colour of html elements

Question 51

How is a hex code represented?

Answer 51

#RRGGBB and the values go from 00 to FF to identify the colours intensity

Question 52

What is the link tag used for?

Answer 52

To link the HTML file to an external document in the head tag

Question 53

How is the link tag structured?

Answer 53

``

Question 54

What are the benefits of using external CSS? | 2

Answer 54

* Ensures there is consistency across multiple web pages * Makes HTML code for web pages more concise and readable

Question 55

What is the order of priority for CSS styles?

Answer 55

1. In-Line CSS 2. Internal CSS 3. External CSS

Question 56

What is the order of priority for CSS selectors?

Answer 56

1. ID 2. Class 3. Element 4. Asterisk

Question 57

What are the two JavaScript events?

Answer 57

* onmouseover * onmouseout

Question 58

What does onmouseover do?

Answer 58

When the users pointer moves on to an element with the onmouseover event, JavaScript code can run

Question 59

What does onmouseout do?

Answer 59

When the users pointer moves off of an element with the onmouseout event, JavaScript code can run

Question 60

What is analysed during website analysis? | 2

Answer 60

* End-user requirements * Functional requirements

Question 61

What are end user requirements?

Answer 61

Tasks that the people who will use the website must be able to do

Question 62

What are functional requirements?

Answer 62

The processes the website must carry out and identifies the information required for the website to carry out its purpose

Question 63

What elements are tested to ensure an effective user-interface design? | 4

Answer 63

* Links & navigation works correctly * All web pages constantly follow the same design * Matches user-interface design * Media (texts, graphics, audio & video) display correctly

Question 64

How does a developer evaluate if a website is fit for purpose or not?

Answer 64

By checking to see if it meets both requirement types