This guide lists some great HTML tips and tricks that you can use to enhance your website and your visitors' stay on your site.
|
Protect
Your Email Address From Spam Robots
Contact
Us
If
you'd like to display your email
address within your web pages, but
are afraid it will be harvested by
Spam robots, you can protect
yourself.
Instead of displaying
the usual:
mailto:you@yourdomain.com
use the following code within your
HTML:
|
| <A
HREF="mailto:you@yourdomain.com">Contact
Us</A> |
|
When
clicked on, it will display your email address
correctly.
Back
To Top
|
Open a web
page in a new window
To
open a link within a new window, place
TARGET="_blank" within your link
code.
| <A
HREF="http://www.yourdomain.com/"
TARGET="_blank">Your
Link</a> |
|
Open
all links in a new window
To open all
links within a page in a new window, place the
following code between your <HEAD> and
</HEAD> tags.
Redirect
Visitors To Another Page
| <meta
HTTP-EQUIV="REFRESH"
content="0; url=http://www.yourdomain.com/index.html"> |
| This
META tag redirect code will redirect your
visitors to another web page instantly.
The content="0; may be changed to the
number of seconds you want the browser to
wait before redirecting. This code comes
in handy if you change your web address
and need to redirect your visitors to the
new page. |
Back
To Top
|
Colored Text Boxes
(Internet Explorer)
| <INPUT type="text" STYLE="color: #FFFFFF;
font-family: Verdana; font-weight: bold; font-size: 12px;
background-color: #72A4D2;" size="10"
maxlength="30"> |
Back
To Top
|
Colored
Line Dividers
(Internet
Explorer)
The
<HR> tag is used to devide content
on a web page. You can change its
appearance by adding attributes.
The examples below show various styles of
the <HR> tag. They are displayed in
a table and the width attributes span the
set percentage of the table. When used
without a table, the width will span the
set percentage of the entire web page. |
<HR>
<HR WIDTH="50%"
SIZE="3">
<HR
WIDTH="50%" SIZE="3"
NOSHADE>
<HR
WIDTH="75%" COLOR="#FF0000"
SIZE="4">
<HR
WIDTH="25%" COLOR="#6699FF"
SIZE="6"> |
Back
To Top
|
Adding
Color To Your Table Background
| The
table below contains 2 columns and 1 row.
The left column has the background color
set to #72A4D2 . The right column has the
background color set to #EAE8E8. |
| |
<TABLE
BORDER="0" CELLPADDING="4"
ALIGN="Center"
WIDTH="50%">
<TR>
<TD BGCOLOR="#72A4D2"
WIDTH="10%"></TD>
<TD BGCOLOR="#EAE8E8"></TD>
</TR>
</TABLE> |
|
Back
To Top
|
Adding
Color To Your Table Borders
(Internet
Explorer)
| In
this example, the table background color
is set to #EAE8E8. The border color is set
to #C6C6C6. |
<TABLE
BORDER="2" BORDERCOLOR="#C6C6C6"
CELLPADDING="4"
ALIGN="Center"
WIDTH="50%">
<TR>
<TD BGCOLOR="#EAE8E8">Your
Text</TD>
</TR>
</TABLE> |
Back
To Top
Using
Style Tags For Mouseover Link Effects
(Internet
Explorer)
In
this example, the active text link is
underlined with the color set to #0000FF.
When the mouse is placed over the link,
the text color will change to #FF0000 and
the underline disappears.
Place the <STYLE> tag between your
<HEAD> and </HEAD> tags. |
Example
Link
<STYLE>
<!--
A:active { color:#0000FF; text-decoration;
}
A:hover { color:#FF0000; text-decoration:
none; }
//-->
</STYLE> |
Back
To Top
|
|
Creating
A Placeholder For An Empty Table Cell
| Without
using a placeholder within your
blank table cells, your table will
look like this |
| Your
Text |
|
Your
Text |
| |
Your
Text |
|
| By
simply adding the
character code within your HTML,
your table cell will be visible |
|
| Your
Text |
|
Your
Text |
| |
Your
Text |
|
<TABLE
BORDER CELLPADDING="4">
<TR>
<TD>Your Text</TD>
<TD> </TD>
<TD>Your Text</TD>
</TR>
<TR>
<TD> </TD>
<TD>Your Text</TD>
<TD> </TD>
</TR>
</TABLE> |
Back
To Top
|
Creating
an Email Form
| You
can create a simple form to enable your
visitors to send you comments. Copy and
paste the code below into the HTML of your
page. Change the code highlighted in red
to your email address. |
<FORM
action="mailto:you@yourdomain.com"
method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="4"
WIDTH="90%">
<TR>
<TD width="30%"><DIV
align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text"
name="name"
size="20">
</TD>
</TR>
<TR>
<TD><DIV
align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text"
name="email"
size="20">
</TD>
</TR>
<TR>
<TD><DIV
align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA
name="comment"
cols="30"
wrap="virtual"
rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit"
name="submit"
value="Submit">
<INPUT type="reset"
name="reset"
value="Reset">
</TD></TR>
</TABLE>
</FORM> |
Back
To Top
|
Removing
A Link Underline
| You
can remove the underline of an individual
link by adding the STYLE tag to your link
HTML. |
Example
Link
| <A
HREF="http://www.yourdomain.com"
STYLE="TEXT-DECORATION:
NONE">Your Link</A> |
Back
To Top
|
Changing
Link Colors
| You
can change the color of an individual link
by adding a font tag in front of your
linked text. |
Example
Link
| <A
HREF="http://www.yourdomain.com"><FONT
COLOR="#FF0000">Your
Link</FONT></A> |
Back
To Top
|
Linking
To A Specific Location In A Web Page
| You
can create a link within the same page by
adding the following codes. The link below
is linked to the word Anyname in
the box below this one. |
Example Link
Step
#1
Select
the area of text that you want the link to
take you to when clicked on and place this
code with any name you'd like. This will
create an anchor for your link.
<A NAME="Anyname">Anyname</A> |
Step
#2
Create
your link and make sure you use the same
name as you used in your anchor:
<A HREF="#Anyname">Click
Here</A> |
Back
To Top
|
Expanding
Web Page Full Screen
(Internet
Explorer)
| You
can remove the top, bottom and side page
margins on a web page by adding the
following code within your <body>
tag. |
| <body
bgcolor="#ffffff" topmargin=0
bottommargin=0 leftmargin=0 rightmargin=0> |
Back
To Top
|
Mouseover
Text Description
(Internet
Explorer)
| You
can create a mouseover text description,
similar to an image alt tag, that will be
viewed when the mouse is placed over your
text. Place title="your text
description" within your HTML link
code. |
Example
| <A
HREF="http://www.yourdomain.com/"
title="your text
description"> |
Back
To Top
|
Status
Bar Link Description
| You
can display a description in the status
bar for all of your links. When the mouse
is placed over a link, the link
description will be viewed in the status
bar. |
Example
| <A
HREF="http://www.yourdomain.com"
onMouseOver="window.status='Your text
description'; return true" onMouseOut="window.status='';return
true">Your linked text</a> |
Back
To Top
|
Auto
Fill Email Subject
| You
can create an email link that will
automatically fill in the subject line
when clicked on. Add the following code to
your HTML. |
Example
| <A
HREF="mailto:you@yourdomain.com?subject=Your_Subject"> |
Back
To Top
|
Highlighting
Free For All Links
| You
can use the code below to highlight your
link in some free for all sites. This code
will not work on all free for all
sites, but if you scroll down the page and
see some links already highlighted, you'll
know it works. Instead of typing in your
web address, place the code below, with
your web address, into the free for all
form. |
You can
change the colors to whatever you'd like.
| http://www.yourdomain.com/"
STYLE="background:yellow; color:black |
Back
To Top
|
Ad
Tracking With A Link
| You
can use the code below to track your
classified ads, but you must have access
to your logs to view your results. When
you place your ads, instead of using your
regular web address, use something similar
to the code below. Change the name after
the question mark for each ad you place.
When you view your logs, you will be able
to see exactly which ads are effective. |
Preventing
Browser Cache
When
visiting a web site, your browser will
cache or make a copy of the web site for
faster viewing your next visit. This will
prevent visitors from seeing new content
unless they manually reload their browser.
To prevent this problem, add the following
code between your <HEAD> and
</HEAD> tags. |
| <META
http-equiv="Pragma"
content="no-cache"> |
Back
To Top
|
Preventing
Search Engine Indexing
| To
prevent a Search Engine from indexing a
page, place the code below between the
<HEAD> and </HEAD> tags. |
<META
NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
This tag tells the robots not to index
this page and not to follow any links
within the page.
<META NAME="ROBOTS"
CONTENT="NOINDEX,FOLLOW">
This tag tells the robots not to index
this page, but follow any links within the
page. |
For the best in webmaster resources, be sure to check
out WebmasterGoods.com, the webmaster auctions marketplace! Dedicated to the buying and selling of
goods related to webmasters only.
|