CSE-2041A
Net-Centric Computing
York University
Fall 2011
Lab #3: Markup
Say it with HTML!
  Set up

Welcome to lab #3. Today, we will be exploring markup languages. We will look at HTML exchange over HTTP, author HTML page examples, author with MathML, and look at document typesetting with ROFF.

 
  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 GIF 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. 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.

 
  C. 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.

 
  D. ROFF

Consider the markup language ROFF.

Open a shell on Red. We will use a linux box 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?

 
  Lab Report

Cut and paste your ROFF source text from #15 into the body of an e-mail and 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.