web程序语言讲解、辅导Java，CSS，HTML编程
- 首页 >> Matlab编程 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.
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
Hello!
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!
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.
$title = 'Welcome to My Website';
if ( $title ) echo 'The title is: $title'
if ( $content ) echo '$content'
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
Hello!
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!