LIS 390W1A - Lab 7: Kinds of 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:

• On Semantics and Markup from the Ongoing weblog. This is one of the clearest accounts that exists on the web that describes the different kinds of markup. It even describes the two different senses in which "semantic markup" is used.
• Procedural and Descriptive Markup.
• Markup language article in Wikipedia. Despite it's controversial reputation among academics, and the fact that its article quality is hugely variable, Wikipedia still has some very good reference articles. The key to keep in mind when using Wikipedia is that you ought not rely on Wikipedia as the only source of information. Rather, it is a good place to learn vocabulary, and find links to other sources, which then can be used to focus searches using search engines and other research tools.
• Markup Systems and the Future of Scholarly Text Processing by James H. Coombs, Allen H. Renear, and Steven J. DeRose. This is the article that started it all, and yes, the Allen Renear who co-authored this article is now a professor here at GSLIS.

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

• Ordered Hierarchy of Content Objects
• HTML DOM

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?

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"></img>). 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 a DOCTYPE (document type) declaration:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	

The following meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
	

And the following as your open HTML tag:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	

Finally, be sure to validate your XHTML, and include the proper validation links. As before, you may use the generic HTML page and its accompanying stylesheet as templates.

Out of 50 points total.

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