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 [2007/10/12 10:23] – eechris | eg-259:homework:2 [2012/01/20 15:14] (current) – [3. Explore HTML5 and CSS3] eechris | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Exploring HTML5 and CSS3 ====== | ||
+ | **Supporting**: | ||
+ | |||
+ | If you need to revise the basics of HTML and CSS, you may wish to try these [[eg-259: | ||
+ | |||
+ | ===== Preparation ===== | ||
+ | |||
+ | * Read the Blog Posting that supports the case study presented during Contact Hour 3. | ||
+ | * Download the code and unizp and open it in Aptana Studio. | ||
+ | * Study the HTML and the CSS stylesheets. | ||
+ | |||
+ | ===== 1. Explore the Example ===== | ||
+ | |||
+ | * 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? | ||
+ | |||
+ | |||
+ | ===== 2. Apply HTML5 to your own documents ===== | ||
+ | |||
+ | * 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. Explore HTML5 and CSS3 ===== | ||
+ | |||
+ | - Explore the [[http:// | ||
+ | - Visit this [[http:// | ||
+ | - Visit the CSS3 examples page at [[http:// | ||
+ | - Checkout my delicious bookmarks that are tagged [[http:// | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | [[eg-259: |