![]()
|
* But in some cases completely useless! Advanced HTML Guide
|
JavaScript page buttonsA lot of people like having push buttons to take you to a page instead of the normal text links. You can see how it is done below. <FORM> <INPUT TYPE="BUTTON" VALUE="Home Page" ONCLICK="window.location.href='/'"> <INPUT TYPE="BUTTON" VALUE="HTML Books" ONCLICK="window.location.href='/htmlbooks.htm'"> <INPUT TYPE="BUTTON" VALUE="JavaScript" ONCLICK="window.location.href='/javascript.htm'"> </FORM>Compatibility: Browsers that do not support it will replace the buttons with text input boxes which looks a bit stupid on the page. |
Back navigation buttonThis button takes you back to the last link that you clicked on even if that link was on the same page so if to get to this point you clicked on one of the menu items at the top it will take you back to their. If you click it again it will take you back another link. <FORM> <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1)"> </FORM>Compatibility: Browsers that do not support it will replace the buttons with text input boxes which looks a bit stupid on the page. It should be noted that it also works better on pages that do not have a menu like at the top of my page as going back in history one link does not necessarily mean going to the previous page. On this page it may just take you back to the last menu item that you clicked on. |
And Now For Something Completely Useless<FORM> <INPUT TYPE="button" VALUE="yellow" ONCLICK="document.fgColor='yellow'"> <INPUT TYPE="button" VALUE="red" ONCLICK="document.fgColor='red'"> <INPUT TYPE="button" VALUE="blue" ONCLICK="document.fgColor='blue'"> <INPUT TYPE="button" VALUE="black" ONCLICK="document.fgColor='black'"> </FORM> You can also change the background colour of the page in the same way as above by changing the document.fgColor to document.bgColor Compatibility: Browsers that do not support JS will replace the buttons with text input boxes which looks a bit stupid on the page. |
Pull Down Menu Page SelectorGo to my JavaScript Menu Page to see how to make a Pull Down Menu using JavaScript. |
Status Bar MessagesPut your mouse over both the below links, don't click them just look at the status bar at the bottom of the window. The one on the right just displays the normal address but the one on the left displays 'Go Back To My Home Page'. It is done by <A HREF="/index.html" ONMOUSEOVER="window.status= 'Back To My home Page' ; return true;">Home Page</A> You'll notice that the words in the status bar remain when you move the cursor away from the link. If you want the status bar message to go try making the following alteration. <A HREF="/index.html" ONMOUSEOVER="window.status= 'Back To My home Page' ; return true;" ONMOUSEOUT="status=('') ; return true">Home Page </A> This alteration is demonstrated in the below link. It's very easy but adds that professional touch to your links. |
Status Bar Messages Part 2This is a slight variant on the above idea. You can make the status bar display a message of your choice which stays on the page permanently, except for when another link is highlighted. <SCRIPT LANGUAGE="JavaScript"> window.defaultStatus="My Status Bar Message" </SCRIPT>Just put the above code between the <head></head> tags in the page with your own message.
Compatibility: Works in JavaScript enabled browsers, browsers that do not support it simply ignore the code. |
When indexed by search engines such as Alta-Vista instead of showing the first 20 or so words of your page which are often fairly meaningless you can tell set the description for your site by
using the tag below. You must place all <meta>
tags between <head>
& </head>
at the top of the page. You should include this description
<meta>
tag on every
page. You can include any number of different <meta>
tags on each page.
<meta name="description" content="Demonstrations Of Advanced HTML">
The keywords
Meta tag allows you to specify a load of words which are related to your page, for instance for this page I might have. When someone enters these words into a
suitable search engine your page will have more chance of getting displayed.
<meta name="keywords" content="HTML,Advanced, Search,Floating Frames">
The robots tag has 4 main content
values that you can use, these are index
, follow
, noindex
and nofollow
. If you put noindex
in the tag then any well behaved robots won't indexe your page, if the robot sees follow
it will follow the links on that page. You can have two of the values in the robot tag but you can't have opposite values, for example the combination index,noindex
is not allowed.
index,follow
is the default behaviour for all search engines so there is no need to put an index,follow
tag in any of your pages. The uses of these tags are 1) if you want your page to be indexed but you don't want any of the links to be followed, or 2) if you don't want your page to be indexed but do want the links to be followed or 3) if you don't want your page indexed and you don't want the links followed e.g.
<meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,follow"> <meta name="robots" content="noindex,nofollow">
Most search engines allow you to precisely control how and what parts of your site are indexed by placing a "robots.txt" file on your site. See The Web Robots Pages for more details.
On some web sites you may have noticed that after about a few seconds it automatically redirects you to another page. This redirect effect can be easily achieved by putting the following between the <head></head>
tags.
<meta http-equiv="refresh" content="2;URL=advancedhtml.htm">
The content
attribute is the number of seconds that the browser waits before refreshing the page. The url
attribute is the full URL of the page which you want to load.
Compatibility: Some very old browsers do not support the
refreshing capabilities of meta http-equiv
tag so be sure to include a normal link to the next page or some people will not be able to enter the next page.
The robots
tags are used by search engines and other robots and so do not require any specific browser.
The <marquee>
tag is a pretty useless tag and like the dreaded <blink>
tag. It could get very annoying if overused (or even used at all). You can use it to scroll messages across the screen.
<marquee>This text will scroll from right to left slowly</marquee> |
<marquee behavior="alternate" scrollamount="50" scrolldelay="8">This text will go Alternate from Left to Right</marquee> |
<marquee behavior="slide">This text will scroll in and "stick."</marquee> |
<marquee scrolldelay="5" scrollamount="50"> This is a very fast scrolling text.</marquee> |
<marquee><img src="uparrow.gif" alt="up" align="middle" width="21" height="19">You can even add images to marquees!</marquee> |
Compatibility: IE3+ and FireFox. Browsers that do not support it will just display the text but it will not scroll.
If you want to force a break so the next line of text starts after a picture use
<br clear="all">
...Then the next thing you write will appear after the picture instead of next to it.
Spaces - If you want to add more than one space between words then you may have found that just putting a load of blank spaces in the document has no effect on the viewed HTML page. This
is because browsers are programmed to ignore multiple spaces. Instead of trying to put multiple spaces between the two words using the space bar put lots of
values between them. e.g.
Big Space!
If you want to know some more general HTML Stuff look at my HTML Frequently Asked Questions page.
The | ||
|
||
Site |