 Previous Page |
|
4/14/17 |
Return to Home pageA Few HTML tricks I use in this web
site
Redirecting to a different web page after pausing to give a message that the page has moved.
I used this when I wanted a reference to http://frisinger.net/island/index.html to http://frisinger.net/island/island.html.
Click on the first link to see how it works.
This is what the page looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--This is a redirect to move people from index.html to island.html in 5
seconds-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="refresh" content="5; url=island.html"/> <!--This is the key
line to wait 5 seconds then redirect-->
<title>This page has moved</title>
</head>
<body>
<h4>This page has been moved to <a href="island.html">http://www.frisinger.net/island.html/</a>,
please update your links and/or bookmarks.</h4>
<h4>You will be automatically redirected in five (5) seconds, or <a href="politics.html">click
here</a>.</h4>
<p> </p>
<p> </p>
<p>10/21/15</p>
</body>
</html>
Redirecting a search from a smart phone (small screen) to a different web page that is optimized for small screens.
The basic idea is to put a lot of stuff on the initial page, http://frisinger.net/m-w-dave/index.html in this case, to draw the search engine omitting must of that on the pages that this redirects to and to list the redirected locations in a file called robots.txt in the home folder so the search engines will not index them. I added a link in the small screen page, http://frisinger.net/m-w-dave/small_screens.html in this case, to permit the user to go to the full site if they wished.
I originally had index.html as main main home and had the redirect code there. That works if the person never wishes to see the full site from the small screen but does not permit access to the full screen page from a small screen because you inherently get redirected again.
The downside of this method is that it requires you to rename your home page and of course, all the links to that page. On a small web site this is no problem but on a big site is.
There is a more elegant way to work this issue but it requires placing cookies on the users computer so was beyond my capability. Click HERE to see how.
Note: To get iPhone to download a revised
page rather than just reloading the one in memory you have to completely turn
off the iPhone then back on. This slows debugging.
Here is the HTML file, http://frisinger.net/m-w-dave/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<!-- See the Keywords, Title, and Description are fully used here but are
omitted in the sites this page redirects to. -->
<meta name="keywords" content="King County Metro, Sound Transit, Bus, Metro with
Dave, Issaquah" />
<meta name="verify-v1" content="Eag2gCv+C7xJwC5/cJbKc+bERlYq2gDG9nfTWsnPz4c=" />
<title>Metro With Dave, Monthly Bus adventure trips form Issaquah</title>
<meta name="description" content="Home page for King County Metro Bus Trips with
Dave Waggoner, departing Issaquah" />
<!-- Java script to redirect if a smart phone is looking at this web site.
Will not work if the device does not support java. -->
<script type="text/javascript">
<!-- Small/Large Screen redirect. -->
if (screen.width <= 800) {
window.location = "http://frisinger.net/m-w-dave/small_screens.html";
} else { window.location = "http://frisinger.net/m-w-dave/metrowdave.html";}
</script>
<!-- End Java script -->
</head>
<p>Metro With Dave
</p>
<p>10/23/15</p>
</body>
</html>
The robots.txt file looks like this:
<!--robots.txt file tells search engines to
ignore certain files -->
<!-- just 'Disallow:' would say you can search anywhere, apparently it is a good
idea to say that if that is your wish -->
User-agent: * <!--'*' Means this applies to all search engines -->
Disallow: /metrowdave/ <!—Means ignore any file that starts with ‘metrowdave’
-->
Disallow: /small_screens/
Adding a jump to another spot on a page:
<a name="error-checking">
Is the landing spot to jump to
<a href="#error-checking">clean slate.</a>
This jumps to another spot
on the same page where "clean slate." is the words in blue that you click on to
jump and "error-checking" is the label for the spot to jump to.
This jumps to another page at a particular spot, where http://frisinger.net/computer_maintenance/routine-maintenance.html us the page and
error-checking is at the spot where you want to land.
If the page you are linking to is in the same folder on the web than you can shorten that to:
<a href="routine-maintenance.html#error-checking">
The rules are the same as linking to pictures.
Background information:
Adding a jump to a particular spot on another
page:
http://www.htmlgoodies.com/legacy/tutorials/getting_started/jump2.htm
Jump on same page:
http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511