Class 6 – Pop Practical Quiz! – Fall 2010

Pop Quiz: convert the following wireframe diagram into fully-functioning XHTML, CSS, and Javascript code.

Completed files must be emailed as a ZIP archive to Amos by 11am.

Naming conventions

• all filenames, CSS class names, and CSS id names must be lowercase with no spaces and no special characters besides underscore “_”
• all Javascript variables and function names must be lowerCamelCase
• all images must be in a subfolder named “images”
• all CSS files must be in a subfolder named “styles”
• all Javascript files must be in a subfolder named “scripts”

Class 2 – Special vs. Arbitrary XHTML Attributes

One of the confusing things about XHTML is that some attributes of HTML tags have special meaning and, while other attributes do not. So it’s hard to know whether an attribute value can be free-form and arbitrary, of your own choosing, or whether it has to have a specific predetermined value in order to function properly within the browser.

Some common attributes that always have arbitrary values of your own choosing are:

• id
• class
• name
• value
• for
• title
• alt
• href – must be a URI
• src – must be a URI
• action – must be a URI

Other attributes that always have special meaning and must have a specific value in order to function properly are:

• selected – has only one meaningful value, “selected”
• checked – has only one meaningful value, “checked”
• type
• rel

It is important that you become familiar looking up what each of these attributes does for various XHTML elements on w3schools.com’s XHTML tag reference page, which is intentionally not linked from here.  You should know where to find it.