|
CSE-2041A
Net-Centric Computing
York University
Fall 2011
|
Lab #3: Markup
Say it with HTML!
|
|
|
|
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.
|
|
|
|
In
this section,
you will explore existing pages,
looking at properties of the HTTP exchange and of the HTML.
-
basic.html
Visit
basic.html.
-
Examine the response using the Net tab
in Firebug.
-
What is the page's URL?
-
View the page's source text.
-
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.
-
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.
-
moderate.html
Visit
moderate.html.
-
How many HTTP requests were made to fetch
the “page”
—
the page and its contents?
-
What is the size of the GIF image in bytes?
-
yorku.ca
Visit
http://www.cse.yorku.ca/.
Use Firebug to examine it.
-
What is the name of the page that was fetched?
-
How many HTTP requests were made to fetch
the page and contents?
-
What flavour of HTML does it use?
-
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).
|
|
|
|
In
this section,
you will author some pages in HTML.
This
HTML Symbol Entities Reference
provides a reference to common symbol encodings in HTML.
-
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> .
-
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.
-
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).
-
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.)
-
glyphs
Create
3-5.html ,
adding
to the bottom of your page.
Do not add this via an image, but with glyphs.
|
|
|
|
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.
-
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.
-
integral
Create
3-6.html
with
done with mathML.
|
|
|
|
Consider
the markup language ROFF .
Open a shell on Red .
We will use a linux box for the following.
-
groff
Look at the manual page for groff .
% man groff
-
ROFF markup
Study the source text for groff .
% zcat /usr/share/man/man1/groff.1.gz | less
-
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
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
-
ROFF to HTML
Use groff
to convert your source ROFF file
—
courses.roff
—
into HTML.
How do the results look?
|
|
|
|
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.
|
|
|
|