This site applies only to CMPT 165 D1 (Burnaby) in Spring 2011. See the CMPT 165 sections page for other sections.

This lab is designed to get you thinking more about content over appearance and to work with entities in XHTML.

This lab involves creating several small passages of XHTML. Create a single XHTML file, content.html and put all of the parts in that file.

  1. Consider the following sentences:

    Wow, it must be 40° out there. Can I get any ice cream for 75¢?

    All I remember is that π has something to do with circles, and that 3 < π < 4. Do you understand any of that‽

    There are named XHTML entities for several of the special symbols: degrees, cents, Greek lowercase letter pi.

    The symbol at the end of the last sentence is an “interrobang” which combines an exclamation mark and a question mark: it is an obscure piece of punctuation sometimes used to indicate excitement in a question. You'll have to use a numeric entity for it, which you can find with a Unicode character search. [Your browser might not display the interrobang properly. It's surprisingly hard to come up with a universally-supported symbol that doesn't have a named entity.]

    Add two paragraphs to your content.html file that contain these sentences, with entities representing the special characters.

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

    Each of the highlighted words (“Wikipedia”, “never”, “W3C”) would typically be displayed in italics if this was in a book or other properly printed English text. But, the three would be in italics for very different reasons: we can make the distinction in XHTML.

    Choose an XHTML tag for each of the three words, according to their meaning in that passage. Have a look at the reference pages for these tags and use each of them for one of the words, as appropriate: <em>, <dfn>, <cite>.

    Of course, you could use CSS to style each of these differently, but most visual browsers render them as italics by default. 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.

  3. Add this code to your content.html (just copy and paste this code into a paragraph):

    <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> is used to describe the <strong>content</strong> of web pages, not the appearance. It looks like this: <code>&lt;p&gt; A paragraph &lt;/p&gt;</code>.

    Have a look at the tags used there. For <abbr>, the title that contains the full-text is displayed as a tooltip in Firefox. The <code> tag is used to indicate a segment of computer code (in this case, XHTML code).

    That's all. Just have a look at this XHTML code, learn a couple of new tags, and copy it into your content.html.

  4. Add the following to the end of your content.html:

    <p>For more information, go to the <a href="next.html">next page</a> or the <a class="external" href="http://en.wikipedia.org/wiki/Snail">Wikipedia page on snails</a>.</p>
    <p class="important">Make sure you understand this before you move on.</p>
    <p id="contactinfo">For more information about this site, contact cmpt-165-d1-contact@sfu.ca.</p>

    Create an external stylesheet and write style rules to make the page look more like this (ignoring the dotted outline on the screenshot; you should not affect the rest of the page):

    That is, make these changes:

  5. Make sure your content.html is valid and upload it to the course web server. Have a look at the http:// URL to make sure you know how to find it online.

  6. If you didn't get a chance to finish lab 3 last week and you have time now, go back and finish.

Make sure the TA has marked you off the grade list before leaving.