|
CSE-2041A
Net-Centric Computing
York University
Fall 2012
|
Lab #3: Markup
Mark it up!
|
|
|
|
Welcome to lab #3.
Today,
we will be exploring markup languages.
We will
-
look at HTML exchange over HTTP,
-
see alternative rendering,
-
author HTML page examples,
-
look at document typesetting with ROFF,
and
-
author with MathML.
|
|
|
|
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 PNG 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).
|
|
|
|
Let's
look at HTML pages in another way.
Open a shell on Red .
-
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.
-
How does links
differ from firefox ?
-
When visiting
moderate.html,
does
links
make the same number of HTTP requests
that firefox did?
Why or why not?
-
How does links
render “<em>...</em>”?
How does it render hypertext links?
-
Why does a program like
links
likely even exist?
What is its purpose?
-
curses
Links
is implemented using
curses .
-
Find what curses is.
Describe what it provides.
-
What is vt100 ?
-
To what does rich text refer?
-
Will links
always render the same HTML page
in the same way?
Why or why not?
|
|
|
|
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.
|
|
|
|
Consider
the markup language ROFF .
Open a shell on Red .
We will use a linux shell 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?
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|