Chapter 17. Tips, Tricks, and Hacks
17.1.2. Boilerplate Documents
<html>
<head>
<title>Required; replace this title with your own</title>
</head>
<body>
<h3>Reiterate the title here</h3>
…Insert your document’s contents here…
<address>Include your name and contact information
usually at the end of the document
</address>
</body>
</html>
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Every XHTML document needs a title</title>
</head>
<body>
<h3>Reiterate the title here</h3>
…Insert your document’s contents here…
<address>Include your name and contact information
usually at the end of the document
</address>
</body>
</html>
17.3. Custom Bullets
<html>
<body>
<dl>
<dt><dd><img src=”checkmark.gif”> Pickled Kumquats
<dt><dd><img src=”checkmark.gif”> ‘Quats and ‘Kraut
<dt><dd><img src=”checkmark.gif”> ‘Quatshakes
<dt><dd><img src=”checkmark.gif”> Liver with Fried ‘Quats
</dl>
</body>
</html>
<html>
<body>
<style>
ul.checks li {list-style-image: url(“pics/checkmark.gif”)}
</style>
…later in the document
<ul class=”checks”>
<li> Pickled Kumquats </li>
<li> ‘Quats and ‘Kraut </li>
<li> ‘Quatshakes </li>
<li> Liver with Fried ‘Quats </li>
</ul>
</html>
17.4.1.1. Basic multicolumn layout
<html>
<body>
<table border=0 cellspacing=7>
<tr>
<td>The one thing the browsers won’t do is automatically balance the text in the columns, resulting in adjacent columns of approximately the same length. You’ll have to experiment with your document, manually shifting text from one column to another until you achieve a nicely balanced page.
Keep in mind, though, that users may resize their display windows and the columns’ contents will shift accordingly. So don’t spend a lot of time getting the last sentences of each column to line up exactly; they’re bound to be skewed in other browser window widths.
Of course, you can easily convert the example layout to three or more columns by dividing the text among more cells in the table. But keep in mind that pages with more than three columns may prove difficult to read on small displays where the actual column width might be quite small.
<td><br>
<td>One very common and popular page-layout element missing from the either HTML or XHTML standard is multiple columns of text. Although Netscape version 4 (and earlier) supports the <multicol> extension, for a more universal solution, place your document content inside a table of one row with two or more columns.
</table>
</body>
</html>
17.4.1.2. Straddle heads
<html>
<body>
<table border=0 cellspacing=7>
<tr>
<th colspan=5><h2>The History of the Kumquat</h2>
<tr valign=top>
<td rowspan=2>Copy for column 1…(The one thing the browsers won’t do is automatically balance the text in the columns, resulting in adjacent columns of approximately the same length. You’ll have to experiment with your document, manually shifting text from one column to another until you achieve a nicely balanced page. )
<td rowspan=2 width=24><br>
<td>Copy for column 2…(Keep in mind, though, that users may resize their display windows and the columns’ contents will shift accordingly. So don’t spend a lot of time getting the last sentences of each column to line up exactly; they’re bound to be skewed in other browser window widths. )
<td width=24><br>
<td>Copy for column 3…(Of course, you can easily convert the example layout to three or more columns by dividing the text among more cells in the table. But keep in mind that pages with more than three columns may prove difficult to read on small displays where the actual column width might be quite small. )
<tr>
<td colspan=3 align=center><img src=”pics/fruit.gif”>
<p>
<i>The Noble Fruit</i>
</table>
</body>
</html>
17.4.2. Side Heads
<html>
<body>
<table>
<tr>
<th width=”20%” align=”right”>
<h3>Section 1</h3></th>
<td></td>
<td>
Copy for section 1 goes on and on a bit
so that it will take up more than one line in the
table cell window… </td>
</tr>
<tr>
<th align=”right”>
<h3>Section 2</h3></th>
<td></td>
<td>
Copy for section 2 goes on and on a bit
so that it will take up more than one line in the
table cell window…</td>
</tr>
</table>
</body>
</html>
17.4.2.1. When tables aren’t implemented
<html>
<body>
<h3>Section 1</h3>
Copy for section 1 goes on and on a bit
so that it will take up more than one line in the
table cell window…
<h3>Section 2</h3>
Copy for section 2 goes on and on a bit
so that it will take up more than one line in the
table cell window…
</table>
</body>
</html>
17.4.3.1. Basic form layout
<html>
<body>
<form method=post action=”http:/cgi-bin/process”>
<table>
<tr>
<th align=right>Name:
<td><input type=text size=32>
<tr>
<th align=right>Address:
<td><input type=text size=32>
<tr>
<th align=right>Phone:
<td><input type=text size=12>
<tr>
<td colspan=2 align=center>
<input type=submit value=”Register”>
</table>
</form>
</body>
</html>
17.4.3.2. Building forms with nested tables
<html>
<body>
<form method=post action=”http:/cgi-bin/process”>
<table>
<tr>
<th align=right>Name:
<td><input type=text size=32>
<tr>
<th align=right>Address:
<td><input type=text size=32>
<tr>
<th align=right>Phone:
<td><input type=text size=12>
<tr>
<td colspan=2 align=center>
<input type=submit value=”Register”>
<tr>
<th align=right valign=top>Preferences:
<td>
<table>
<tr>
<td><input type=checkbox name=pref>Lemons
<td><input type=checkbox name=pref>Limes
<tr>
<td><input type=checkbox name=pref>Oranges
<td><input type=checkbox name=pref>Kumquats
</table>
</form>
</body>
</html>
17.4.4. Embedded Guides
<html>
<body>
The role of the kumquats in earthly and cosmic affairs has been well documented.
Nearly from the moment that humankind began recording history — even as
oral tradition — historians have reported the extraordinary and
omnipresent influences of kumquats.</p>
<p>
<table align=”right”>
<tr>
<td><a href=”#arts”><img src=”pics/d_arrow.gif” border=”0″></a></td>
<td><a href=”#arts”><h6>Kumquat influence<br/>in the Arts</h6></a></td>
</tr>
</table>
For instance, early in the history of man, the kumquat played a vital role in the
formation of religious beliefs. Central to annual harvest celebrations was the day
upon which kumquats ripened. Likened to the sun (<em>sol</em>), the golden fruit
was taken (<em>stisus</em>) from the trees on the day the sun stood highest in the
sky. We carry this day forward even today, as our summer <em>solstice</em>.
</p>
</body>
</html>
17.6.2. Overriding Others’ Targets
<html>
<head>
<title>I need a window of my own</title>
<script language=”JavaScript”>
<!–
if (self != window.top)
window.open(“http://www.kumquats.com/index2.html”);
else
self.location.href = “http://www.kumquats.com/index2.html”;
//–>
</script>
</head>
<body>
Your browser apparently doesn’t support JavaScript. Please
<a href=”http://www.kumquats.com/index2.html”> hyperlink to our site manually.</a>
</body>
</html>
<html>
3.7.2. The <title> Tag
