Beginner HTML Redirect Tutorial
Sometimes in the fast paced internet world your forced to relocate a website, change it’s name or rearrange a directory structure. Suddenly though your faced with a horrable problem. All those websites, directories, and search engines linking to your pages will find nothing but the dreaded 404 page, or even worse the page of a competator. Well, there’s a simple measure that you can use to prevent just these issues. HTML redirects.
HTML redirects do exactly what the name implies. It’s a simple HTML page that once loaded, sends the user to a designated page after a certain period of time. Lets start with a basic HTML page for our example.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html>
<head>
<title>HTML Redirect Tutorial</title>
</head>
<body bgcolor=”#FFFFFF” text=”#000000″ link=”#0000FF” vlink=”#0000FF” alink=”#0000FF”>
</body>
</html>
This is your basic blank HTML 4.01 template with black text, white background, and blue links with the title “HTML Redirect Tutorial”. We want this page to be as simple as possible so that it loads quickly and accurately. So this bit of code is a great start. Now we need to add our redirect code. After the title tags, insert this line of code:
<meta http-equiv=”Refresh” content=”5; URL=http://www.whitesandsdigital.com”>
What this tells the browser to do is a refresh on the content in 5 seconds for the page http://www.whitesandsdigital.com. This is the heart of our redirect, and does all the work for us. When a visiter comes to this page he/she will wait for 5 seconds after the page loads, then be transfered to the White Sands website. You can change the amount of time to anything you want, but I wouldn’t reccomend anything more then 5 seconds.
Now we have a problem though. What if the visiter is using a browser that doesn’t support these kinds or redirects? The simple answer is that we’ll have to provide a simple html link for them. Lets put in a nice little formatted message in a table within the body tags.
<table align=”center” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td width=”100%” align=”center”>
<font face=”Arial,Helvetica,sans-serif”>
<p>Welcome to White Sands Digital.”</p>
<a href=”http://www.whitesandsdigital.com/wordpress/index.php” mce_href=”http://www.whitesandsdigital.com/wordpress/index.php”>Click here if the page doesn’t load in 5 Seconds</a>
<br>
</font>
</td>
</tr>
</table>
Thats it. Now we have a mesage and text link in the middle of a standard redirect page for a website. Of course you can style this any way you like with an image or even flash or even Javascripts. It’s best thought to remember to keep the page as small as possible. Here’s the complete code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html>
<head>
<title>HTML Redirect Tutorial</title>
<meta http-equiv=”Refresh” content=”5; URL=http://www.whitesandsdigital.com”>
</head>
<body bgcolor=”#FFFFFF” text=”#000000″ link=”#0000FF” vlink=”#0000FF” alink=”#0000FF”>
<table align=”center” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td width=”100%” align=”center”>
<font face=”Arial,Helvetica,sans-serif”>
<p>Welcome to White Sands Digital.”</p>
<a href=”http://www.whitesandsdigital.com/wordpress/index.php” mce_href=”http://www.whitesandsdigital.com/wordpress/index.php”>Click here if the page doesn’t load in 5 Seconds</a>
<br>
</font>
</td>
</tr>
</table>
</body>
</html>
I hope you’ve enjoyed my little redirect tutorial, and it brings some use to you in the future.
One Response to “Beginner HTML Redirect Tutorial”
Leave a Reply
June 28th, 2008 at 8:16 pm
thank you for this tutorial.