Advanced HTML Guide

★ wanayoo — archive 1999 http://www.markradcliffe.co.uk/html/advancedhtml.htm

Advanced

HTML

Style sheets (IE4 & N4) Floating Frames (IE3+ Only) Normal Frames- Big Section Multi column Text (Netscape 3+) Marquees (IE3+ Only)	JavaScript HTML extensions Website Searches (All browsers) Meta Tags Little Tips
Tables Guide - Explains the various Table tags. Animated Navigation Buttons - How to make them using Java Script HTML Colour Table - The 216 colours that are not dithered. Buying Web Space & Domain Names - New Some FAQ's

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 link is underlined

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

<A HREF=/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fhtml%2F%26quot%3Bindex.html%26quot%3B&y=1999 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>

Compatability: Works in IE3 & Netscape 4 (N4). Many other perfectly legal style sheet commands do not however work in Netscape as it does not yet implement the proper Style Sheet standard.

Floating Frames

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

<IFRAME NAME="content_frame" width="400" height="244"
    SRC=/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fhtml%2F%26quot%3Bfframe.htm%26quot%3B%26gt%3BThis&y=1999 site uses floating frames
</IFRAME>

Compatability: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.

For Information on normal Frames look at my Frames Guide

This is a feature of Netscape 3 that allows you to easily split your text up into newspaper style columns. You can specify how many columns you want the text split into. Simply surround the text in something like.

The COLS is the number of columns and the GUTTER is the space between columns.

Compatability: Netscape 3+ only. Browsers that do not support it will just display the text normally but will not put it into columns.

Marquees

A pretty useless tag and like the dredded <BLINK> tag it could get very annoying if overused. 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.

Compatability: IE3+ only. 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=/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fhtml%2F%26quot%3B..%2Findex.htm%26quot&y=1999 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=/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fhtml%2F%26quot%3B..%2Findex.htm%26quot&y=1999 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 piss easy but adds that proffesional touch to your links.
Compatability: Works in JavaScript enabled browsers, browsers that do not support it simply ignore the message.

Status Bar Messages Part 2: This is a slight varient 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.

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

Page Buttons: A lot of people like having propper 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='/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fneiljohan%2Findex.htm&y=1999'">
  <INPUT TYPE="BUTTON" VALUE="Scrawn And Lard" 
  ONCLICK="window.location.href='/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Findex.htm&y=1999'">
  <INPUT TYPE="BUTTON" VALUE="Guitar Page" 
  ONCLICK="window.location.href='/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fguitar%2Findex.htm&y=1999'">
</FORM>

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

Compatability: 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 (Internet Explorer 3+ Only)

<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 IE3+ and Netscape 3 in the same way as above by changing the document.fgColor to document.bgColor

Compatability: Browsers that do not support JS will replace the buttons with text input boxes which looks a bit stupid on the page. Netscape 3 will only let you change the BackGround colour, it will not let you change the ForeGround Colour.

Pull Down Menu Page Selector:

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

Website Searches

It's very easy to set up a searcher for your website by customising an Alta-Vista Advanced search

<CENTER>
<TABLE BORDER="0" WIDTH="80%" CELLPADDING="5">
<TR>
<TD>
<FORM method=GET 
    action=/old?u=http%3A%2F%2Fwww.markradcliffe.co.uk%2Fhtml%2F%26quot%3Bhttp%3A%2Fwww.altavista.digital.com%2Fcgi-bin%2Fquery%26quot%3B%26gt%3B&y=1999
  <INPUT TYPE="hidden" NAME=pg VALUE=aq>
  <INPUT TYPE="Hidden" NAME=what VALUE=web>
  <NAME=fmt VALUE=".">
  <INPUT TYPE="HIDDEN" name=q cols=0 rows=0 wrap=virtual 
    VALUE="url:www.markradcliffe.co.uk/">
  <CENTER>
  <INPUT TYPE=text name=r size=40>
  <INPUT TYPE=Hidden NAME=d0 SIZE=0 MAXLENGTH=32 VALUE="">
  <INPUT TYPE=Hidden NAME=d1 SIZE=0 MAXLENGTH=32 VALUE="">
  <INPUT TYPE=Hidden NAME=text SIZE=0 MAXLENGTH=32 VALUE="yes">
  <INPUT TYPE=submit VALUE="Search">
  </CENTER>
</FORM>
</TD>
</TR>
</TABLE>
</CENTER>

What this does is limit the search to all pages that are at the URL www.markradcliffe.co.uk/ which is this web site (if you are looking for anything here the use my proper search engine.) Just change this address to whatever the address of your site is. I'm using the text version of Alta-Vista because it means that you don't have download those adverts, but you can easily alter it to use the normal Alta-Vista.

Don't Forget: For this to work you must have all the pages of your website submitted to Alta-Vista. It will only search through those pages which have been submitted. If you add a lot of stuff to a page then you should submit it again to make sure that the new stuff is in Alta-Vista's index. For useful results you should be using the META Description tag as well (see below).

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.
Compatability: 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. eg

Big Space!

If you want to know some more general HTML Stuff look at my HTML Frequently Asked Questions Page
Last Updated 1st July 1999 - List Of Recently Updated Pages

The

Advanced

HTML

Site