Introduction to XHTML, with eXamples
February 2, 2000
Tag names are linked to WDVL's descriptions for the
HTML 4 counterparts.
These are perfectly valid so long as you keep in mind the extra
requirements of XHTML,
such as lower-case names and mandatory tag closures;
the examples should make this clear.
An XHTML document consists of three main parts:
The basic document structure is
<!DOCTYPE ...>
<html ... >
<head> ... </head>
<body> ... </body>
</html>
The <head> contains information about the document, such as
ownership, copyright, keywords, etc;
and the <body> contains the document to be displayed.
Here's a minimal XHTML document:
1: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
3: <title>Minimal document</title>
5: </head>
6: <body>
7: <p>
8: <a href="http://validator.w3.org/check/referer">
validate</a>
9: </p>
10:</body>
11:</html>
The numbers and colons are not part of the HTML file, but serve to
associate the following comments with the lines above:
- Specifies the document type.
- Declares this to be an HTML document and declares an XML namespace.
- The head contains items that are about the document.
- The title used in the browser title bar, hotlists, listings, etc.
- Closes the head.
- body contains the document's displayable content.
- Begins a paragraph.
- An anchor, to the W3C validator.
- Closes the paragraph.
- Closes the body.
- Closes the html.
<head>
<title>Web Developer's Virtual Library</title>
<base href = "http://wdvl.internet.com/" />
<link rel = "STYLESHEET"
href = "/Authoring/Style/Sheets/NavMar.css"
type = "text/css" />
<meta name = "Description"
content = "The Original Encyclopedia of
Web Technology... " />
<meta name = "Keywords"
content = "
VR,CGI,CSS,DOM,URL,SQL,XML,CDF,MCF,OSD,RDF,XSL,
FAQ,FTP,DTD,DHTML,VRML,HTTP,UNIX,SGML," />
<meta name = "Copyright"
content = "1999 internet.com LLC" />
</head>
The <head> element contains 'metadata' for the document,
and other information used by the browser but not displayed, e.g.
the URI of a style sheet to apply.
Exactly the same as in HTML 4.
Every document should have a title - it appears as a 'label' on the
browser window, and when a user bookmarks it or looks in their history
list - it's the text they'll see. Take care to make the title a good
meaningful one. "Introduction" isn't much help if the user can't
remember what was being introduced.
<title>An Introduction to XHTML</title>
<base> has no content, and so the tag is terminated with />.
<link> has no content, and so the tag is terminated with />.
<meta> has no content, and so the tag is terminated with />.
Unlike in HTML 4, the <p> closing tag cannot be omitted.
This is going to cause grief for many, since we got so used to treating
(incorrectly) <p> as a separator rather than a container.
<p> This is a paragraph.
Note the closing tag.
</p><p>
This is the next paragraph.
</p>
The fundamental feature of the
WWW that makes it so powerful is of
course,
hypertext links.
The tag that creates those links is called the
anchor tag (A).
It has two commonly used attributes:
- href
-
which specifies the
URL of the target document.
- id or name
-
The first is the XML form, and the second is the HTML form, of
the attribute used to name or identify the anchor as a potential
target for fragment identifiers, i.e. URI's ending with # followed by a name
(used when you want a link to go to a point inside a document).
You are advised to use both, e.g. <a id="foo" name="foo">...</a>
Images have made a profound difference in the way the web looks.
Almost certainly there would not have been the incredible explosion of interest
in it if inline images had not been added..
<img src = "/Icons/graphics.gif"
alt = "Graphics"
width = "108"
height = "44"
border = "0"
hspace = "16"
align = "left"
/>
Note that all the attribute values are quoted, and
that the final 3 attributes (border, hspace, align) cannot be used
with the strict DTD.
There are several kinds of lists. Three important ones are
- Ordered Lists.
- The list items are ordered,
e.g. by numerals:
- first
- second
- Unordered Lists.
- The list items are bulleted:
- Definition Lists.
- This list is a definition list
<dl>
<dt> Ordered Lists. </dt>
<dd> The list items are ordered,
e.g. by numerals:
<ol>
<li> first </li>
<li> second </li>
</ol>
</dd>
<dt> Unordered Lists. </dt>
<dd> The list items are bulleted:
<ul>
<li> first </li>
<li> second </li>
</ul>
</dd>
<dt> Definition Lists. </dt>
<dd> This list is a definition list
</dd>
</dl>
Unlike in HTML 4,
the <li>, <dt>, and <dd> closing tags cannot be omitted.
The second radio button should be checked,
and option "second" should be selected.
<p>
The second radio button should be checked,
and option "second" should be selected.
</p>
<form method = "get" action = "">
<p>
<input type = "radio"
name = "n1"
value = "v1"
/>
<input type = "radio"
name = "n2"
value = "v2"
checked = "checked"
/>
<select name = "s1">
<option>first</option>
<option selected = "selected">second</option>
</select>
</p>
</form>
Introduction to XHTML: Differences with HTML 4.
Introduction to XHTML, with eXamples
|
