Closed (sort of)

TEOM as you know it has been closed. I will keep it up for reference but it no longer will receive tutorial updates.

There are plans for a completely new site. If you'd like to be notified once the other site is up, simply subscribe to my mailing list.

Thanks for the support throughout all these years :)

XHTML + CSS

Valid Google Search

Valid Google Search tutorial preview.

The first search engine I added to TEOM was Google.

Although Google is able to deliver the results correctly, it doesn’t come with a valid XHTML 1.0 Transitional code, which is how I’ve set my site to be.

Fortunately, it is possible to alter Google’s code in order to make it valid =)

The original code:

<!-- SiteSearch Google --> <FORM method=GET action="http://www.google.com/search"> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <TABLE bgcolor="#FFFFFF"><tr><td> <A HREF="http://www.google.com/"><IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google"></A> </td> <td> <INPUT TYPE=text name=q size=31 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="Google Search"> <font size=-1> <input type=hidden name=domains value="YOUR DOMAIN NAME"><br><input type=radio name=sitesearch value=""> WWW <input type=radio name=sitesearch value="YOUR DOMAIN NAME" checked> YOUR DOMAIN NAME <br> </font> </td></tr></TABLE> </FORM> <!-- SiteSearch Google -->

And not only this isn’t a valid file, but it also uses tables for non-tabular data!

Now the better-looking (and valid) code:

<!-- SiteSearch Google --> <form method="get" action="http://www.google.com/search"> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> <a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_40wht.gif" width="128" height="53" alt="" title="Google Search" /></a><br /> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" name="btnG" value="Google Search" /> <input type="hidden" name="domains" value="YOUR DOMAIN NAME" /><br /> <input type="radio" name="sitesearch" value="" /> WWW <input type="radio" name="sitesearch" value="YOUR DOMAIN NAME" checked="checked" /> YOUR DOMAIN NAME </form> <!-- SiteSearch Google -->

Note that all tags and attribute names are in lower case, attribute values are quoted and all tags are properly closed.

When using this piece of code, all you have to do is change your site’s information and set the alignment you wish.

Note: this code makes the Google logo move to the top of the search field, instead of to the left like the default one, but that’s just a matter of taste and use of space. Considering that most sites place the search field on a smaller area of the layout, it makes perfect sense that the logo is placed on the top.

· Aug 08, 2005 ·