<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<title>HTML 4.01 Transitional Document Sample</title>
<base target="_top">
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hosono@si.gunma-u.ac.jp">
<script type="text/javascript">
<!--
// JavaScript for clock
var timerID = null;
var timerRunning = false;
var tzStr = "";
function clock() { // display the current time in GMT and local timezone
var now = new Date();
if (tzStr == "") tzStr = timediffStr(now.getTimezoneOffset());
document.f.time1.value =
datetimeStr(now.getUTCFullYear(), now.getUTCMonth()+1, now.getUTCDate(),
now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(),
"GMT");
document.f.time2.value =
datetimeStr(now.getFullYear(), now.getMonth()+1, now.getDate(),
now.getHours(), now.getMinutes(), now.getSeconds(), tzStr);
window.status = document.f.time2.value
timerID = setTimeout("clock()", 1000);
timerRunning = true;
}
function datetimeStr(y, m, d, hh, mm, ss, tz) { // "yyyy/mm/dd HH:MM:SS"-format
if (m < 10) m = "0" + m;
if (d < 10) d = "0" + d;
if (hh < 10) hh = "0" + hh;
if (mm < 10) mm = "0" + mm;
if (ss < 10) ss = "0" + ss;
return y + "/" + m + "/" + d + " " + hh + ":" + mm + ":" + ss + " " + tz;
}
function timediffStr(tzoff) { // timezone offset in minutes -> [+|-]hhmm
var h = parseInt(Math.abs(tzoff) / 60);
var m = Math.abs(tzoff) % 60;
if (h < 10) h = "0" + h;
if (m < 10) m = "0" + m;
return (tzoff < 0 ? "+" : "-") + h + m;
}
function stopClock() { // stop the clock
if (timerRunning) clearTimeout(timerID);
timerRunning = false;
}
// JavaScript for BMI calculation
function compute(form) { // calculate the BMI value
var h = form.height.value, w = form.weight.value;
if (!h || !w) {
alert("Input your size, i.e., height and weight!");
return;
}
form.result.value = w / (h * h);
}
function clearField(field) { // clear a given field and result field
if (field.name != "expr") field.value = "";
document.bmi_form.result.value = "";
}
function checkVal(field, low, hi) { // check the value of field in [low, hi]
if (field.value < low || field.value > hi) {
alert("The value of '" + field.name + "' not in ["+low+","+hi+"].");
field.value = "";
}
}
// -->
</script>
</head>
<body bgcolor="#e8e8e8" text=black link=red vlink=maroon alink=fuchsia
onLoad="clock();" onUnload="stopClock();">
<h1><a href="http://validator.w3.org/check?uri=http://www.si.gunma-u.ac.jp/~hosono/html/html401.html">
<img src="ic/vh401.png" alt="[Valid HTML 4.01]" width=88 height=31></a>
HTML 4.01 Transitional Document Sample</h1>
<h5><i>Based on:</i> <a href="spec/HTML401/loose.dtd">HTML401/loose.dtd</a>
(1999/12/24 by <em>Dave Raggett, Arnaud Le Hors, and Ian Jacobs</em>)</h5>
<i>Last modified:</i> 2003/06/19
<hr>
<h3><img src="line.gif" alt="========== " align=middle> Headings / Blocks</h3>
<h1>Heading Level 1</h1>
<h2 align=center>Heading Level 2</h2>
<h3 align=right>Heading Level 3</h3>
<h4 align=right>Heading Level 4</h4>
<h5 align=center>Heading Level 5</h5>
<h6 align=left>Heading Level 6</h6>
<p align=left>This is a left-aligned paragraph.<br>Can you see so?</p>
<p align=center>This is a centering paragraph.<br>Can you see so?</p>
<p align=right>This is a right-aligned paragraph.<br>Can you see so?</p>
<div align=left>This is a left-aligned division.<br>Can you see so?</div>
<div align=center>This is a centering division.<br>Can you see so?</div>
<div align=right>This is a right-aligned division.<br>Can you see so?</div>
<center>CENTER is a shorthand for DIV with ALIGN=CENTER.</center>
<p>
<iframe src="sample/girl.png" title="Girl picture" width=400 height=320
align=right frameborder=0>
Your browser doesn't understand the <IFRAME> tag.
</iframe>
<br clear=all>
<h3><img src="line.gif" alt="========== " align=middle> Link / Images</h3>
<p>URL: <a href="http://www.si.gunma-u.ac.jp/~hosono/html/html401.html">
http://www.si.gunma-u.ac.jp/~hosono/html/html401.html</a>
(<a href="html401_src.html">Source</a>)
<br><a href="http://www.w3.org/TR/html401/struct/links.html#h-12.2">
Related part</a> of W3C HTML 4.01 description.
<p>There are top-aligned line <img src="line2.gif" alt="T" align=top> and
picture <img src="sample/pic.gif" alt="TP" align=top width=50>.<br>
There are middle-aligned line <img src="line2.gif" alt="M" align=middle> and
picture <img src="sample/pic.gif" alt="MP" align=middle width=60 height=60>.<br>
There are bottom-aligned line <img src="line2.gif" alt="B" align=bottom> and
picture <img src="sample/pic.gif" alt="BP" align=bottom>.
<p>
<img src="sample/dog.jpg" alt="LP" align=left vspace=5 hspace=15>
<img src="sample/pic.gif" alt="RP" align=right vspace=5 hspace=10>
Here are the floating images.
Image of the dog will float over the left margin, and subsequent text wraps
around the right hand side of this image. Image of 3-object picture will float
over the right margin, and the text wraps around its left hand side.
<br clear=all>
So in this case subsequent text is between these images.
<p>
The following imagemap is not server-side but client-side:
<map name="imap">
<area shape=rect coords="15,2,50,19" alt="red box"
href="http://www.gunma-u.ac.jp/">
<area shape=circle coords="14,35,13" alt="green circle"
href="http://www.si.gunma-u.ac.jp/">
<area shape=poly coords="33,36,36,42,64,42,69,36,57,36,54,27,48,29,44,36"
alt="blue ship" href="http://www.si.gunma-u.ac.jp/~hosono/">
<area shape=rect coords="0,0,71,49" alt="white background" nohref>
</map>
<img src="sample/pic.gif" alt="imagemap" usemap="#imap" border=0></p>
<h3><img src="line.gif" alt="========== " align=middle> Lists</h3>
<dl compact>
<dt> first term
<dd> the definition of first term
<dt> second term
<dd> the definition of second term
<dt> third term
<dd> the definition of third term
</dl>
<ul>
<li> first item
<ul>
<li> aaaa
<ul>
<li> abc
<ul>
<li> def
</ul>
<li> xyz
</ul>
<li> bbbb
</ul>
<li> second item
<ul type=square>
<li> cccc
<ul type=disc>
<li> ghi
<ul type=circle>
<li> ijk
</ul>
<li> pqr
</ul>
<li> dddd
</ul>
<li type=circle> third item
</ul>
<ol>
<li> first item
<ol type=a>
<li> aaaa
<ol type=i>
<li> abc
<ol type=1>
<li> def
</ol>
<li> xyz
</ol>
<li> bbbb
</ol>
<li> second item
<ol type=a start=3>
<li> cccc
<li> dddd
</ol>
<li value=10> third item
<ol type=I>
<li> aaaa
<ol type=A>
<li> abc
<li> xyz
</ol>
<li> bbbb
</ol>
</ol>
<!-- don't use MENU or DIR -->
<menu>
<li> first item of menu
<li> second item
<li> third item
</menu>
<dir>
<li> first item of directory
<li> second item
<li> third item
</dir>
<h3><img src="line.gif" alt="========== " align=middle> Text / Phrase</h3>
<p>
<tt>Typewriter text, e.g. fixed-width font</tt><br>
<b>Bold text</b><br><i>Italic text</i><br><u>Underlined text</u><br>
<s>Strike-through text part 1</s><br>
<strike>Strike-through text part 2</strike><br>
This is <big>BIG font</big><br>This is <small>SMALL font</small><br>
Subscript: x<sub>2</sub><br>Superscript: x<sup>n</sup><br>
<p>
<em>Emphasized phrase</em><br><strong>Strong emphasis</strong><br>
<samp>Sample text or characters</samp><br>
Keyboard directive: press <kbd>RETURN</kbd> key<br>
Variables: <var>name</var>, <var>count</var><br>
<cite>Name or title of cited work</cite>: As <cite>Harry S. Truman</cite> said,
<q lang="en-us">The buck stops here.</q><br>
Source code phrase: <code>printf("hello, world\n");</code><br>
<acronym lang="en" title="World-Wide Web">WWW</acronym>:
a hypertext-based, distributed information system, invented by Tim Berners-Lee
<abbr lang="en" title="et alii">et al.</abbr><br>
<del>deleted text</del> <ins>inserted text</ins><br>
<p>
<font size=1>size=1</font> <font size=2>size=2</font> <font size=3>size=3</font>
<font size=4>size=4</font> <font size=5>size=5</font> <font size=6>size=6</font>
<font size=7>size=7</font>
<br>
<font size="-4">size=-4</font> <font size="-3">size=-3</font>
<font size="-2">size=-2</font> <font size="-1">size=-1</font>
<font size="+1">size=+1</font> <font size="+2">size=+2</font>
<font size="+3">size=+3</font> <font size="+4">size=+4</font>
<br>
<basefont size=6>
<font size="-4">size=-4</font> <font size="-3">size=-3</font>
<font size="-2">size=-2</font> <font size="-1">size=-1</font>
<font size="+1">size=+1</font> <font size="+2">size=+2</font>
<font size="+3">size=+3</font> <font size="+4">size=+4</font>
<basefont size=3>
<p>
Font color:
<font color=aqua>Aqua</font>, <font color=black>Black</font>,
<font color=blue>Blue</font>, <font color=fuchsia>Fuchsia</font>,
<font color=gray>Gray</font>, <font color=green>Green</font>,
<font color=lime>Lime</font>, <font color=maroon>Maroon</font>,
<font color=navy>Navy</font>, <font color=olive>Olive</font>,
<font color=purple>Purple</font>, <font color=red>Red</font>,
<font color=silver>Silver</font>, <font color=teal>Teal</font>,
<font color=white>White</font>, <font color=yellow>Yellow</font>
<p>
Font face:
<font face="Times">Times</font>, <font face="Courier">Courier</font>,
<font face="Helvetica">Helvetica</font>, <font face="Palatino">Palatino</font>
<p>
Styled text:
<span style="font-size:24pt;color:#ffc0cb" lang="en">pink and 24pt text</span>
<p>This paragraph contains a quotation:
<blockquote>This block is a quotation. This block is a quotation.
This is a quotation. This is a quotation.</blockquote>
The quotation ends here.
<p>Send S-mail at:<br>
<address>
Fumio HOSONO<br>
Fac. of Social and Information Studies, Gunma Univ.<br>
4-2 Aramaki-machi, Maebashi, Gunma 371-8510 JAPAN
</address>
<pre>
This is
a preformatted
text.
</pre>
<p>Horizontal rules follow:<br>
<hr>
<hr width=200 align=right>
<hr width="50%" size=10 align=center>
<hr noshade>
<p>Some HTML comment lines follow:<br>
<!-- you should not be able to see this phrase --><br>
<!-- <strong>you should not be able to see this phrase</strong> --><br>
</p>
<h3><img src="line.gif" alt="========== " align=middle> Tables</h3>
<table border=1 width="40%">
<tr><td height=40>Alpha</td>
<td align=center valign=bottom height=40>Beta</td>
<td valign=middle height=40>Gamma</td></tr>
<tr><td align=right valign=top height=40>Delta</td>
<td align=center valign=middle height=40>Epsilon</td>
<td align=left valign=bottom height=40>Lambda</td></tr>
</table>
<br>
<table border=1 cellpadding=5 cellspacing=1>
<caption align=bottom>Gender Comparison Table</caption>
<tr><th rowspan=2 colspan=2></th>
<th colspan=2 bgcolor="#cccccc">Average</th></tr>
<tr bgcolor="#cccccc"><th>Height</th><th>Weight</th></tr>
<tr><th rowspan=2 valign=top bgcolor="#cccccc">Gender</th>
<th bgcolor="#cccccc">Males</th>
<td align=right bgcolor="#ffffff">171.5</td>
<td align=right bgcolor="#ffffff">60.8</td></tr>
<tr><th bgcolor="#cccccc">Females</th>
<td align=right bgcolor="#ffffff">158.6</td>
<td align=right bgcolor="#ffffff">44.5</td></tr>
</table>
<br>
<table border=2 bgcolor="#ffffff" frame="hsides" rules="cols">
<caption align=right>Many browsers not supported fully.</caption>
<colgroup span=1 width=100 align=center>
<colgroup>
<col span=1 width=50 align=center>
<col span=2 width=80 align=right>
</colgroup>
<thead align=center>
<tr bgcolor="#cccccc"><th>Name</th><th>Sex</th>
<th>Height</th><th>Weight</th></tr>
</thead>
<tfoot align=center>
<tr bgcolor="#cccccc"><td></td><td></td><td>164.3</td><td>52.5</td></tr>
</tfoot>
<tbody>
<tr><td>Adam</td><td>M</td><td>171.5</td><td>60.8</td></tr>
<tr><td>Eve</td><td>F</td><td>158.6</td><td>44.5</td></tr>
</tbody>
</table>
<h3><img src="line.gif" alt="========== " align=middle> Forms</h3>
<form action="http://www.f.si.gunma-u.ac.jp/~hosono/cgi/query.cgi" method=POST>
<b>Your name:</b> <input type=text name="name" size=15 maxlength=25 value="">
<b>Your email:</b> <input type=text name="email" size=25 maxlength=40 value="">
<br><b>Your sex:</b> <select name="sex">
<option value="M" selected> Male
<option value="F"> Female
</select>
<b>Your blood:</b>
<input type="radio" name="blood" value="A"> A
<input type="radio" name="blood" value="B"> B
<input type="radio" name="blood" value="O" checked> O
<input type="radio" name="blood" value="AB"> AB
<br>
<!-- The following item is not displayed. -->
<input type="hidden" name="item" value="hidden item" size="20">
<br><b>Your favorite topics:</b><br>
<input type="checkbox" name="favor" value="A"> Internet / Multimedia
<input type="checkbox" name="favor" value="B"> Linguistic / Culture
<input type="checkbox" name="favor" value="C"> Sociology
<input type="checkbox" name="favor" value="D"> Politics
<input type="checkbox" name="favor" value="E"> Economics
<input type="checkbox" name="favor" value="F"> Others
<br><b>Please write your message.</b> (<i>fewer than 1000 characters</i>)<br>
<textarea name="mesg" rows=5 cols=60></textarea><br>
<input type="submit" value=" Submit "><input type="reset" value=" Clear ">
</form>
<p>To calculate BMI, input your height and weight and
then click the "Check" bottun.
<form name="bmi_form" action="#">
<b>Height</b>: <var>h</var> =
<input type="text" name="height" size=6 value="1.73"
onFocus="clearField(this);" onChange="checkVal(this, 0.00, 8.00);">(m),
<b>Weight</b>: <var>w</var> =
<input type="text" name="weight" size=6 value="60.0"
onFocus="clearField(this);" onChange="checkVal(this, 0.0, 1000.0);">(kg)
<br><b>BMI</b> = <var>w</var> / <var>h</var><sup>2</sup> =
<input type="text" name="result" size=12 value="">
<input type="button" name="calc" value=" Check "
onClick="compute(this.form);" onKeyPress="compute(this.form);">
<button type="reset" name="clear" value=" Clear ">
Reset
</button>
</form>
<p>For the confirmation, make some fields disable to change in some browsers.
<form action="http://www.f.si.gunma-u.ac.jp/~hosono/cgi/query.cgi" method=POST>
<b>UserID:</b> <input type=text name="id" size=10 value="xxxxx" readonly>
<b>Key:</b> <input type="password" name="key" size=10 value="">
<br>Your browser: <select name="agent">
<optgroup label="Netscape">
<option value="N3">Netscape Navigator 3.*
<option value="N4">Netscape Communicator 4.*
<option value="N6">Netscape 6.*
</optgroup>
<optgroup label="Internet Explorer">
<option value="E3">Internet Explorer 3.*
<option value="E4">Internet Explorer 4.*
<option value="E5">Internet Explorer 5.*
<option value="E6">Internet Explorer 6.*
</optgroup>
<optgroup label="Other ...">
<option value="O">Opera
<option value="M">Mosaic
<option value="X" selected>Unknown
</optgroup>
</select>
<br>Your message:<br>
<textarea name="mesg" rows=2 cols=40 readonly>xxxxx yyyyy zzzzz</textarea><br>
<input type="submit" value=" Submit "><input type="reset" value=" Clear ">
</form>
<h3><img src="line.gif" alt="========== " align=middle> Objects / Scripts</h3>
<p>Picture (PNG or GIF):
<object data="sample/pic.png" type="image/png" width=72 height=50 align=top>
<object data="sample/pic.gif" type="image/gif" width=72 height=50 align=top>
Your browser doesn't understand the <OBJECT> tag.
</object>
</object>
<p>QuickTime movie:<br>
<object data="sample/md.mov" type="video/quicktime" standby="Now Loading..."
hspace=20 vspace=20 declare>
Your browser doesn't understand the <OBJECT> tag.
</object>
<p>When a mouse pointer is moved onto the image or clicked,
an another image is displayed.
<applet codebase="." code="SwapImage.class" width=20 height=20 align=middle>
<param name="bgcolor" value="e8e8e8">
<param name="image0" value="sample/back.gif">
<param name="image1" value="sample/forw.gif">
<param name="image2" value="sample/up.gif">
Your browser doesn't understand the <APPLET> tag.
</applet>
<p><form name="f" action="#">Clock
<input type=text name="time1" size=28 value="">
<input type=text name="time2" size=30 value="">
</form>
<h3><img src="line.gif" alt="========== " align=middle> Characters</h3>
<p>Escape sequences:<br>
5 < 7 & 8 > 2</p>
<p>Accented characters:<br>
Grüß Gott (Hello)</p>
<p>Additional characters:<br>
176 ± 2<br>
Long. 139°03'50"E, Lat. 36°23'16"N</p>
<hr>
<address><a href="http://www.si.gunma-u.ac.jp/~hosono/">Fumio HOSONO</a>
<hosono@si.gunma-u.ac.jp></address>
</body></html>