 |
Software Interest Group
The UA Math Department Software Interest Group (SWIG)
is a self-organized informal group, consisting of faculty members,
visitors, staff, and graduate students, whose goal is to promote and
advance computer and software literacy among the members of the department
through meetings, talks, and discussions.
|
 |
For more details, and talks in past semesters, consult the full schedule of talks.
Past topics can (and should) be repeated occasionally. In addition, here are some topics people might like to hear about:
To give a talk, please contact swig@math.arizona.edu.
[Note for the reader: this document is not a stand-alone tutorial on HTML/XHTML. It appeared as a part of a workshop at The Department of Mathematics, The University of Arizona, that had used a couple of home page template examples for illustrating the structure of XHTML documents.]
HTML (HyperText Mark-up Language) is the language for describing documents for the purpose of transmitting them over networks. XHTML (EXtensible HyperText Mark-up Language)is the extension of HTML which unlike HTML has a strict well defined formal grammar that needs to be followed to the letter. Since XHTML is the direction toward which the WWW (World Wide Web) community is headed, I will talk about XHTML only.
Roughly an XHTML document can be thought of as tree of nested containers together with their contents. There are two types of containers. Two-tag and single-tag containers.
A two-tag container starts with a front tag, which is followed by its content, and ends with an end tag:
In the above example X is the name of the container, <X> is the front tag, and </X> is the end tag.
While this form of document information encoding works perfectly fine for document transmission over networks and for document reading/parsing by machines it is quite inconvenient for humans. To make documents in XHTML presentable for humans the basic container structure is extended by additional information that specifies how to display the data content of a container. I will sweep all this information under the label "properties/attributes". The extended form of a two-tag container now has the form:
A single-tag container looks like:
As one can see a single-tag container has no content! This is not quite true, because a single tag container can be used to point to another document (e.g., an image or a text file, or to another XHTML document).
At this point we can say that that the XHTML grammar is nothing more than a set of specifications of:
Before we go on to illustrate the XHTML grammar rules with some examples, let me say few more words about the general structure of these documents.
Any bare bone XHTML document must contain a document-declaration, a header, and a body section.
Here is the document-declaration section:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Here is the header section:
<head> <title>title comes here</title> </head>
Here is the body section:
<body> Hello World! </body>
All this put together with the mandatory </html> end tag looks like:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title comes here...</title>
</head>
<body>
document content comes here...
</body>
</html>
As mentioned above, for the purpose of human readability an XHTML document should be supplied with document display information a.k.a. document display style. There are four ways of setting the display style:
The recommended way is by using external style sheets. Although this way is not necessarily the most convenient way from the perspective of a document designer as she writes the document, it is certainly the most convenient from the perspective of generality, portability, maintainability, and readability.
The example below illustrates all four approaches:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page of Tom Jones</title>
<link rel="stylesheet" type="text/css" href="./toms_stylesheet.css" />
<style type="text/css">
#special {
color: red;
text-align: right;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center" style="font-style: oblique;">
Home page of Tom Jones
</h1>
<p>
Hello World!
</p>
<hr class="short" />
<p>
I was told that the best way to learn <b>XHTML</b>
is to get a good book on it and to look at as many web page
ource examples as possible from the Internet.
<br />
If you know a really good book on the subject please send me a copy
to the following address:
<address class="blue">
Tom Jones<br />
138 Webmaster Ave. Apt.#6<br />
45 Hue, El Dorado.
</address>
</p>
<p>
Did you know that with style sheets you can define your own containers?
<br />
For example you can have your own
<bi><bi>bold-italic font</bi></bi>
container.
</p>
<hr />
<p id="special">
That's all folks!
</p>
</body>
</html>
The accompanying style sheet file "toms_stylesheet.css":
/* Tom's style sheet file */
body {
background: #000011;
}
hr.short {
width: 60%;
}
address.blue {
color: blue;
}
bi {
font-style: italic;
font-weight: bold;
}
Style is applied to the content of the containers through descriptors. The most common descriptors are the name of the container, its id, and its class. To a content of a given container all styles whose descriptors match the descriptor of the container will be applied. Obviously multiple style sheets and/or multiple ways of specifying styles for a document are bound to create style conflicts. In such cases certain precedence rules determine which style will be applied when the document is displayed.
As said, the best way to learn about XHTML is to look at some examples (preferably with a good XHTML book at hand). The SWIG pages contain a couple of reasonably good starting homepage templates to play with. And remember, Google is your friend. There are dozens of good free online tutorials about XHTML and CSS. One needs only to type in an appropriate keyword into the Google search engine to obtain a multitude of tips, tricks, and advices from web developers around the world.
Written August, 2005.
