Advanced HTML

Advanced HTML
Tables
Frames
Passwords
HTML Colours
Animated Buttons
Buying Webspace
Search Engines
Making Money
.htaccess Files
PHP Tips
JavaScript
Java Menu
favicon.ico
HTML Converter
HTML Books
Basic Tags
FAQ
Contact Us

Advanced

HTML^*

Style sheets Floating Frames Normal Frames- Big Section Marquees	JavaScript HTML extensions Meta Tags Little Tips Suggested Reading
Tables Guide - Explains the various Table tags. HTML Colour Table - The 216 colours that are not dithered. Some FAQ's

* But in some cases completely useless!

Style sheets

Style sheets can be used to control the whole layout of the HTML page. One of the nice little touches that a lot of people do is getting rid of the underlining of links. eg

This link has no underlines (in Style Sheet supporting browsers).

This can be done in two ways. You can put a style markup in each tag e.g.

<A HREF="index.html" STYLE="text-decoration: none">This link
    has no underlines</A>

or if there are many links on the page you can specify a style for the page in the <HEAD></HEAD> element of the page. The following will get rid of all the underlining on the whole page.

<STYLE TYPE="text/css">
<!--
  A { text-decoration: none;  }
  A:visited, A:hover, A:active { text-decoration: none; }
// -->
</STYLE>

Compatibility: Works in IE3+ & Netscape 4+ and FireFox.

Floating Frames

An interesting feature in Internet Explore 3+ and FireFox is that you can position a frame anywhere and of any size on the screen just like a picture.

<IFRAME NAME="content_frame" width="400" height="244"
    SRC="fframe.htm">This site uses floating frames
</IFRAME>

Compatibility:The <IFRAME> tag is ignored by browsers that do not support it. You can place a message between the <IFRAME></IFAME> tags that these browsers will show instead.

Marquees

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>

This text will scroll from right to left slowly

<MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="50"
    SCROLLDELAY="8">This Marquee will go Alternate
    from Left to Right</MARQUEE>

This Marquee will go Alternate from Left to Right

<MARQUEE BEHAVIOR="SLIDE">This marquee will scroll in
    and "stick."</MARQUEE>

This marquee will scroll in and "stick."

<MARQUEE SCROLLDELAY="5" SCROLLAMOUNT="50">
   This is a very fast marquee.</MARQUEE>

This is a very fast marquee.

Compatibility: IE3+ and FireFox. Browsers that do not support it will just display the text but it will not scroll.

JavaScript HTML extensions

I am not going to try to cover the JavaScript language. What I will show you is some JavaScript extensions to the normal HTML tags.

Status Bar Messages: Put your mouse over both the below links, don't click them just look at the status bar at the bottom of the window.

Home Page | Home Page

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.

Home Page

It's very easy but adds that professional touch to your links.
Compatibility: Works in JavaScript enabled browsers, browsers that do not support it simply ignore the message.

Status Bar Messages Part 2: This 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> and </HEAD> in the page with your own message.

Compatibility: Works in JavaScript enabled browsers, browsers that do not support it simply ignore the code.

Page Buttons: A 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='/index.html'">
  <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.

A Back Button:

This 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 Click These buttons to change the Text Colour

<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 Selector:

Go to my Java Menu Page to see how to make a Pull Down Menu using JavaScript.

Meta Tags

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" words that you can use, these are "index, follow, noindex & nofollow". If you put "index" the robot indexes your page, if it sees "follow" it will follow the links on that page. The "noindex" and "nofollow" do the opposite. You can have two of these in the tag but you can't have opposite ones, for example "index,noindex" is not allowed.

<META NAME="robots" CONTENT="index,follow">

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 is the number of seconds that the browser waits before refreshing the page and the URL is the page loaded.
Compatibility: Many earlier browsers do not support the refreshing capabilities of this tag so be sure to include a normal link to the next page as well or some people will not be able to enter the next page.

Little Tips

Bee 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   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

Advanced

HTML

Site