RLROUSE Directory & Informational Resources
Home     Add URL     Edit Listing     Infoblog     Picture of the Day     Privacy Policy     Advertise     About us     Write for us     Contact us     Sitemap
Tuesday, August 22, 2017

 

HTML Tips And Tricks


 
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&#64;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.
 
<base target="main">
 
              Back To Top


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)

                                        (Sample test box will not work)

<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 &nbsp; 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>&nbsp;</TD>
<TD>Your Text</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>Your Text</TD>
<TD>&nbsp;</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.

 

Name:
Email:
Comment:
 

 
<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>&nbsp;</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.

 
http://www.yourdomain.com?adone
 
                
Back To Top
 


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.

 

More Interesting Articles
 



 

 
Home     Add URL     Infoblog     Picture of the Day     Privacy Policy     Advertise     About us     Write for us     Report a broken link     Contact us     Sitemap
 
2003-2016 RLROUSE.COM, Abingdon, Va

RLROUSE.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program
designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.