___ /
_/ | \,^%---
|_____| <_ \ Fear not. It's quite simple....
--- == >/
[_____] __>,^
ejm | | //| |
I'm a big fan of the several dictionaries on our shelves but the Webster's Online Dictionary is so wonderful that I've added it to the top of this page. If you would like to put this on your site as well, here is the coding. (Please note that this is a modification of the coding given out on websters-online-dictionary.org. Their coding is hopelessly outdated and full of validation errors.) Here is XHTML (1.0 Transitional) coding for the above Webster's Online Dictionary search box:
Copy the following section between the dotted lines and paste it into your text editor (notepad)
-------------------------dotted line-------------------------
<form action="http://www.websters-online-dictionary.org/search/"
method="post" id="websters"
title="websters-online-dictionary.org" onclick="this.target='_blank';"
style="background:#006; color:#fff;
width:25% !important;
border:2px outset #006; margin: auto;
text-align:center;
font:0.8em Helvetica, Arial, sans-serif;>
<div style="background:#f3f7fa; color:#003;padding-bottom:4px;">
<strong>Webster's Online Dictionary</strong><br />
<small>with Multilingual Thesaurus Translation</small>
</div>
<div style="padding:4px 0 1px 0;background:#f3f7fa; color:#003;">
<label for="dict"><input name="s" id="dict" size="20" /></label>
<input type="submit" value="Search" style="background:#f3f7fa; color:#003;
border:2px outset #003;
padding:1px 6px;" title="websters-online-dictionary.org"
onmouseover="setAttribute('title', this.title + ' \(search opens in a new window\)');"
onmouseout="setAttribute('title', '');" />
<br style="display:none" /></div>
<div style="background:#f3f7fa; color:#003;
text-align:left;
font-family:georgia, serif;
padding:0 25px;">
<input type="radio" name="R1" checked="checked" value="en" /><b>English</b>
<input type="radio" name="R1" value="all" />Non-English
</div>
</form>
-------------------------dotted line-------------------------
On the searchbox HTML instructions page, Webster's Online Dictionary wrote:
Note: To be able to fully-utilize the dictionary, the web page that contains any of the code above will have to be encoded in UTF-8.Here is the coding that should appear somewhere above <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(The doctype coding should be placed directly above <html> in the coding of your page.)
If you would like to put the styles into their own file, here is the coding without the styles embedded:
<form action="http://www.websters-online-dictionary.org/search/"
method="post" id="websterbox"
title="websters-online-dictionary.org" onclick="this.target='_blank';">
<div id="webstertop">
<strong>Webster's Online Dictionary</strong><br />
<small>with Multilingual Thesaurus Translation</small>
</div>
<div id="websterbottom">
<label for="dict"><input name="s" id="dict" size="20" /></label>
<input type="submit" value="Search" id="webstersearch" title="websters-online-dictionary.org"
onmouseover="setAttribute('title', this.title + ' \(search opens in a new window\)');"
onmouseout="setAttribute('title', '');" />
<br /></div>
<div class="serif">
<input type="radio" name="R1" checked="checked" value="en" /><strong>English</strong>
<input type="radio" name="R1" value="all" />Non-English
</div>
</form>
And here are the styles:
#websterbox {background:#f3f7fa; color:#003;
width:25% !important;
border:2px outset #006; margin: auto;
text-align:center;
font:0.8em Helvetica, Arial, sans-serif;}
#websterbox #webstertop {background:#006; color:#fff;
padding-bottom:4px;}
#websterbox #websterbottom {padding:4px 0 1px 0;}
#websterbox #webstersearch {background:#f3f7fa; color:#003;
border:2px outset #003;
padding:1px 6px;}
#websterbox #webstersearch br {display:none;}
#websterbox .serif {text-align:left;
font-family:georgia, serif;
padding:0 25px;}
Place the style coding between <style type="text/css"> and </style> somewhere above </head> OR save the style file as websterbox.css and call it up with <link rel="stylesheet" href="websterbox.css" type="text/css" />.
(The 4.01 Transitional HTML coding for Webster's Online Dictionary search box is on the phpBB discussions post entitled "How to put a Webster's Online Dictionary box on your site".)
\_,^^%---
<\_ \ See? It's easy when you know how....
>
>^^
/|
ejm | \
© llizard 2009 ( last modified 30 September 2009)
CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page