LIS 390W1A - Lab 4: Kinds of Markup

Descriptive, Procedural, and Presentational Markup

Note, this lab is highly dependent on materials that are primarily covered in class. To answer some of the questions may require a bit of internet searching if you missed class. I highly recommend making arrangements with your fellow students to catch up with what we cover in lectures that you miss.

The purpose of this lab is to understand the difference between procedural/presentational markup and descriptive/structural markup. As with any conceptual terms, different people have slightly different definitions of of these terms. However, here are some useful sources for understanding the differences, the first of which was required reading for class today:

You may also find the the following readings useful for the OHCO and DOM questions:

As you can tell from the readings, the definitions of markup vary a bit from reading to reading. This is because there is no precise general agreement on definitions. For this class, the definitions of markup we use are those made by Tim Bray because they are the clearest for people who are new to these concepts. For the purposes of this class, structural and descriptive markup are synonymous, because they are about describing the structure of the document. If you need examples of file formats that exemplify each kind of markup, here they are:

Presentational Markup Procedural Markup Descriptive or Structural Markup
Microsoft Word (.doc, .docx)
Microsoft Excel (.xls, .xlsx)
Microsoft Powerpoint (.ppt, .pptx)
Adobe PDF (.pdf)
Encapsulated Postscript (.eps)
LaTeX (.tex)
HTML 3.0 and earlier
HTML 4.0-5.0, XHTML in practice (including deprecated tags)
TEI
HTML 4.0-5.0, XHTML in theory (not including deprecated tags)

Assignment

There are many different kinds of markup. In this lab, we will be looking at a few different kinds of markup, and then answering a few questions about what we did.

  1. First, let us look at HTML. Consider the following html:

    Definition List
    a list of definitions
    Ordered List
    a list of items where the order or sequence is important
    Unordered List
    a list of items where the order or sequence is either unimportant or of secondary importance

    The markup for this rendered HTML is as follows:

    <dl>
        <dt>Definition List</dt>
        <dd>a list of definitions</dd>
        <dt>Ordered List</dt>
        <dd>a list of items where the order or sequence is important</dd>
        <dt>Unordered List</dt>
        <dd>a list of items where the order or sequence is either unimportant or of secondary importance</dd>
    </dl>
    

    Draw a OHCO/DOM tree for this HTML. What kind of markup is HTML? What kind of markup is it trying to be?

  2. OHCO stands for "Ordered Hierarchy of Content Objects". What is it a model of? Define the model in your own words.
  3. Now, let's take a look at an example of presentational markup:

    1. Open up MS Word on your lab machines, and open a new document.
    2. Type in "Hello World" on the first line. Hit the enter key several times to go down a few lines.
    3. Type "Hello, World!" or some other such nonsense text.
    4. Highlight the first line, make it bold, and center it, so that it looks like a title
    5. Save the document someplace where you can find it.
    6. Close MS Word
    7. Using Finder or Windows Explorer or the command line, find the file you just saved
    8. Rename the file and be sure to delete the ".doc" extension.
    9. Open the file in a text editor. On Macs, use TextWrangler, not TextEdit. To do this from a GUI, right click on the file, select "Open with...", and select the program from the list that appears. On Macs, you may need to select "all programs" instead of "recommended programs" from a dropdown menu at the top of the window.
    10. Take a look at the file.

    What do you see in the text editor? Is it useful? Is it even readable? How much of the difficulty is a result of the presentational nature of the markup? How much is for other reasons? What are those other reasons?

  4. In your own words, define both Procedural and Presentational markup. You may either define each term individually, or you may define both by doing a compare/contrast. Any of the definitions we covered in class are fine to use as a basis for your definition. If you draw on a particular definition, please provide a citation (a hyperlink is sufficient).
  5. In your own words, define Descriptive or Structural markup. For the purposes of this class, they are synonymous. Again, please provide a link if you draw on a particular definition.
  6. In your own words, describe what semantics of markup is. As before, please provide a link if you draw on a particular definition. Is there a such thing as "semantic markup?" The word combination definitely exists. What is your account of what people mean when they use these words?

Submission

To submit this assignment, write up your textual answers in HTML, upload the HTML file to the GSLIS I: drive and then send me a URL.

For your non-textual answers (i.e., the tree drawing for question 1), either submit a paper drawing at the beginning of next class, or use a drawing program (either something fancy, or you can just use Powerpoint) to create an image file which you include in your HTML, using the <img> tag.

Be sure to use the image tag properly: see the W3 Schools image tag page for more details. The W3 Schools site is very useful. See the Links page for more details on how to use this site effectively.

All image tags must use the "alt" attribute (i.e.,: <img src="my_drawing.png" alt="my tree diagram for question 1">). Please do not use any attributes which are depreciated (see the W3 Schools image tag page for a list of attributes that includes information about whether they are depreciated).

Be sure to include the appropriate DOCTYPE (document type) declaration, meta tag, and open HTML tag.

Grading Criteria

Out of 50 points total.

  • Questions 1-6: 8 points each (48 points total)
  • Valid HTML with appropriate validation links: 2 points