Skip to: content | sidebar

Improve your webpages - Add cool features!

On this page you will find tips for improving your webpages by adding features such as Google search, slideshows, videos etc. I will keep adding to this list and as always everything has been kept very simple.

Use SSI instead of frames for keeping parts of different pages similar

For details on this topic please visit http://www.ironspider.ca/frames/ssi.htm

People generally create a site menu which they want to duplicate on every page of the website. This can be easily accomplished using plain HTML but when you make even a slight change in the menu, you will have to manually edit all the pages which contains this menu. Very often, developers use frames for this purpose where the content of the menu is saved in a separate file and it is linked to all the webpages. Any change in this frame file is depicted in all the pages.

The use of frames however, now-a-days is considered non-standard as it is not user-friendly. By throwing web page frames into the website you may be further thwarting the user's ability to quickly establish a reliable set of expectations about how your website is supposed to work.

SSI or Server Side Includes can be used to automatically insert snippets of HTML code on all your web pages. This is useful for any section of your web page that tends to get repeated across many other pages. As well as a header or a footer, SSI is often used to insert a site menu which needs to be frequently updated every time a new page is added to the site.

Here's a crash course on using SSI to create a site menu on all your web pages: Copy-and-paste all the HTML code required to create your site menu into a separate document. This document will contain just the code required to create the site menu and nothing else, e.g. the essential web page structure is not required.

Save this document as a file called menu.inc
In any web page in which you wish to display your site menu, replace the code that you copy-and-pasted in step 1 with this:

<!--#include virtual="menu.inc"-->

You can use this same code in as many web pages as you like. For demonstrational purposes, let's say you inserted this code into your site's home page which is called index.htm Rename index.htm to index.shtml (SSI typically only works on files carrying the .shtml extension)

Ensure that your web host supports SSI (EHome supports SSI). Upload menu.inc and index.shtml to the same directory. Load your home page (index.shtml) in your web browser to see your site menu automatically inserted. Note that when you will run this index file from your computer it will not display the site menu but it should work once it is uploaded on the server.

Now whenever you want to modify the site menu for any and all web pages that have the includes code (step 3) and the .shtml extension, all you have to do is edit the menu.inc file and then upload it to your web space.

Putting Google Search Box on your website

The basic technique involved here is to be able to manipulate one of the variables handed to the Google search engine, a variable called sitesearch. Set it to a null value and you're searching the entire World Wide Web, but set it to a specific domain and it's constrained exactly as if you had typed in the Google special notation site:domain.

In addition to that, you need an input field and a submit button. Put them all together and here's the minimalist Google search form that lets the user alternate between just your site (well, in this case just my site) or the entire Web:

<form method="get" action="http://www.google.com/search"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> <input type="radio" name="sitesearch" value="" /> The Web <input type="radio" name="sitesearch" value="myehome.in" checked /> MyEHome.in<br /> </form>

If you'd like to use this on your own site, simply change the occurrences of myehome.in as appropriate.

Not too hard at all!

For more on this topic please visitAsk Dave Taylor

Putting slideshows on your websites

This topic has been explained very well on dynamic drive with examples

Playing audio on webpages

You can use the code given below to add two buttons on your webpage for playing and stopping a music file.

<object id="Player2" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="0" height="0"> <param name="URL" value="Never Be Hungry.wav"/> <param name="autoStart" value="false"/> </object> <input type="button" value="Start" onclick="Player2.controls.play()"/> <input type="button" value="Stop" onclick="Player2.controls.stop()"/>

For more options visit http://www.maconstateit.net/Tutorials/XHTML/XHTML09/xhtml09-02.htm