- 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.
Basic Web Design Concepts
- Explain the following design terms: contrast, repetition, alignment, proximity
- Give an example of the following design concepts in use: contrast, repetition, alignment, proximity
- Explain the distinction between the available DOCTYPES.
- Explain the best use for different DOCTYPES.
- Write the (X)HTML for an XHTML 1.0 Strict DOCTYPE
- 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.
(X)HTML Best Practices
- 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.
CSS: The Cascade
- Diagram and label the Cascade.
- Compare the specificity of these two selectors: p and #footer p.
- Write a link to an external stylesheet using both the link and @import methods.
- Write a link to an external stylesheet intended for printers.
- Describe a situation where you could justify the use of an inline style.
CSS: Selectors and Properties
- 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.
Page and Site Building Assignments
- 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.