Differences

This shows you the differences between two versions of the page.

--- eg-259:homework:2 [2012/01/20 10:29] – [Revision of XHTML and CSS] eechris
+++ eg-259:homework:2 [2012/01/20 15:14] (current) – [3. Explore HTML5 and CSS3] eechris
@@ Line 1: / Line 1: @@
-====== Revision of HTML and CSS ======
+====== Exploring HTML5 and CSS3 ======
-**Adapted from**: Robert W. Sebasta, //Programming the World-Wide Web//, 3rd Edition, Addison Wesley, 2006. **Supporting**: [[eg-259:lecture1|Lecture 1]].
+**Supporting**: [[eg-259:lecture1|Contact Hour 3]].
-=====  1. Exercises to Illustrate the Fundamentals of XHTML =====
+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 =====
-   - Create, test and validate an XHTML document for yourself. including your name, address, and e-mail address. You must include your student number, course and level. This document must use several headings and ''<big>'', ''<small>'', ''<hr />'', ''<p>'' and ''<br />'' tags.
+  * 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 in Exercise 1.1.
+  * 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 "background" as the link content. This document should have a few paragraphs of your personal history.
+  * Study the HTML and the CSS stylesheets.
+===== 1. Explore the Example =====
-===== 2. Exercises to Illustrate Lists =====
+  * 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 2.3 to add nested, unordered lists of at least two actors and/or actresses in each of your favourite movies.
+  * 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 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?
-   - Create, test and validate an XHTML document to describe a table with the following contents: - The columns of the table must have the headings //Pine//, //Maple//, //Oak// and //Fir// -- The rows must have labels //Average Height//, //Average Diameter//, //Typical Lifespan//, and //Leaf Type//. -- You can make up the data cell values.
-   - 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, //Characteristics//.
-   - Create, test and validate an XHTML document to describe a table with columns for //country//, //national language//, //capital city// and //population//. There must be at least five countries in the table. You must include attribute specifications for cell padding and cell spacing.
-===== 4. Exercises to Better Understand Frames =====
-  - Create, test and validate an XHTML document that includes two rows of frames with two frames in each row. The two left-hand frames must occupy 25 percent of the width of the display. The bottom two frames must occupy 40 percent of the height of the display.
-          * 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 and test an XHTML document that displays a table of football scores from a SU inter school football league in which the team names have one of the primary colours of their respective schools. The winning scores must appear larger and in a different font than the losing scores. The team names should be in a script font.
-   - 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.
-   - Create and test an XHTML document that has six short paragraphs of text that describe various aspects of the country in which you live. You must define three different paragraph styles ''p1'', ''p2'' and ''p3''.
-          * The ''p1'' style must use left and right margins of 20 pixels, a back round colour of pink, and foreground colour of blue.
-          * The ''p2'' style must use left and right margins of 30 pixels, a background colour of black, and a foreground colour of yellow.
-          * The ''p3'' style must use a text indent of 1 centimeter, a background colour of green, and a foreground colour of white.
-          * The first and fourth paragraph must use ''p1'', the second and fifth must use ''p2'', and the third and sixth must use ''p3''.
-   - Rewrite the document of exercise 5.3 to use an external stylesheet. Validate the stylesheet using the W3C validation service.
-===== 6. HTML 5 =====
-  - Visit the [[http://htmlfive.appspot.com/|Google HTML5 Examples Page]] and try them out. 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!
-  - Checkout my delicious bookmarks that are tagged [[http://delicious.com/cpjobling/html5+eg-259|html5+eg-259]]. Bookmark any that you find useful!
+  - 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!
-For further practice, try any of the other exercises in Section 3.15 of Chris Bates, //Web Programming: Building Internet Applications//, 3rd Edition, John Wiley, 2006.
-===== One Final Question =====
-  * Why have frames been deprecated in XHTML 1.1?