User Tools

Site Tools


eg-259:homework:2

This is an old revision of the document!


Exploring HTML5 and CSS3

Supporting: Contact Hour 3.

If you need to revise the basics of HTML and CSS, you may wish to try these revision exercises first.

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 HTML 5

  1. Explore the HTML5 Rocks site. For any examples that you visit, view the source code and identify the new HTML5 tags. If possible try the examples in different browsers and see what happens. What happens in IE 6, 7 and 8?
  2. Visit this alternative examples page. Don't forget to view source!
  3. Checkout my delicious bookmarks that are tagged html5+eg-259. Bookmark any that you find useful!

More Homework Exercises

eg-259/homework/2.1327071614.txt.gz · Last modified: 2012/01/20 15:00 by eechris