For this exercise, you will work through some basic ideas of semantic XHTML. You will need to consult a good XHTML reference (or this other one). Remember that choice of tag should be about meaning, not appearance.
-
If you are not already familiar with the basics of XHTML (and CSS for later exercises), this would be a good time to go through a tutorial. Some good options:
- CMPT 165 Study Guide, units 2–4
- University of Washington: Web Programming, units 2–4
- Opera Web Standards Curriculum
-
Create a file
content.htmlthat contains your answers to the first few questions (perhaps by starting with this skeleton page provided). Consider this passage, which you might want to mark up using XHTML: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 XHTML tag for each of the three highlighted words, according to their meaning in that passage. Have a look at the XHTML 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.htmlfile 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.] -
Have a look at each of these tags in an XHTML reference:
<ol>/<li>,<abbr>(with atitle),<dl>/<dt>/<dd>.Add some content to your
content.htmlthat 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.) -
Add the XHTML 1.0 Strict 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">Use a validator to make sure your page is valid.
If you wish, you can use the HTML5 doctype (
<!DOCTYPE html>). The W3C validator has HTML5 support. -
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.
-
Try both of the pages you have created for this exercise in Greg's web lint. The lint (like any lint) can produce false positives: it might flag things that are perfectly fine, but you need to think about. Update the pages if necessary to make sure you're happy with the markup.
Submit your files through CourSys.