cmpt165

Spring 2007

CMPT 165-D2 @ Surrey: Lab 4

This lab may be completed outside of lab hours. However, you must show your work to the TAs during one of the lab slots from 1:30-5:20 in order to receive credit.

This lab is designed to give you even more experience with CSS. In particular, it is designed to get you thinking more about content versus 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. So, π ≪ 1000000.

    There are named XHTML entities for several of the special symbols in the above sentences: degrees, cents, Greek letter pi. The double-less-than symbol means “much less than” and you'll have to use a numeric entity, which you can find with a Unicode character search. (If you browser isn't displaying the last special symbol, it's the “much less than”. It's surprizingly hard to come up with a universally supported symbol outside of the named entities.)

    Add two paragraphs to your content.html file that contain these sentences, with entities representing the special characters (so they should look the same as above).

  2. Consider this passage, that you might want to mark up using XHTML:

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

    Each of the highlighed words (“Wikipedia”, “never”, “W3C”) would typically be displayed in italics if this was in a book or other properly printed English text. However, there might be very different reasons for highlighting each of those words. Using XHTML, though, we can make a greater range of distinctions rather than just italics.

    Choose an XHTML tag for each of the three words, according to their meaning in that passage. Specifically, have a look at the reference pages for the following tags and use each of them for one of the words highlighted above, 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.

  3. Finally one last thing to add to your content.html (just copy-and-paste this code into a paragraph, though make sure to check the spacing once you've copied it):

    <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 Mozilla. The <code> tag is used to indicate a segment of computer code (in this case, XHTML).

    That's all. In general, 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, show the content.html to your lab TA.

Please note that you are expected to keep a copy of the work that you have done. You can keep a record on the student server (SIAT), a portable hard drive (e.g. key drive), or simply by email the URL you have created to yourself.