You've written a web site full of information and articles. You've created a good navigation scheme. What about taking it to the next level? How can people search your web site?
It would be expensive and difficult to implement a search engine within your web site. It would require a fancier web hosting arrangement to run the server software, plus the expense of purchasing that server software. But not all is lost. Google (the current king of web searching sites) offers you free use their search engine on your web site. Using a specially configured input form, you tap the full power of Google's search engine to provide results only from your web site. Want to try it out? Try the search box on the right hand side of this page.
Here's Google's page on this service: http://news.google.com/searchcode.html
To use uhe service simply requires that you copy/paste and customize the given HTML code which enables the search service. Instructions are given on the page, but in case they don't make sense let's go over them carefully.
Copy/paste HTML: The instructions ask you to copy and paste the HTML into your web page. What does that mean, and how do you do it? First remember that web pages are constructed from HTML encoding (HTML and other details). Anything you do on your web page ends up as HTML somewhere under the covers. To add this service to your web pages, you'll have to dive momentarily under the covers.
<!-- SiteSearch Google --> <FORM method=GET acton="http://www.google.com/search"> <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 -->
This is what the HTML to use looks like. Your web editor software will probably offer you a way to edit the underlying HTML directly. For example, in GoLive there is a series of buttons labeled layout, source and preview, and clicking the source button you are editing the HTML encoding. All you do is switch to the HTML editing mode, find the right place to insert the above HTML code, and paste it in.
To "find the right place to insert the above HTML code" it should help if, before you switch to the HTML editing mode, you select some text near the location where you want the search form. With the WYSIWYG editors I'm familiar with, this causes the HTML editing mode to be positioned at the right place. Once in the HTML editing mode you should be able to puzzle out the tags, as it's not terribly difficult, to determine the perfect location. Feel free to experiment, switching between WYSIWYG mode and HTML mode. You won't hurt anything, and you'll learn quite a bit.
Just pasting the HTML code is not enough, so read on.
Web forms: Notice that the HTML code has a <FORM> tag around it. This tag causes the web browser to be able to take input (using <INPUT> tags) and send it as a request to a web server. There's a lot that can be said about this, a lot that can be done with it, but it would be too big a distraction to go very far in that discussion. The important part to notice is the part of the tag reading action="http://www.google.com/search".
The action= parameter is what causes the request to be serviced by Googles search engine.
Customization: You absolutely do not want to use this HTML unmodified. Let's go over the customization steps.
The one change you must make is to ensure it searches your web site. There are three places where "YOUR DOMAIN HERE" appears, and in each you must replace that string with the web address (URL) for your web site. If you do not do this, the search facility will not search your web site.
The layout of their HTML code is very wide. This might not fit with the overal design scheme of your pages, as I found on my site. If you read through the HTML coding, you see they use a TABLE with two columns. One column presents the Google logo, the other is the FORM elements. One way to make it narrower is to make the table have two rows, the first for the logo, the second for the form elements. And while you're at it, you can make the text input box smaller by changing size=31 to some other value, say size=20.
This is what it would look like
The color scheme, with a white background, might not be to your liking. If you simply remove this parameter, bgcolor="#FFFFFF", the search form will inherit the color scheme of your web site.
This is what it would look like
For my purpose I was even more drastic in my customization, and simply removed the table and use of the Google logo. The result is here:
<FORM method=GET action="http://www.google.com/search"> <INPUT TYPE=text name=q size=20 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="Google Search"> <font size=-1> <input type=hidden name=domains value="www.example.com"><br/> <input type=radio name=sitesearch value=""> WWW <br/> <input type=radio name=sitesearch value="www.example.com" checked> www.example.com <br/> </font> </FORM>
</body></html>