eg-259:homework:2
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:homework:2 [2008/11/13 18:58] – external edit 127.0.0.1 | eg-259:homework:2 [2012/01/20 15:14] (current) – [3. Explore HTML5 and CSS3] eechris | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
- | **Adapted from**: Robert W. Sebasta, // | + | **Supporting**: |
- | ===== 1. Exercises | + | If you need to revise |
+ | ===== Preparation ===== | ||
- | - Create, test and validate an XHTML document for yourself. including your name, address, | + | * Read the Blog Posting that supports the case study presented during Contact Hour 3. |
- | - Add pictures of yourself and at least one image (e.g. of your friend, spouse, pet) to the document created | + | * Download the code and unizp and open it in Aptana Studio. |
- | - Add a second document to the document created for Exercise 1.1 that describes part of your background, using the word " | + | * Study the HTML and the CSS stylesheets. |
+ | ===== 1. Explore the Example ===== | ||
- | ===== 2. Exercises | + | * Sketch the structure of the site as revealed in the project file viewer. Can you suggest an alternative structure that would be better for a site with a large number of pages? |
+ | * Sketch a tree diagram of the structure of the HTML document. | ||
+ | * Make a list of the tags that are new to you and use the W3C documentation to make a note of their intended purpose | ||
+ | * Consider the form element attributes. Which of these are new to HTML5? | ||
+ | * Consider the stylesheet reset.css: what is the purpose of this file? | ||
- | - Create, test and validate an XHTML document to describe an unordered list of a typical supermarket shopping list you write. (If you've never made such a list, use your imagination). | + | ===== 2. Apply HTML5 to your own documents ===== |
- | - Create, test and validate an XHTML document to describe an unordered list of at least 4 countries. Each element of the list must have a nested list of at least three cities in the country. | + | |
- | - Create, test and validate an XHTML document to describe an ordered list of your five favourite movies. | + | |
- | - Modify the list of Exercise | + | |
+ | * Create a new HTML5/CSS site template by extracting the key features of the example. | ||
+ | * Find the exercise that you submitted for the EG-146 exercise last year. | ||
+ | * Convert this example to HTML5 ensuring that you use the article tag for your blog posts and the other new structural tags that HTML5 adds as appropriate. | ||
+ | * IF you wish, extend this exercise to recode the web site exercise that was submitted for EG-153. | ||
- | ===== 3. Exercises to Demonstrate Tables | + | ===== 3. Explore HTML5 and CSS3 ===== |
- | + | - Explore | |
- | - Create, test and validate an XHTML document to describe a table with the following contents: - The columns of the table must have the headings | + | |
- | - Modify, test and validate an XHTML document from Exercise 3.1 to add a second level column label, //Tree//, and a second-level row label, | + | - Visit the CSS3 examples page at [[http://designshack.net/tutorialexamples/css3/css3examples.html|Design Shack]] |
- | | + | - Checkout my delicious bookmarks |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | ===== 4. Exercises | + | |
- | + | ||
- | + | ||
- | | + | |
- | * The top-left frame must display the name of your mother and all of her siblings. (There must be a minimum of two siblings, make them up if you must.) | + | |
- | * the bottom-left frame must display the name of your father and all of his siblings. (Once again, there must be a minimum of two siblings.) | + | |
- | * Each name in the left frames must be link to a document that is displayed in the right-hand frame when the link is selected. | + | |
- | * The documents in the right-hand frames are short descriptions of the people. | + | |
- | + | ||
- | + | ||
- | + | ||
- | ===== 5. Exercises to Illustrate CSS ===== | + | |
- | + | ||
- | - Create | + | |
- | - Create and test an XHTML document that includes at least two images and enough text to precede the images, flow around them (one on the left, and one on the right), and continue after the last image. | + | |
- | | + | |
- | * The '' | + | |
- | * The '' | + | |
- | * The '' | + | |
- | * The first and fourth paragraph must use '' | + | |
- | - Rewrite the document of exercise 5.3 to use an external stylesheet. Validate the stylesheet using the W3C validation service. | + | |
- | + | ||
- | For further practice, try any of the other exercises in Section 3.15 of Chris Bates, | + | |
- | + | ||
- | ===== One Final Question ===== | + | |
- | + | ||
- | + | ||
- | * Why have frames been deprecated in XHTML 1.1? | + | |
Line 63: | Line 38: | ||
[[eg-259: | [[eg-259: | ||
- |
eg-259/homework/2.1226602703.txt.gz · Last modified: 2011/01/14 12:54 (external edit)