联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-23:00
  • 微信:codinghelp2

您当前位置:首页 >> Java编程Java编程

日期:2021-06-07 10:06

The world's first website

Look at the screenshot of the world's first website below and think about

how the design of web pages has changed since the early 1990s.

1. Considering the types of devices and web browsers used in during

the early 1990's, what is one of the benefits of this simple design?

(2 marks)

2. If you were to redesign this website today for a modern target

demographic, what changes would you make to each of the

aspects listed below? (4 marks)

o Use of media

o Typography design

o Navigation

o Page layout design

JavaScript code in HTML

JavaScript code can be added to an HTML document in a few different

ways.

1. Write an example of an HTML script element that contains a

JavaScript function. (3 marks)

2. Write an example of an HTML script element that loads an external

JavaScript file. (2 marks)

3. What is one of the key benefits of writing JavaScript code in an

external JS file? (1 mark)

PHP code in HTML

You are debugging some PHP functionality in a website that is not

producing the expected output. You are trying to output a title into a

heading.

<body>

<h2>

$title = 'Welcome to My Website';

if ( $title ) echo 'The title is: $title'

if ( $content ) echo '$content'

</h2>

</body>

1. Identify the errors in the code and rewrite it as valid PHP. (3

marks)

2. Clearly describe the 3 mistakes in the code that you have

corrected. (3 marks)

Addressing systems on the web

Consider the following standard URL format:

http://localhost/index.php?view=home

1. Which part of this address could be replaced with an IP address?

Rewrite the URL above so that it includes an IPv4 address. (2

marks)

2. Some servers and clients are switching from IPv4 addresses to

IPv6 addresses. Why is this necessary? What is the main benefit

of IPv4 compared to IPv6? (2 marks)

3. What is the purpose a query string? Rewrite the URL above so

that 3 variables can be passed to a server for processing. (3

marks)

Writing valid HTML code

The HTML standards include rules about how elements that can nested

within other elements.

1. Write some valid HTML code that includes the following: (5 marks)

? An ordered list containing 3 list items

? A hyperlink within each list item

? An image within the first hyperlink

2. In HTML5, self-closing an empty element is optional. Explain what

this means and write an example of an empty element that has not

been self closed. (2 marks)

Mobile redesign

Imagine you are working on a project for a music festival. A desktopoptimised

website has already been built:

The project's designer has produced a mock-up of the mobile design:

Consider the similarities and differences between the 2 designs.

1. Would you recommend that the client use the responsive web

design approach for this project? Why or why not? (3 marks)

2. Briefly describe 2 other mobile delivery approaches that could be

used for this project. (4 marks)

Client-side and server-side Scripting

While using an online file storage website, you notice that the photo

management page has 3 main features:

? Images in the left-hand column can be re-ordered by dragging an

image and dropping into a new position in the column.

? When an image is clicked, information about the image appears in

the form in the right-hand column without leaving this page.

? After modifying information in the form and clicking "Update

Details", the browser navigates to a page that shows a success

message.

1. One of these features will require client-side scripting. Which feature

is it? Explain why client-side scripting required. (2 marks)

2. One of these features will require server-side scripting. Which feature

is it? Explain why server-side is scripting required. (2 marks)

3. One of these features will require AJAX. Which feature is it? Explain

why AJAX functionality is used for this feature. (3 marks)

Image optimisation

Different image file formats have characteristics that will make them

more suitable for some types of images than others.

1. The logo and icon images at the top of the screenshot could be

saved as a PNG-24 or SVG images. How are these two formats

different? Which format would you choose and why? (2 marks)

2. The photograph above "Shop Board Games" could be saved as a

JPEG or PNG-24 image. How are these two formats different?

Which format would you choose and why? (2 marks)

3. The GIF image format has some unique features that give it an

advantage over the JPEG format. What are 3 things that GIF

images can do that are impossible with JPEG? (3 marks)

Designing accessible forms

Consider the design of the 2 forms below.


Form 1: Using label elements Form 2: Using placeholder values

W3C WCAG 2.0 defines 4 basic principles for accessible web content:

? Perceivable

? Operable

? Understandable

? Robust

1. Which of the forms has better support for accessibility? Identify 2

WCAG principles that the form supports and describe how the

design of the form benefits people with specific disabilities or

impairments. (5 marks)

2. Would it be a good idea to indicate a correctly filled field using a

green border and an incorrectly filled field with a red border?

Justify your decision. (2 marks)

3. In terms of information architecture, suggest one other type of

label that could be added to this form to help users understand

how to fill it in correctly. (1 mark)

CSS Box Model

Consider the following HTML and CSS code and the result that it

produces:

HTML CSS Result

<main>

Hello!

</main>

main {

background: yellow;

width: 200px;

height: 100px;

padding: 25px;

border: 5px solid blue;

margin: 5px;

}

Assume that no other CSS rules are being applied to this element.

1. What are the dimensions of the "main" element, measured from

the outside of the blue border? Describe how the size of the

element is calculated (2 mark)

2. How does the CSS "box-sizing" property affect how the browser

calculates the size of the main element? What will the dimensions

of element be if this property is set to "border-box"? (3 marks)

Hello!


版权所有:留学生编程辅导网 2020 All Rights Reserved 联系方式:QQ:99515681 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。