ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Exploring HTML5 and CSS3 ======

**Supporting**: [[eg-259:lecture1|Contact Hour 3]].

If you need to revise the basics of HTML and CSS, you may wish to try these [[eg-259:homework:revise_html|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 HTML5 and CSS3 =====

  - Explore the [[http://www.html5rocks.com/en/|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?
  - Visit this [[http://html5demos.com/|alternative examples page]]. Don't forget to view source!
  - Visit the CSS3 examples page at [[http://designshack.net/tutorialexamples/css3/css3examples.html|Design Shack]] and see if they work equally well across all the browsers that you have access to. Read the [[http://designshack.net/tutorials/introduction-to-css3-part-1-what-is-it|associated tutorials]] and try out some of the techniques on your own web pages.
  - Checkout my delicious bookmarks that are tagged [[http://delicious.com/cpjobling/html5+eg-259|html5+eg-259]] and [[http://delicious.com/cpjobling/css3+eg-259|css3+eg-259]]. Bookmark any that you find useful!


----

[[eg-259:homework:home|More Homework Exercises]]