User Tools

Site Tools


eg-259:homework:revise_html

Revision of HTML and CSS

Adapted from: Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. Supporting: Contact Hour 2.

HTML5 and CSS3 is (almost) completely backwards compatible with HTML 4/XHTML 1 and CSS 2. Therefore, you should be able to do these exercises without too much difficulty. Nonetheless, you may wish to refresh your knowledge. Use the notes on HTML and CSS to help.

1. Exercises to Illustrate the Fundamentals of XHTML

  1. 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.
  2. Add pictures of yourself and at least one image (e.g. of your friend, spouse, pet) to the document created in Exercise 1.1.
  3. 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.

2. Exercises to Illustrate Lists

  1. 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. 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.
  3. Create, test and validate an XHTML document to describe an ordered list of your five favourite movies.
  4. 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.

3. Exercises to Demonstrate Tables

  1. 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.
  2. 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.
  3. 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.

4. Exercises to Illustrate CSS

  1. 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.
  2. 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.
  3. 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.
  4. 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, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006.

One Final Question

  • Why have frames been deprecated in XHTML 1.1?

More Homework Exercises

eg-259/homework/revise_html.txt · Last modified: 2012/01/20 14:58 by eechris