This site applies only to CMPT 165 (Distance Ed) in Summer 2016. 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 or Unicode lookup. [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. [Note that the default rendering of <dfn> in Chrome isn't italic: that doesn't matter since we don't care about appearance here.]

  3. Finally, one last thing to add 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. Make sure your content.html is valid.

When you're done, upload the files from this lab to a directory lab4 on the course web server. Submit the URL of the page you created to CourSys.