How to put a Webster's Online Dictionary box on your site

posts from 13 October 2004 to 14 March 2011
Locked
ejm
registered
Posts: 356
Joined: Thu 14 Oct, 2004 12:53 pm

How to put a Webster's Online Dictionary box on your site

Post by ejm » Sun 27 Sep, 2009 12:57 pm

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 [edit]<strike>the top of this page</strike> to each posting area[/edit]. 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.)

XHTML (1.0 Transitional) coding for Webster's Online Dictionary search box:

Code: Select all

<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>
HTML (4.01 Transitional) coding for Webster's Online Dictionary search box

Code: Select all

<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>
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>

Code: Select all

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

As long as the correct doctypes are on the page, the above coding validates. (And it works as well.)

XHTML 1.0 Transitional doctype:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 Transitional doctype:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">


edit: The XHTML coding with stylesheets is here: /cwc/dictionaryhelp.html
============
("disable HTML in this post" is checked so that the coding shows up correctly)
Last edited by ejm on Sat 28 Nov, 2009 11:58 pm, edited 4 times in total.

CAM
registered
Posts: 487
Joined: Thu 14 Oct, 2004 12:05 am

Post by CAM » Sat 07 Nov, 2009 10:09 am

oooh, I want this on my website.... but where to put it????

ejm
registered
Posts: 356
Joined: Thu 14 Oct, 2004 12:53 pm

Post by ejm » Sat 07 Nov, 2009 1:57 pm

CAM wrote:oooh, I want this on my website.... but where to put it????
Yes, I know what you mean. It was tricky deciding where to put it here too. I'm not sure I chose the best spot, but still it's very cool to have.

Locked