Week 2

Question 1

Characterise the type of data stored in the head
element and the type of data stored in the body
element? (2)

Answer 1

The head element contains metadata. This is information pertaining to the page itself. This could be a title (which appears at the top of the screen or JS src files). The body contains block elements. These are structured using HTML and contain the actual content of the page to be displayed

Question 2

What are the main characteristics of block elements?

2

Answer 2

Block elements contain content. They fill the entire space of the parent (they stretch as far left and right as possible). Block elements can contain other block or inline elements. “<p> </p>” and “<div> </div>” are examples of block elements.

Question 3

What are the main characteristics of in-line elements

(2) With examples.

Answer 3

Inline elements only take up as much space as necessary, in other words they only take up the space between the outer element tags. An example of an inline element would be “<span></span> and <img></img>”

Question 4

f) “You can visit Monash here if you like.” – Code the above in HTML (2)

Answer 4

<p>"You can visit Monash <a>here</a> if you like."</p>

Question 5

If you add a to an existing in a

what will be the result? (2)

Answer 5

It will create a reserve space for a new column for all rows in the table.

Question 6

What should a table be used for? (2)
What should it not be used for? (2)
What should be used instead? (2)

Answer 6

A table should be used to represent data . Should not be used for layout.
A series of div-like semantic elements such as footer, section, form.

Question 7

Q3
a) How do current browsers render (display) the new
div-like semantic elements? (2)
b) Do they attach any semantic meaning to them? (2)

Answer 7

Current browsers display div-like semantic elements like normal divs. There is no semantic meaning to them, they are just easier for developers to use.

Question 8

Q3
c) Adobe are abandoning their Flash development
platform and browser plug-in?
What will replace them? (2)
d) Why is this replacement a better alternative? (2)

Answer 8

HTML5, CSS and Javascript will replace flash. These are better alternatives because they are open source. This means that no one company owns the code and updates can be achieved much quicker than proprietary software.
Additionally they are better due to plug-ins not being required.

Question 9

Q3 e) Why is non-trivial client side storage
(beyond cookies) an important issue for
Web applications if they are to act like
desktop or native mobile apps? (2)

Answer 9

Desktop or native mobile have a key advantage as they can easily store data on the client side. Mobile web apps need this functionality in order to behave like native apps so that they can reassess a page and reuse the data previously loaded.

Question 10

Q4
a) What is the WHATWG’s attitude towards an HTML
standard (2)
b) Main reason why? (2)

Answer 10

WHATWG believes that the HTML should be a living standard. What this means is that it should continue to remain open source so that updates can be done quickly and that it should support many different coding methods. Continuous update without version #.

Question 11

Q4
c) What is the W3C’s attitude towards an HTML
standard (2)
d) Main reason why? (2)

Answer 11

W3C’s view is that there should be more strict rules and updates (i.e. version number). You can choose what version you want. You will know what browsers are compatible with each browser. Same syntax across all platforms.

Question 12

Q5

a) CSS can be used to apply a consistent style across all pages in a Web site. How? (2)

Answer 12

CSS is a separate document to the HTML file. It is only linked once and this ensures that any changes that are made in the CSS file are automatically and consistently applied to the HTML file.

Question 13

Q5 b) The data and structure of an HTML page could be styled differently by several stylesheets to be
appropriate for different devices (laptop, phone). – What features of CSS allow this to be done by a single
stylesheet? (2)

Answer 13

The main feature that allows the data and structure of an HTML page to be styled differently is having relative sizes. This means that it takes a percentage or proportion of the size available instead of taking an absolute value.

Question 14

Q5 c) Contrast the use of an element selector and a class
selector. (2)

Answer 14

An element selector is used to identify a single element, whereas a class selector selects multiple elements that share the same class, to be styled in a certain way.

Question 15

Q5 d) A CSS is made up of style rules. What are the 3 components of a style rule? (2)

Answer 15

Selector prompt and value

Question 16

Q5 e) Which CSS style property is involved in
getting block elements to tolerate each other
in the same horizontal space? (2)

Answer 16

The float property. This allows a block element to move in between the same horizontal space.

Question 17

Q6
a) Write a style rule to style all list items of ordered lists that themselves are descendants of divs with class “exception”.
The list items should have their text rendered with a font
without serifs preferably Arial. (2)
Include a comment (for CSS)

Answer 17

div.exception ol li {
    font-family: Arial, sans-serif ; }
/* this is a comment */

Question 18

c) Why are relative CSS length property values better than absolute CSS length property values? (2)
d) Name 3 relative CSS length property value

Answer 18

Relative length property values are superior as they cater for different screen sizes. Fixed length, for example px, will apply regardless of the screen size, this can cause problems if there are different screen sizes.
<em>, , </em>

Question 19

Q7

a) Explain in words the meaning of width, height in the CSS box model. (2)

Answer 19

This is the amount of width and height that the box container takes up.

Question 20

Q7

b) Explain in words the meaning of padding, border and margin in the CSS box model. (2)

Answer 20

Padding - transparent space around the content.
Border - the middle shell: a space that can be different colours or styles between padding and margin.
Margin - a transparent outer layer used to separate content from each other.

Question 21

Q7 c) A div contains several sentences of text. The div
belongs to a class that specifies text should have the
colour #0000FF. – How can I style just one of the sentences to be a different
colour? (2)

Answer 21

<div> Text </div>

Question 22

Q7 d) A descendant div of an enclosing div will

inherits the enclosing div’s CSS styles – If this is not required how can it be stopped? (2)

Answer 22

Make a child and give the child a unique ID. Give this ID specific CSS properties. This will override the general that it has inherited from the parent.

Question 23

Q8
a) Consider the following style rule:
div.myClass{
width: 180px;
width: 18rem;
}
Why does this work for browsers that both do and
do not understand rem units? (2)

Answer 23

This is the difference between absolute and relative size for an element. If both properties are understood then both will be applied, otherwise only the absolute one will.

Question 24

Q8 b) How do modern browsers handle unknown

elements? (2)

Answer 24

Modern browsers use the existing CSS properties from the parent, and unknown elements are ignored.