CSE-2041A
Net-Centric Computing
York University
Fall 2012
Lab #3: Markup
Mark it up!
  Set up

Welcome to lab #3. Today, we will be exploring markup languages. We will

  1. look at HTML exchange over HTTP,
  2. see alternative rendering,
  3. author HTML page examples,
  4. look at document typesetting with ROFF, and
  5. author with MathML.
 
  A. Explore HTML

In this section, you will explore existing pages, looking at properties of the HTTP exchange and of the HTML.

  1. basic.html

    Visit basic.html.

    1. Examine the response using the Net tab in Firebug.

    2. What is the page's URL?

    3. View the page's source text.

    4. View and explore the source HTML's structure using the HTML tab in Firebug.

      A tree view is shown, quite similar to that Firefox shows when viewing XML.

  2. form.html

    Visit form.html.

    Examine the HTML source and the rendered version. Note that HTML can be used to describe a GUI, thus paving the way to interactivity.

  3. moderate.html

    Visit moderate.html.

    1. How many HTTP requests were made to fetch the “page” — the page and its contents?

    2. What is the size of the PNG image in bytes?

  4. yorku.ca

    Visit http://www.cse.yorku.ca/.

    Use Firebug to examine it.

    1. What is the name of the page that was fetched?

    2. How many HTTP requests were made to fetch the page and contents?

    3. What flavour of HTML does it use?

  5. well-formedness & validity

    Examine the source text of this lab assignment page.

    Find at least three types of well-formedness and validity problems with the HTML (with respect to strict HTML).

 
  B. Links

Let's look at HTML pages in another way. Open a shell on Red.

  1. links

    Use the program links to look at the same URLs as in Part A.

    Explore around and visit some other sites using links.

    Questions.

    1. How does links differ from firefox?

    2. When visiting moderate.html, does links make the same number of HTTP requests that firefox did? Why or why not?

    3. How does links render “<em>...</em>”? How does it render hypertext links?

    4. Why does a program like links likely even exist? What is its purpose?

  2. curses

    Links is implemented using curses.

    1. Find what curses is. Describe what it provides.

    2. What is vt100?

    3. To what does rich text refer?

    4. Will links always render the same HTML page in the same way? Why or why not?

 
  C. Authoring HTML

In this section, you will author some pages in HTML. This HTML Symbol Entities Reference provides a reference to common symbol encodings in HTML.

  1. my courses

    Create your own web page so it can be visited at

    http://www.cse.yorku.ca/~cseXXXXX/2041/3-1.html

    where cseXXXXX Is your cse-number.

    Note that you must create 2041 under your www directory, and that it must have rx permissions for others. Note also that the document must have r permission for others. When visited, 3-1.html should display a header that says My Courses, followed by an unordered list of the courses you are currently taking.

    Make a proper HTML page with all the requisite parts (a doctype declaration, <head>, and <body>). Have a <title>.

  2. times

    Enhance your page — calling it 3-2.html — so that, for each listed course, there is a nested sub-list showing the time of the course as the first list item and its venue as the second.

  3. table

    Create 3-3.html so it displays the same information in a table with one row per course, and three columns (course number, time, and venue).

  4. links

    Create 3-4.html, adding a hyperlink around each course name linking to that class's home-page. (Leave out links for any class you might have without a home-page.)

  5. glyphs

    Create 3-5.html, adding

    suits

    to the bottom of your page. Do not add this via an image, but with glyphs.

 
  D. ROFF

Consider the markup language ROFF.

Open a shell on Red. We will use a linux shell for the following.

  1. groff

    Look at the manual page for groff.

    % man groff

  2. ROFF markup

    Study the source text for groff.

    % zcat /usr/share/man/man1/groff.1.gz | less

  3. ROFF document

    Make a small text file marked up with roff using the ms macros with the following content, formatted as follows.

    Like in #6, have a header that says My Courses, followed by an unordered list of the courses you are currently taking. Indent the list of courses. Set the course names in the list for italices. (They will likely render as underlined in the terminal window.) E.g., if you named your file courses.roff, you might have

    courses

    as the rendered output from your source.

    Reference 4.3 ms in the GROFF manual to learn what you need of the markup.

    To process your source file to see it rendered in the terminal window, issue

    % groff -ms -T ascii courses.roff

  4. ROFF to HTML

    Use groff to convert your source ROFF file — courses.roff — into HTML.

    How do the results look?

 
  E. MathML

There are numerous extensions to HTML for specific typesetting tasks. One such extension is for mathematical formulas.

MathML provides for typsetting formulas in markup, both in semantic mode and in presentation mode. For semantic mode, it is assumed that approriate CSS's will translate the formulas into suitable presentation.

We will explore MathML's presentation mode.

  1. mathML

    Look at the examples in HTML5 at MathML Browser Test (Presentation Markup).

    W3C Math Home is an authoritative site listing math extensions to HTML and with good resource links.

  2. integral

    Create 3-6.html with

    integral

    done with mathML.

 
  Lab Report

Make a proper HTML page that is well formed and valid that contains your mathML for the integral in Part E. (This should just be your 3-6.html.) Send it to godfrey@cse.yorku.ca. For the e-mail's subject, say

cse-2041 / lab #3 / cseXXXXX

where cseXXXXX is your CSE account name.