Homework #1

Due March 11, at start of lecture 23:59.

To submit, email the files you created to zju.webdev@gmail.com. Be sure to include your student number (学号) in the email.

For this exercise, you will work through some basic ideas of semantic HTML or XHTML. You will need to consult a good HTML/XHTML reference: see the notes for links. Remember that cho ice of tag should be about meaning, not appearance.

  1. If you are not already familiar with the basics of HTML (and CSS for later exercises), this would be a good time to go through a tutorial. Some good options:

  2. Create a file content.html that contains your answers to the first few questions (maybe by starting with this empty HTML5 page). Consider this sentence, which you might want to mark up using HTML:

    According to Wikipedia, there was never a version 1.0 of HTML. The W3C is the World Wide Web Consortium, and it defines HTML.

    Choose an appropriate HTML tag for each of the three highlighted words, according to their meaning in that passage. Have a look at the HTML reference pages for tags that match their meaning. The default rendering (in most browsers) for the tags I think are best are all italic text: they will all look the same, but the markup you choose will expand their meaning to search engines, screen readers, etc. (Hint: <cite>, <dfn>, and one other.)

    Add a paragraph to your content.html file that contains the above passage; mark it up as described above. There is no need to create a stylesheet to make the words look like the above: this question is only about content. [Note that the default rendering of <dfn> in Chrome isn't italic: that doesn't matter since we don't care appearance here.]

  3. Have a look at each of these tags in an HTML reference: <ol>/<li>, <abbr> (with a title), <dl>/<dt>/<dd>.

    Add some content to your content.html that uses each of these tags appropriately. (i.e. Create some content that matches the meaning of those tags, to demonstrate that you know what they are and how to use them properly.)

  4. Use either the XHTML 1.0 Strict or HTML5 doctype to your content.html (if it's not already there):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>

    Use a validator to make sure your page is valid.

  5. Save this XHTML file: exer1-page.html (and the image that goes with it, null.png).

    The file is not valid, but should be. Fix the XHTML so that it uses tags with the right semantic meaning, and is valid XHTML.

  6. Attach the files you created (content.html and exer1-page.html) to an email to zju.webdev@gmail.com. Be sure to include your student number (学号) in the body of the email.