Chapter 3. Units and Values
3.2.2.1. em and ex units
<html>
<body bgcolor=”yellow”>
<H1>Left margin = 24 pixels</H1>
<H2>Left margin = 18 pixels</H1>
<P>Left margin = 12 pixels</P>
<br><br>
<P>Although this text is the default size for the user agent, the
<SMALL>small-text element</SMALL> within the paragraph has a font
size which is 80% the rest of the text in the paragraph.</P>
</body>
</html>
Chapter 2. Selectors and Structure
2.1. Basic Rules
<html>
<body>
<center>
<H2><FONT COLOR=”lime”>This is H2 text</FONT></H2>
</center>
</body>
<html>
2.3.1. Class Selectors
<html>
<body>
<P CLASS=”warning”><b>While handling plutonium, care must be taken to avoid
the formation of a critical mass.</b></P>
<P>During this step, <SPAN CLASS=”warning”><b>the possibility of implosion is
very real, and must be avoided at all costs</b></SPAN>. This can be accomplished
by keeping the various masses separate…</P>
</body>
</html>
2.3.2. ID Selectors
<html>
<body>
<P ID=”first-para”>This is the first paragraph, and will be boldfaced.</P>
<P>This is the second paragraph, which will NOT be bold.</P>
</body>
</html>
2.3.3. Class? ID? What’s the Difference?
<html>
<body>
<H1 ID=”mostImportant”>This is important!</H1>
<EM ID=”mostImportant”>This is important!</EM>
<LI ID=”mostImportant”>This is important!</LI>
</body>
</html>
2.4.2. Pseudo-Element Selectors
<html>
<body bgcolor=”brown”>
<font color=”gray”><P>This is a paragraph of text which has only one style applied to it. That
style causes the first line to be gray. No other text in the paragraph is
affected by this rule (at least, it shouldn’t be).</P></font>
This is a paragraph of text which has only
one style applied to it. That style causes
the first line to be gray. No other …
<P><P:first-letter>T</P:first-letter>his is a paragraph of text which has
another style sheet applied to it. This time it uses a first-letter effect.
</body>
</html>
2.5. Structure
<HTML>
<HEAD>
<BASE HREF=”http://www.meerkat.web/”>
<TITLE>Meerkat Central</TITLE>
</HEAD>
<BODY>
<H1>Meerkat <EM>Central</EM></H1>
<P>
Welcome to Meerkat <EM>Central</EM>, the <STRONG>best meerkat web site
on <A HREF=”inet.html”>the <EM>entire</EM> Internet</A></STRONG>!</P>
<UL>
<LI>We offer:
<UL>
<LI><STRONG>Detailed information</STRONG> on how to adopt a meerkat</LI>
<LI>Tips for living with a meerkat</LI>
<LI><EM>Fun</EM> things to do with a meerkat, including:
<UL>
<LI>Playing fetch</LI>
<LI>Digging for food</LI>
<LI>Hide and seek</LI>
</UL>
</LI>
</UL>
<LI>…and so much more!</LI>
</UL>
<P>
Questions? <A HREF=”mail to:suricate@meerkat.web”>Contact us!</A>
</P>
</BODY>
</HTML>
2.6. Inheritance
<html>
<body bgcolor=”brown”>
<H1><font color=”gray”>Meerkat <EM>Central</EM></font></H1>
</body>
</html>
2.7. Specificity
<html>
<H1 CLASS=”grape”>Meerkat <EM>Central</EM></H1>
</body>
</html>
2.7.1. Inheritance and Specificity
<html>
<body bgcolor=”lime”>
<H1 ID=”id3″>Meerkat <EM STYLE=”color: black;”>Central</EM>!</H1>
</body>
</html>
2.7.2. Importance
<html>
<body bgcolor=”navy”>
<H1 STYLE=”color: yellows;”>Hi there!</H1>
</body>
</html>
2.8. The Cascade
<html>
<body bgcolor=”yellowss”>
<P STYLE=”color: black;”>Well, <EM>hello</EM> there!</P><br><br>
<P ID=”bright”>Well, <EM>hello</EM> there!</P><br><br>
<P ID=”hello” STYLE=”color: black;”>Hello there!</P><br><br>
</body>
</html>
2.9. Classification of Elements
<html>
<body bgcolor=”yellow”>
<P>This is the first paragraph in the document.</P>
<P STYLE=”display: none;”>This will not be displayed,
nor will it affect the layout of the document.</P>
<P>This is another paragraph in the document.</P><br><br>
<P STYLE=”display: none;”>This page was designed with CSS, and
looks best in a CSS-aware browser–which, unfortunately, yours is not.
However, the document should still be perfectly readable, since that’s
one of the advantages of using CSS.</P>
</body>
</html>
Chapter 1. HTML and CSS
1.2.1. Rich Styling
<html>
<body><center>
<H1>Leaping Above The Water</H1>
</center><br><br>
</body>
</html>
1.2.2. Ease of Use
<html>
<body><center>
<H2><FONT COLOR=”purple”>This is purple!</FONT></H2>
</center><br><br>
</body>
</html>
1.4. Bringing CSS and HTML Together
<HTML>
<HEAD>
<TITLE>Eric’s World of Waffles</TITLE>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”sheet1.css” TITLE=”Default”>
<STYLE TYPE=”text/css”>
@import url(sheet2.css);
H1 {color: maroon;}
BODY {background: yellow;}
/* These are my styles! Yay! */
</STYLE>
</HEAD>
<BODY>
<H1>Waffles!</H1>
<P STYLE=”color: gray;”>The most wonderful of all breakfast foods is
the waffle– a ridged and cratered slab of home-cooked, fluffy
goodness…
</P>
</BODY>
</HTML>
1.4.1.1. LINK attributes
<html>
<body>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”basic.css”>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”splash.css”>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”sheet-a.css”>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”sheet-b.css”>
<P CLASS=”a1″>This paragraph will be gray only if styles from the
stylesheet ‘sheet-a.css’ are applied.</P>
<P CLASS=”b1″>This paragraph will be gray only if styles from the
stylesheet ‘sheet-b.css’ are applied.</P>
</body>
</html>
+
1.4.6. Inline Styles
<html>
<body>
<P STYLE=”color: gray;”>The most wonderful of all breakfast foods is
the waffle– a ridged and cratered slab of home-cooked, fluffy goodness…
</P>
</body>
</html>
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>
Chapter 16. XHTML
16.2.3. A Minimal XHTML Document
<?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 document must have a title</title>
</head>
<body>
…your content goes here…
</body>
</html>
Chapter 15. XML
15.7.2. Using the Address DTD
<html>
<body>
<address type=”home”>
<name>
<first>Chuck</first>
<last>Musciano</last>
</name>
<street>123 Kumquat Way</street>
<city>Cary</city>
<state>NC</state>
<zip length=”10″>27513-1234</zip>
</address>
</body>
</html>
Chapter 13. Dynamic Documents
13.2.2.1. Refreshing the same document
<html>
<head>
<meta http-equiv=”Refresh” content=”15″>
<title>Kumquat Market Prices</title>
</head>
<body>
<h3> Kumquat Market Prices</h3>
Kumquats are currently trading at $1.96 per pound.
</body>
</html>
Chapter 14. Netscape Layout Extensions
14.1.1.1. Creating horizontal space
<html>
<body>
<spacer type=horizontal size=50>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree.
</body>
</body>
</html>
14.1.1.2. Creating vertical space
<html>
<body>
<h1 align=right>Temperature Effects</h1>
<spacer type=vertical size=50>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree.
</body>
</body>
</html>
14.1.1.3. Creating blocks of space
<html>
<body>
<center>
North
<br>
West
<spacer type=block width=50 height=50 align=absmiddle>
East
<br>
South
</center>
</body>
</html>
14.2.1.1. The cols attribute
<html>
<body>
<h1 align=right>Temperature Effects</h1>
<multicol cols=3>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree. The savvy quat farmer will carefully monitor
the temperature, especially in the predawn hours when the
mercury dips to its lowest point. Smudge pots and grove heaters
may be required to keep the trees warm; many growers will spray
the trees with water to create an insulating layer of ice over
the fruit and leaves.
<p>
If a disastrous frost is predicted, below 20°, the only
recourse may be to harvest the fruit early to save it from an
assured disaster. Kumquats may subsequently be ripened using
any of the popular methane and cyanoacrylate injection systems
used for other citrus fruits. Used correctly, these systems will
produce fruit whose taste is indistinguishable from tree-ripened
kumquats.
</multicol><h1 align=right>Temperature Effects</h1>
<multicol cols=3>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree. The savvy quat farmer will carefully monitor
the temperature, especially in the predawn hours when the
mercury dips to its lowest point. Smudge pots and grove heaters
may be required to keep the trees warm; many growers will spray
the trees with water to create an insulating layer of ice over
the fruit and leaves.
<p>
If a disastrous frost is predicted, below 20°, the only
recourse may be to harvest the fruit early to save it from an
assured disaster. Kumquats may subsequently be ripened using
any of the popular methane and cyanoacrylate injection systems
used for other citrus fruits. Used correctly, these systems will
produce fruit whose taste is indistinguishable from tree-ripened
kumquats.
</multicol><h1 align=right>Temperature Effects</h1>
<multicol cols=3>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree. The savvy quat farmer will carefully monitor
the temperature, especially in the predawn hours when the
mercury dips to its lowest point. Smudge pots and grove heaters
may be required to keep the trees warm; many growers will spray
the trees with water to create an insulating layer of ice over
the fruit and leaves.
<p>
If a disastrous frost is predicted, below 20°, the only
recourse may be to harvest the fruit early to save it from an
assured disaster. Kumquats may subsequently be ripened using
any of the popular methane and cyanoacrylate injection systems
used for other citrus fruits. Used correctly, these systems will
produce fruit whose taste is indistinguishable from tree-ripened
kumquats.
</multicol>
</body>
</html>
14.2.1.2. The gutter attribute
<html>
<body>
<h1 align=right>Temperature Effects</h1>
<multicol cols=3 gutter=50>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree. The savvy quat farmer will carefully monitor
the temperature, especially in the predawn hours when the
mercury dips to its lowest point. Smudge pots and grove heaters
may be required to keep the trees warm; many growers will spray
the trees with water to create an insulating layer of ice over
the fruit and leaves.
<p>
If a disastrous frost is predicted, below 20°, the only
recourse may be to harvest the fruit early to save it from an
assured disaster. Kumquats may subsequently be ripened using
any of the popular methane and cyanoacrylate injection systems
used for other citrus fruits. Used correctly, these systems will
produce fruit whose taste is indistinguishable from tree-ripened
kumquats.
</multicol>
</body>
</html>
14.2.1.3. The width attribute
<html>
<body>
<h1 align=right>Temperature Effects</h1>
<multicol cols=3 gutter=10 width=500 width=”75%”>
The effects of cooler weather on the kumquat’s ripening process
vary based upon the temperature. Temperatures above 28°
sweeten the fruit, while four or more hours below 28° will
damage the tree. The savvy quat farmer will carefully monitor
the temperature, especially in the predawn hours when the
mercury dips to its lowest point. Smudge pots and grove heaters
may be required to keep the trees warm; many growers will spray
the trees with water to create an insulating layer of ice over
the fruit and leaves.
<p>
If a disastrous frost is predicted, below 20°, the only
recourse may be to harvest the fruit early to save it from an
assured disaster. Kumquats may subsequently be ripened using
any of the popular methane and cyanoacrylate injection systems
used for other citrus fruits. Used correctly, these systems will
produce fruit whose taste is indistinguishable from tree-ripened
kumquats.
</multicol>
</body>
</html>
14.3.1.2. The left and top attributes
<html>
<body>
<layer left=10 top=10>
Upper left!
</layer>
<layer left=50 top=50>
Middle!
</layer>
<layer left=90 top=90>
Lower right!
</layer>
</body>
</html>
<html>
<body>
<layer>
<layer left=2 top=2>
<h1><font color=gray>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=0 top=0>
<h1>Introduction to Kumquat Lore</h1>
</layer>
</layer>
<h1> </h1>
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 (<i>
sol</i>), the golden fruit was taken (<i>stisus</i>) from the trees on
the day the sun stood highest in the sky. We carry this day forward
even today, as our summer <i>solstice</i>.
t!
</body>
</html>
14.3.1.3. The above, below, and z-index attributes
<html>
<body>
<layer>
<layer name=text left=0 top=0>
<h1>Introduction to Kumquat Lore</h1>
</layer>
<layer name=shadow above=text left=2 top=2>
<h1><font color=gray>Introduction to Kumquat Lore</font></h1>
</layer>
</layer>
<h1> </h1>
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 (<i>
sol</i>), the golden fruit was taken (<i>stisus</i>) from the trees on
the day the sun stood highest in the sky. We carry this day forward
even today, as our summer <i>solstice</i>.
t!
</body>
</html>
<html>
<body>
<layer>
<layer left=0 top=0 z-index=2>
<h1>Introduction to Kumquat Lore</h1>
</layer>
<layer left=2 top=2 z-index=1>
<h1><font color=gray>Introduction to Kumquat Lore</font></h1>
</layer>
</layer>
<h1> </h1>
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 (<i>
sol</i>), the golden fruit was taken (<i>stisus</i>) from the trees on
the day the sun stood highest in the sky. We carry this day forward
even today, as our summer <i>solstice</i>.
t!
</body>
</html>
<html>
<body>
<layer left=0 top=0 z-index=3>
<h1><font color=red>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=4 top=4>
<h1><font color=green>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=8 top=8 z-index=2>
<h1><font color=blue>Introduction to Kumquat Lore</font></h1>
</layer>
<h1> </h1>
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 (<i>
sol</i>), the golden fruit was taken (<i>stisus</i>) from the trees on
the day the sun stood highest in the sky. We carry this day forward
even today, as our summer <i>solstice</i>.
t!
</body>
</html>
14.3.1.4. The background and bgcolor attributes
<html>
<body>
<layer>
<img src=”dbz_3_640.jpeg”>
<p>
<layer top=75>
<h2 align=center>And they lived happily ever after…</h2>
</layer>
</layer>
<h1> </h1>
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 (<i>
sol</i>), the golden fruit was taken (<i>stisus</i>) from the trees on
the day the sun stood highest in the sky. We carry this day forward
even today, as our summer <i>solstice</i>.
t!
</body>
</html>
14.3.2.1. The top and left attributes
<html>
<body>
This <ilayer top=4>word</ilayer> is shifted down, while
this <ilayer left=10>one</ilayer> is shifted over. With a negative
value, words can be moved <ilayer top=-4>up</ilayer> and to
the <ilayer left=-10>left</ilayer>.
</body>
</html>
14.3.2.2. Combining <layer> and <ilayer>
<html>
<body>
<center>
<layer name=me>I’m on top</layer><br><br>
<ilayer above=me>I’m on the bottom</ilayer>
</center>
</body>
</html>
11.2. Frame Tags
<html>
<head>
<title>Frames Layout</title>
</head>
<frameset rows=”60%,*” cols=”65%,20%,*”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html” name=”fill_me”>
<frame scrolling=yes src=”frame4.html”>
<frame src=”frame5.html”>
<frame src=”frame6.html”>
<noframes>
Sorry, this document can be viewed only with a
frames-capable browser.
<a href = “frame1.html”>Take this link</a>
to the first HTML document in the set.
</noframes>
</frameset>
</html>
11.3.2. Nesting <frameset> Tags
<html>
<frameset cols=”50%,*”>
<frameset rows=”50%,*”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
</frameset>
<frameset rows =”33%,33%,*”>
<frame src=”frame3.html”>
<frame src=”frame4.html”>
<frame src=”frame5.html”>
</frameset>
</frameset>
</html>
11.7.1. The target Attribute for the <a> Tag
<html>
<frameset cols=”150,*”>
<frame src=”toc.html”>
<frame src=”pref.html” id=”view_frame”>
</frameset>
</html>
Toc.html
<html>
<body>
<h3>Table of Contents</h3>
<ul>
<li><a href=”pref.html” target=”view_window”>Preface</a>
<li><a href=”chap1.html” target=”view_window”>Chapter 1</a>
<li><a href=”chap2.html” target=”view_window”>Chapter 2</a>
<li><a href=”chap3.html” target=”view_window”>Chapter 3</a>
</ul>
</body>
</html>
Pref.html
<html>
<body>
The first time the user selects one of the table of
contents hypertext links, the browser will open a new window,
label it “view_window,” and display the desired document’s
contents inside it. If the user selects another link from the table of
contents and the “view_window” is still open, the browser will again
load the selected document into that window, replacing the previous document.
</body>
</html>
<html>
<body>
The first time the user selects one of the table of
contents hypertext links, the browser will open a new window,
label it “view_window,” and display the desired document’s
contents inside it. If the user selects another link from the table of
contents and the “view_window” is still open, the browser will again
load the selected document into that window, replacing the previous document.
</body>
</html>
11.7.3. The <base> Default Target
<html>
<head>
<title>Table of Contents</title></head>
</nody>
<base target=”view_frame”>
</head>
<body>
<h3>Table of Contents</h3>
<ul>
<li><a href=”pref.html”>Preface</a></li>
<li><a href=”chap1.html”>Chapter 1</a></li>
<li><a href=”chap2.html” >Chapter 2</a></li>
<li><a href=”chap3.html”>Chapter 3</a></li>
</ul>
</body>
</body>
</html>
Chapter 10. Tables
10.1.2. An Example Table
<html>
<body>
<table border cellspacing=0 cellpadding=5>
<caption align=bottom>
Kumquat versus a poked eye, by gender</caption>
<tr>
<td colspan=2 rowspan=2></td>
<th colspan=2 align=center>Preference</th>
</tr>
<tr>
<th>Eating Kumquats</th>
<th>Poke In The Eye</th>
</tr>
<tr align=center>
<th rowspan=2>Gender</th>
<th>Male</th>
<td>73%</td>
<td>27%</td>
</tr>
<tr align=center>
<th>Female</th>
<td>16%</td>
<td>84%</td>
</tr>
</table>
</body>
</html>
10.2.3.1. The align and valign attributes
<html>
<body>
<table border=”border”>
<tr>
<th>Alignment</th>
<th>Top</th>
<th>Baseline</th>
<th>Center</th>
<th>Bottom</th>
</tr>
<tr align=”center”>
<th><h1>Baseline_ _<br />Another line</h1></th>
<td valign=”top”>AAyy</td>
<td valign=”baseline”>_AAyy_</td>
<td valign=”center”>AAyy</td>
<td valign=”bottom”>AAyy</td>
</tr>
</table>
</body>
</html>
10.3.5. Using Table Sections
<html>
<body>
<table border cellspacing=0 cellpadding=5 rules=groups>
<caption align=bottom>Kumquat versus a poked eye, by gender</caption>
<thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preference
</tr>
<tr>
<th>Eating Kumquats
<th>Poke In The Eye
</tr>
</thead>
<tbody>
<tr align=center>
<th rowspan=2>Gender
<th>Male
<td>73%
<td>27%
</tr>
<tr align=center>
<th>Female
<td>16%
<td>84%
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center>
Note: eye pokes did not result in permanent injury
</table>
</body>
</html>
<html>
<body>
<table border cellspacing=0 cellpadding=5 rules=groups>
<caption align=bottom>Kumquat versus a poked eye, by gender</caption>
<thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preference
<tr>
<th>Eating Kumquats
<th>Poke In The Eye
<tbody>
<tr align=center>
<th rowspan=4>Gender
<th>Males under 18
<td>94%
<td>6%
<tr align=center>
<th>Males over 18
<td>73%
<td>27%
<tr align=center>
<th>Females under 18
<td>34%
<td>66%
<tr align=center>
<th>Females over 18
<td>16%
<td>84%
<tfoot>
<tr>
<td colspan=4 align=center>
Note: eye pokes did not result in permanent injury
</table>
</body>
</html>
10.3.9. Using Column Groups
<html>
<body>
<table border= cellspacing=0 cellpadding=5 rules=groups>
<caption align=bottom>Kumquat versus a poked eye, by gender</caption>
<colgroup span=2>
<colgroup span=2>
<thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preference
<tr>
<th>Eating Kumquats
<th>Poke In The Eye
<tbody>
<tr align=center>
<th rowspan=4>Gender
<th>Males under 18
<td>94%
<td>6%
<tr align=center>
<th>Males over 18
<td>73%
<td>27%
<tr align=center>
<th>Females under 18
<td>34%</td>
<td>66%</td>
<tr align=center>
<th>Females over 18
<td>16%
<td>84%
<tfoot>
<tr>
<td colspan=4 align=center>
Note: eye pokes did not result in permanent injury
</table>
</body>
</html>
Chapter 9. Forms
9.3. A Simple Form Example
<html>
<body>
<form method=POST action=”http://www.kumquat.com/demo”>
Name:
<input type=text name=name size=32 maxlength=80>
<p>
Sex:
<input type=radio name=sex value=”M”> Male
<input type=radio name=sex value=”F”> Female
<p>
Income:
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit>
</form>
</body>
</html>
9.4. Using Email to Collect Form Data
<html>
<body>
<form method=POST action=”mailto:chuckandbill@oreilly.com”
enctype=”text/plain”
onSubmit=”window.alert(‘This form is being sent by email, even
though it may not appear that anything has happened…’)”>
Name:
<input type=text name=name size=32 maxlength=80>
<p>
Sex:
<input type=radio name=sex value=”M”> Male
<input type=radio name=sex value=”F”> Female
<p>
Income:
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit>
</form>
</body>
</html>
9.5.2. Checkboxes
<html>
<body>
<form>
What pets do you own?
<p>
<input type=”checkbox” name=”pets” value=”dog” /> Dog
<br />
<input type=”checkbox” checked=”checked” name=”pets” value=”cat” /> Cat
<br />
<input type=”checkbox” name=”pets” value=”bird” /> Bird
<br />
<input type=”checkbox” name=”pets” value=”fish” /> Fish
</p>
</form>
</body>
</html>
9.8.1.2. The size attribute
<html>
<body>
<form>
What pets do you have?
<select name=”pets” size=”3″ multiple=”multiple”>
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
<option>Fish</option>
</select>
</form>
</body>
</html>
9.8.3. The <optgroup> Tag
<html>
<body>
<form>
<select name=state>
<optgroup label=Northeast>
<option>Maine
<option>New Hampshire
…
</optgroup>
<optgroup label=South>
<option>Georgia
<option>Florida
…
</optgroup>
…
</select>
</form>
</body>
</html>
9.9.6. The disabled and readonly Attributes
<html>
<body>
<form>
Name:
<input type=text name=name size=32 maxlength=80 readonly>
<p>
Sex:
<input type=radio name=sex value=”M” disabled> Male
<input type=radio name=sex value=”F” accesskey=”f”> Female
<p>
Income:
<select name=income size=1 disabled>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit disabled>
</form>
</body>
</html>
9.10.2.2. The <legend> tag
<html>
<body>
<form>
<fieldset>
<legend>Personal information</legend>
<label>Name:<input type=”text” /></label>
<label>Address:<input type=”text” /></label>
<label>Phone:<input type=”text” /></label>
</fieldset>
</form>
</body>
</html>
9.11.5. Good Form, Old Chap
<html>
<body>
<form method=POST action=”http://www.kumquat.com/demo”>
<table border=0>
<tr valign=top>
<td align=right>Name:</td>
<td align=left><input type=text name=name size=32 maxlength=80>
</td>
</tr>
<tr valign=top >
<td align=right>Sex:</td>
<td align=left>
<input type=radio name=sex value=”M”> Male <br>
<input type=radio name=sex value=”F”> Female
</td>
</tr>
<tr valign=top >
<td align=right>Income:</td>
<td align=left>
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
</td>
</tr>
<tr valign=top>
<td colspan=2 align=center>
<input type=submit value=”Submit Query”>
</td>
</tr>
</table>
</form>
</body>
</html>
