12 Useful HTML and Javascript Tricks (Part 1)

(From the tutorial, Web Design Tips & Tricks For Beginners)

Here's a list of commonly-used, practical "tips and tricks". In each example, you will need to replace the text in red with your own URL, file, text, etc. Be sure to test each of these first before using them.

1. How to Make a Clickable, Borderless Image

You can make anything a clickable link by simply using the <A HREF="http://www.your_url.com"> tag. A border will be placed around the object to highlight the fact that it's clickable.

But you don't always want a border displayed around your image - for example, most people don't want a border placed around their logo. To remove the border, add the BORDER parameter to the above tag. The HTML would look like:

<A HREF="http://www.your_url.com"><IMG SRC="http://www.your_url.com/image.gif" BORDER="0"></A>

2. How to Create "Newspaper Columns"

You can create columns of text by using HTML tables. Here's an example; I've added a border so that you can easily see the boundaries of each column. The HTML for the columns appears below.

This is column 1. This is column 2.

<TABLE WIDTH="100%" BORDER="1" CELLPADDING="10" CELLSPACING="0">
  <TR>
    <TD WIDTH="50%">
      This is column 1.
    </TD><TD WIDTH="50%">
      This is column 2.
    </TD>
  </TR>
</TABLE>

3. How to Open a Link in a New Window

There are actually many ways of doing this, but one simple way is to use the TARGET parameter in your A HREF tag. For example, to open up a new browser window when your visitor clicks on a link, your HTML would look like:

<A HREF="http://www.destination_url.com" TARGET="_NEW">

This allows your visitor to look at another site without actually "leaving" yours. Use this tip sparingly; you don't want to pop up a new window every single time someone clicks on a link - it can become both annoying and confusing.

PREVIOUS: Web Design Tips
NEXT: 12 Useful HTML and Javascript Tricks (Part 2)

Please contact us to request reprint permission.