TravelinLibrarian.info :: XHTML & CSS Essentials for Library Web Design

XHTML & CSS Essentials for Library Web Design

cover image This is the companion page for my book XHTML & CSS Essentials for Library Web Design published by Neal-Schuman, Inc. in 2005. Here you will find the appendices, all of the code samples along with any errata as necessary.

Online Resources

All of the resource files are available in a single 279k zip file. Each resource is in Word .doc files. The files are:

XHTML Doctypes
Transitional vs. Strict DTDs
Moving from HTML to XHTML
XHTML Transitional DTD
XHTML Strict DTD
XHTML Frameset DTD
XHTML Element & Attribute Reference
Character Entity Reference
Directory Structures and Relative Hyperlinks
W3C Document License

Code Samples

All of the code samples are available in a single 264k zip file. Each sample is a complete .html file contained within a folder for each chapter. Please note that not all chapters have associated code samples.

Errata

p8, added 23 February 2010

The code sample on this page is mostly incorrect. Here is the correct example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml" lang="en" xml:lang="en">
<head>
<title>XHTML 1.0 document</title>
<meta name="description" content="A basic XHTML 1.0 document" />
<style type="text/css">
body {width: 600px; margin-left: auto; margin-right: auto}
</style>
</head>
<body>
<h1>XHTML 1.0</h1>
<img src="logo.gif" alt="logo" title="logo" />
<p>This document is written in XHTML 1.0. You should notice that in this
case all markup is written in lower case, all elements are closed, and there's
a bit more content at the beginning of the code. We're also using a little more
<abbr title="Cascading Style Sheets">CSS</abbr> this time around to
create the same effect as we did with tables in the <abbr title="HyperText
Markup Language">HTML</abbr> 4.01 example.</p>
</body>
</html>

p20, added 06 December 2005

Lines 6 & 7 has the line break in the wrong place and has a hyphen where a dash should be. The lines should read:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

p21, added 07 August 2006

There is a closing quotation mark missing from the lang attribute's value in the root element line. It should read:

<html xmlns="http://www.w3.org/TR/xhtml" lang="en" xml:lang="en">

p22, added 07 August 2006

There is a closing quotation mark missing from the lang attribute's value in the root element line. It should read:

<html xmlns="http://www.w3.org/TR/xhtml" lang="en" xml:lang="en">

This error occurrs twice on the page.

p23, added 07 August 2006

There is a closing quotation mark missing from the lang attribute's value in the root element line. It should read:

<html xmlns="http://www.w3.org/TR/xhtml" lang="en" xml:lang="en">

p24, added 07 August 2006

There is a closing quotation mark missing from the lang attribute's value in the root element line. It should read:

<html xmlns="http://www.w3.org/TR/xhtml" lang="en" xml:lang="en">

p25, added 07 August 2006

There is a closing quotation mark missing from the lang attribute's value and the xml:lang attribute is missing in the root element line. It should read:

<html xmlns="http://www.w3.org/TR/xhtml" lang="en" xml:lang="en">

p26, added 05 December 2005

Footnote #2 should be in quotation marks as I'm quoting from the cited page.

p53, added 23 February 2010

The caption for Figure 3.21 should read "The hn Elements" with an italicized "n"

Also, the screenshot does not correctly represent the display of the relevant code. Here is a correct screenshot:

p66, added 05 December 2005

In the last two lines of the code sample there should not be a line break in the close sample element.

<samp>I can't find that ID. Invalid entry. Please try again.</samp></p>

p108, added 23 February 2010

The caption for Figure 5.6 shows the filename of the image being displayed instead of the value of the alt attribute. I have not explaination as to why the version of lynx I was using at the time did that yet it is still incorrect. Here is a correct screenshot:

p216, added 06 December 2005

The line break is misplaced in the last line of the first code example. It should read:

<input type="hidden" name="mywebsite" value="http://ww.bcr.org/" />

p250, added 06 December 2005

The text alignment in lines 2-4 of code sample is off. Though this does not effect the results, they should read:

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cd="http://www.recshop.fake/cd#">

p251, added 06 December 2005

Lines 5 & 6 of the first code example has been italicized erroneously. No meaning should be implied from this.

p278, added 06 December 2005

The text alignment in the third code sample is off. Although this will not effect the results, they should read:

body {background-color: black; color: white}

p294, added 05 December 2005

The text alignment in the two code samples is off. Although this will not effect the results, they should read:

<style type="text/css> body {background-color: black; color: white} p {text-indent: 5%} @import (url: "/style2.css"); </style>

and

<link rel="stylesheet" type="text/css" href="/style2.css" /> <style type="text/css> body {background-color: black; color: white} p {text-indent: 5%} </style>

p291, added 24 August 2007

Giovanna of the Italian Library Association points out that on this page I say "I covered the issues involving the creation and saving of markup document[s] in the first part of this book." Unfortunately, she wasn't able to find that "dicussion" and she's right. Most likely, since I rarely write chapters in the order that they're published, I intended to cover this in an earlier chapter and it slipped through the cracks. Here's the short version of what that discussion was meant to be:

You're welcome to use any program to create markup and CSS documents as long as it allows you to save your document as "plain text", "ASCII text", "text only" or some version thereof. For example, you can use Microsoft Word, but be sure to save the document as "plain text" instead of Word's .DOC (or .DOCX) format. Because of this I strongly encourage you to use a text editor that saves documents as plain text by default, such as HTML-Kit, so as to avoid the possibility of saving your document in the wrong format.

p300 & 301, added 06 December 2005

The captions on figures 13.13 and 13.14 are incorrect. They should read:

Figure 13.13. The BCR home page
Figure 13.14. The BCR home page with user CSS applied.

p307, added 05 December 2005

In the last code sample on the page there should not be a line break after the closing / and blockquote is misspelled. Those lines should read:

<blockquote>This text will actually be displayed at .72em.</blockquote>

p308, added 05 December 2006

In the sentence that reads "One Pica is equal to 12 points, 12 pt is the equivalent of 1pc and 24pt is the equivalent of 24pt." it should read:

"One Pica is equal to 12 points, 12 pt is the equivalent of 1pc and 24pt is the equivalent of 2pc."

[Thanks to Mike Bowden for spotting this one.]

p311, added 17 April 2007

Paragraph 2: "I've left out certain lines such as the DOCTYPE and titles to save space. All of the files on the CD, are complete documents." This is obviously incorrect since no CD was issued with the book. The files referenced can be downloaded via the "resource files" link near the top of this page.

[Thanks to Shawn Pierce for spotting this one.]

p358, added 06 December 2005

Lines 7 & 8 of the code sample contain an extraneous line break and an emdash instead of a dash. Those lines should read:

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

p350, added 06 December 2005

Lines 1 & 2 of the code sample have a line break in the wrong location. It should read:

<li><a href="/~randd/Database-menu.html">Database Creation</a></li>

p353, added 06 December 2005

Lines 7 & 8 of the code sample contain an extraneous hyphen and have the line break in the wrong location. It should read:

<li style="list-style-type: none;">none — Despite not showing a number of letter, notice that the counting continues.</li>

p359, added 06 December 2005

Lines 12 & 13 of the code sample have a line break in the wrong location. It should read:

<li><a href="/~randd/Database-menu.html">Database Creation</a></li>

p364, added 06 December 2005

The alignment of the code example is off but does not effect the effectiveness of the code. It should read:

<style type="text/css"> #menu {width: 29%; background: #063; color: #fff; font-weight: bold; padding: 10px} #menu a:link {color: #fff} #menu a:visited {color: #fff} #menu a:hover {font-size: 105%; color: #ff6} ul {list-style-type: none} </style>

p365, added 06 December 2005

The alignment of the code example is off but does not effect the effectiveness of the code. It should read:

<style type="text/css"> #menu {width: 29%; background: #063; color: #fff; font-weight: bold; padding: 10px} #menu a:link {color: #fff} #menu a:visited {color: #fff} #menu a:hover {font-size: 105%; color: #ff6} ul {list-style-type: none; margin-left: 0px; padding-left: 5px} </style>

Travelin' Librarian . info

XHTML & CSS Essentials for Library Web Design

Online Resources

Code Samples

Errata