HTML5 introduces a number of new elements and attributes tag: help in building a modern website. Match the HTML5 element in Column A with its corresponding description in Column B.
(0.5 Marks Each)
Column A
Column B
I. Section
A. This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
II. Article
B. Represents a measurement, such as disk usage.
III. Aside
C. Improve the performance of our websites by avoiding the need to download images off the network.
IV. Header
D. Element represents a run of text in one document marked or highlighted for reference purposes.
V. Footer
E. This tag represents a generic document or application. It can be used together with labels to indicate the document structure.
VI. Nav
F. This tag can be used to mark up a conversation.
VII. Figure
G. This tag represents a section of the document intended for naviagation.
VIII. Mark
H. This tag contain information about the author, copyright information, etc.
IX. Canvas
I. Defines a video file.
X. Meter
J. Represents some type of output, such as from a calculation done through scripting.
K. This tag represents the header of a section.
L. This tag represents an independent piece of content of a document, such as a blog entry or newspaper.
M. This tag represents a piece of content that is only slightly related to the rest of the page.
Answer (Click to show)
i. Section → E. This tag represents a generic document or application. It can be used together with h1-h6 to indicate the document structure. ii. Article → L. This tag represents an independent piece of content of a document, such as a blog entry or newspaper. iii. Aside → M. This tag represents a piece of content that is only slightly related to the rest of the page. iv. Header → K. This tag represents the header of a section. v. Footer → H. This tag contain information about the author, copyright information, etc. vi. Nav → G. This tag represents a section of the document intended for navigation. vii. Figure → A. This tag can be used to associate a caption together with some embedded content, such as a graphic or video. viii. Mark → D. Element represents a run of text in one document marked or highlighted for reference purposes. ix. Canvas → C. Improve the performance of our websites by avoiding the need to download images off the network. x. Meter → B. Represents a measurement, such as disk usage.
QUESTION TWO: Float Property Rendering
Consider the following HTML code fragment, which uses the float property for layout. Show how the text will appear when rendered in a browser. (5 Marks)
<!DOCTYPE html><html><head> <title>Test_One</title> <style type="text/css"> span{ float: left; font-size: 400%; } </style></head><body><p> <span>T</span> Welcome to Web Development<br> Welcome to Web Development<br> Welcome to Web Development<br></p></body></html>
Answer (Click to show)
The large letter “T” (floated left) will cause the first line “Welcome to Web Development” to wrap around its right side. The next two lines will appear below the floated “T”, starting from the left margin.
Rendered Output:
T Welcome to Web Development
Welcome to Web Development
Welcome to Web Development
QUESTION THREE: CSS Rules
i. Write a CSS rule that changes the color of all elements containing attribute id="Green-Move" to green and shift them down 25 pixels and right 15 pixels. (5 Marks)
ii. Write a layout template that contains two columns. Use divs for each layout component, and use float to line up the columns side by side. Give each component a border and/ or a background color so you can see where your divs are. (5 Marks)
iii. Several divs have a class of even. Write a style rule (as it would appear in an external stylesheet) that gives each of these black text on a red background using 14px sans-serif font, and the borders should be 1 pixel solid black lines all around. (5 Marks)