Software Tips | Web Design Tips | HTML Tips
HTML Flavors -
Although there are official standards for HTML produced by the Internet Engineering Task Force
(IETF) and W3 consortium, most of the browsers support
additional "unofficial" extensions. There is a constant one-upmanship
between Netscape Navigator and Microsoft Internet Explorer over whose new
features will get adopted as the standard. Be careful about using such extensions
until the majority of browsers support them. A good comparison of the
features can be found in Stephen Le Hunte's
"HTMLib" (HTML Reference Library).
The HTMLib is in the form of a standard Windows
Help file, and includes descriptions and examples of how to use all of the HTML
tags. Netscape and Microsoft also have detailed information on the features
of their browsers at their websites.
Testing your code for syntax -
Some coding bugs are very difficult to spot. In addition, even a page which displays
correctly may contain some subtle errors. Start by making sure that you use closing tags where
required, such as <table> and </table>.
A good way to check out other types of errors is to
use an automated page syntax checker,
such as Doctor HTML
web page analyzer.
Test your style sheets -
Style sheets, supported by the newer browsers, give the programmer
very fine control over how the the web page will look, but only on
browsers that support style sheets. Also, not all style sheet features
are supported by all browsers. For example, if you are viewing this page
with Microsoft IE 4, the lines dividing the sections will be blue. If you
are using Netscape Communicator 4, they will be gray. Test your page on other browsers.
If you use absolute placement for graphics and other elements, at least
insert them in the order they will appear on the page. This will ensure
that they appear in the correct order on browsers that do not support
When using graphics, remember to use the "width" and "height" attributes
of the <img> tag, such as:
<img src="graphics/logo.gif" width="100" height="65">)
Besides helping to speed up loading of the page, image width and height
is required in most cases if you also include Java applets or
If you are using the width
and height attributes to scale the image to a smaller size, consider
using a graphics program to scale down the image instead. This will produce a
smaller graphics file, which will load faster. You can also reduce the
size of large graphics by reducing the number of colors. Why use a 24 bit
color image for a graphic that only has a few colors. Reducing to 16 colors (8 bit)
will significantly reduce the file size.
<img> and Tables -
Internet Explorer v2 has some difficulty using left justified floating images in
tables. For example, if you use:
<img src="graphics/logo.gif" width="100" height="65" align="left">
in a fixed width table cell (such as <td width=200>), none of the
cell widths in that table will display correctly. IE v3 handles this correctly, as does
Re-directing one page to another -
You can make your web page automatically transfer to a second page,
either immediately or after a specified delay by inserting special
meta tags. This is useful, for example, if you have changed the address
of a page and want to re-direct people who reach the old page to the new
one. The syntax is:
<META HTTP-EQUIV=REFRESH CONTENT="time-delay; URL=page-url">
where "time-delay" is the delay in seconds before the new page is loaded, and
"page-url" is the address of the new page. This tag goes in the document
header, between the <HEAD> and </HEAD> tags. For example,
<META HTTP-EQUIV=REFRESH CONTENT="10; URL=http://www.herne.com">
would take you to the page at www.herne.com after a delay of 10 seconds. The
"page-url" can be the same as the current page, or different. It can be on the
same server or on a different one.
Another use for this is to automatically update a page containing dynamic
information at given interval, as shown below.
Automatically updating a page -
Sometime you may want to update a page automatically at certain intervals. If it is
your own page, you can use the above trick to automatically re-fresh it.
How do you do it if it is not your own page, since you cannot change the original page?
The code fragment below uses the same technique within a simple frame document
that will automatically update the external page:
Manually editing your pages -
Many people use "drag and drop" type web page authoring tools. These
provide a great way to prototype a page quickly with a minimum of programming.
However, you can sometimes significantly improve the performance of the
page by manually editing it. Most of
the drag and drop authoring tools will place lots of comments in the
HTML file. These comments make the file larger and therefore taking
longer to load.
The HTML page is a text document and can be
edited with any standard ASCII editor, such as Windows Notepad. The comment
lines are marked with a <!-- at the beginning and a --> at the end.
They can span mutliple lines and will include everything between the
<!-- and --> tags. An example of comments would be:
<!-- Created using Windows Notepad and Paintbrush (fun, wow!)-->
<!-- contents copyright Herne Data Systems Ltd. -->
Use common sense in your editing, though. If
it looks important and you do not know what it does, leave it.
In particular, watch out for <SCRIPT> tags. They will contain
NOTE: if you do not feel comfortable editing the file, don't!