Web Design 1

Examination Questions

Write an example of the following types of tags: a closed element, an open element, a block level element, an inline element, an element with a required attribute.
Give a brief explanation of the name and semantic meaning of the following elements: title, a, p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td.

Mark up a page of textual content.
Why is it important to use semantic markup when building web pages? Provide an example of the use of semantic markup.
Write the (X)HTML for a heading, a paragraph, and an ordered list.
Write the (X)HTML for a table of three columns that gives the names of four of your friends and shows their birthday and favorite food.

Explain the following design terms: contrast, repetition, alignment, proximity
Give an example of the following design concepts in use: contrast, repetition, alignment, proximity

Explain this message from the W3C validator: Line 226, Column 11: document type does not allow element “blockquote” here; assuming missing “dd” start-tag. <blockquote><dt><strong>content-box</strong> </dt>
Describe the steps you would take if you received a message from the W3C validator like the example given.
Give an example of a situation when it might not be possible to achieve a “valid code” ruling from the W3C validator.

Provide 2 compelling arguments that you could present to an employer that would convince them to adopt web standards.
Remove this HTML presentational attribute and rewrite it as a CSS presentational rule. <font face=“Garamond, Futura”><h1>Heading</h1></font>
Why is it beneficial to separate a web page’s formatting from its structure? Identify one benefit a web designer might experience and one benefit a user might experience from this approach.

Write and link to an external stylesheet when provided with a page of marked up content
Diagram and label the box model
Label the selector, declaration, and property in the following style rule.

Write the CSS for a class with these attributes: a light gray background color, a dashed border on the right side only, black text in Arial or a sans-serif font, a width of 200px, and center aligned text.
Write the CSS for an id with these attributes: float to the left, 20px padding on all sides, overflow set to automatically show, and a width of 400px.
Write the CSS for a blockquote with these attributes: clear both sides, a margin on the left of 500px, and line-height of 1.2em.
Write the CSS for a list with an image called “dot.gif” as a list marker.
Write an example of each of the following CSS selectors: General Element Selector, Contextual Selector, Pseudo-Class Selector, Class, Id.

Diagram the site structure for a site with the following kinds of content: products, support, company information, downloads, blog, and news.
Explain the meaning of this element: <a href=”../../music/sara.mp3”>Sara</a>
Write examples for a relative and an absolute link.
What are the two main functions of FTP?

Write a form tag using the following action attribute: ”../scripts/form.php”.
What is the purpose of the label element?
Give an example of an input form element.
What is the chief difference between a checkbox element and a radio button element?
Write an XHTML contact form using the following tags: <form>, <input>, <legend>, <fieldset>, <label>. Your form should have fields for the user to enter their name, email address, and a message. Include a button to submit the form.

Create a minimal XHTML page with one line of textual content
Create a workable site structure for this site: a well known band with 5 members, a large discography with music for sale, music clips, a blog, press information, and an itinerary.