Web Design and Systems

Question 1

Define a website

Answer 1

A website is a collection of related documents known as web pages that contain information in many forms

Question 2

What is a hyperlink?

Answer 2

Area of a page that, when clicked, takes the user to a different location

Question 3

What is navigation of a web page and what are the three forms of navigation?

Answer 3

Navigation defines how the user moves around the web page. The three types of navigation are linear, hierarchical and multi-level(composite).

Question 4

What are the two forms of design notations for websites?

Answer 4

Structure Diagram and Wireframe

Question 5

Define a wireframe and state two considerations when designing a wireframe

Answer 5

A wireframe is a visual guide used to represent a website’s user interface
Considerations: Navigation, Interface, Presentation of Data, Formatting

Question 6

Give an example of how you can create a wireframe

Answer 6

Use specialised software such as Mockingbird

Draw a design

Question 7

Why would it be better to produce a high definition wireframe?

Answer 7

Additional details such as font colour and size mean that the wireframe closely represents the website more

Question 8

What is the purpose of a wireframe?

Answer 8

To show functionality and behaviour of a website

Question 9

How does the functions of CSS and HTML differ?

Answer 9

HTML - used to create and define the web page content

CSS - used to add rules on how the content of the HTML file should be presented

Question 10

<h1> Hello World </h1>

Write a small piece of HTML to code the above heading

Answer 10

< h1> Hello World

Then you would close the tag (can’t do it next to it because it would turn it into the actual code produced but this is how you close a heading tag below)

<h1> </h1>

Question 11

Outline the key differences between the HTML content inside the element and the element

Answer 11

The content in the element will be displayed in the title bar and NOT ON THE WEBPAGE
The content in the element will be displayed on the web page

Question 12

What is metadata used for in relation to web pages?

Answer 12

Metadata is used to communicate information to the browser and search engines about the content of the website

Question 13

Give on benefit and one limitation of using the meta pragma tag in your HTML

Answer 13

Meta Pragma tag tells the browser not to cache your page
Advantage: Forced to load all the updated content when you go onto webpage
Disadvantage: Load time for webpage is longer

Question 14

What is Javascript used to do in relation to webpages?

Answer 14

Add interactivity and custom behaviours

Question 15

Give an example of a use of Javascript

Answer 15

Interactive Games
Collapsible Content
Allowing users to enter data

Question 16

Describe Progressive Enhancement of a webpage and what it allows websites to do

Answer 16

Progressive Enhancement is a layered approach consisting of three layers to a website(Content, Presentation and Behaviour)
It allows webpages to be viewed on multiple devices with different capabilities and connection speeds

Question 17

Why are external style sheets a more efficient way to style your web page?

Answer 17

Can be applied to many pages in the website, saving memory and development time

Question 18

What is the purpose of this tag?

Answer 18

This tag allows the browser to use these keywords in order to find this website when a user searches for any of these content keywords
The keywords are added to search engines database of websites

Question 19

Is Java a client side scripting language or server side scripting language?

Answer 19

Client side - runs on user’s browser not the web server

Question 20

Write the CSS for making this html code lavender in colour with the font of arial 
<div>
   < a href = "www.google.co.uk>
</div>
It is surrounded by a div tag

Answer 20

hyperlinks {

 color : lavender, 
 font-family: arial, }

Question 21

<p class="quote"> I didn't succumb to the stereotype that science wasn't for girls</p>
Style this specific paragraph so that it is blue in colour and has a font of Verdana 
The class of this paragraph is "quote"

Answer 21

.quote {
color: blue,
font-family: Verdana,
}

Question 22

What is the difference between an ID selector and a Class selector?

Answer 22

ID selector - Uses the ID attribute to select a SINGLE element
Class selector - Use the class attribute to select (possibly) multiple sections of HTML code

Question 23

What is the purpose of Ajax Technology?

Answer 23

To update the content of the webpage without reloading entire page

Question 24

Explain the difference between static and dynamic websites

Answer 24

Static Website - contains information that does not change and has to be updated manually
Dynamic Website - automatically generates and displays different content each time it is viewed

Question 25

Give an advantage and a disadvantage of dynamic websites

Answer 25

Advantages - More functional, up to date

Disadvantages - More complex and costly to develop

Question 26

Define a ‘database driven website’ and give an example of one

Answer 26

A database driven website is a website which pulls information from a database each time in it loaded
Example: Online bank, shopping sites

Question 27

What is the difference between client server scripting and server side scripting?

Answer 27

Client Side - system that is running on the web browser
(generally speaking they provide interactivity)
Server Side - system that s translated and executed on the web server (generally speaking they provide dynamic webpages)

Question 28

Where does much of the dynamic content of a webpage retrieved from?

Answer 28

A database

Question 29

Give an example of where SQL is used

Answer 29

When carrying out a google search, your search criteria is passed to SQL code to search a database

Question 30

What is PHP?

Answer 30

PHP is a server side scripting language used to crate dynamic and database driven web[ages

Question 31

What is present at the start and end of all PHP documents?

Answer 31

?>

Question 32

What happens when you click to view on a webpage?

Answer 32

A request process takes place and the page is retrieved and displayed on your web browser

Question 33

What is Search Engine Optimization(SEO)?

Answer 33

Search Engine Optimization is the process of trying to ensure your site appears nearer the top of search engine results

Question 34

How are websites made more interactive?

Answer 34

Websites are made more interactive by using scripting languages such as Java to allow for user input, using buttons, adding widgets or games by using flash

Question 35

Give examples of how search engine optimisation can be improved?

Answer 35

Make sure your page has unique and descriptive title
Descriptive Meta Tags
Short and descriptive file names
Repeat keywords in main body of text

Question 36

Why is it important to create websites that are optimised for fast load times?

Answer 36

To ensures the users stay on your site, because they do not have very much patience

Question 37

What is a web crawler?

Answer 37

A web crawler is a piece of software which follows links from web pages to web pages, analyses the text on each page and indexes the page with related keywords

Question 38

State the tag that should contain the visual content of the web page

Question 39

Describe two advantages of using client side scripting to validate a form

Answer 39

Faster than server side scripting

Less load on server

Question 40

Describe two ways that you can optimize your website for indexing by website crawler

Answer 40

Ensure the title tag contains a description of the website’s content
Don’t use generic URLs, meta data etc