Advanced HTML Guide

Style sheets

Inline style sheets

Style sheets can be used to control the whole look and layout of your HTML page. They allow you to separate the content of your website from the look and feel of your website. To start with here is a simple example of how to get rid of the underlining of anchor links:

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

This can be done in a number of 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;  }
// -->
</style>

Importing an external style sheets

A third way is to embed the style sheet in a separate file with a .css extension. Create a file called style.css with the following contents.

A {
text-decoration: none;
}

Then add the following tag in the <head></head> section of each HTML page that you want to use it on.

<link rel="stylesheet" href="/style.css" type="text/css">

Applying style sheets to specific areas of your page

If you want to apply styles to an area of you page rather than to the whole page you can use <div></div> tags in combination which style sheets. To do this you surround the relevant block with named <div></div> tags and then reference these tags in the style sheet.

For example I want to have some white links on a black background, and I want the links to be in a smaller Arial font - however I only want to affect the links within a particular block. I want the rest of the links on the page to be in the default colour. Below is what the result looks like.

Advanced HTML
Tables
Frames
Passwords

This is achieved with the following HTML. I have highlighted the <div> tags in red.

<div id="sidemenu">
<table bgcolor="#000000">
<tr>
<td>
<a href="/advancedhtml.htm">Advanced HTML</a><br>
<a href="/tables.htm">Tables</a><br>
<a href="/frame.htm">Frames</a><br>
<a href="/password.htm">Passwords</a><br>
</td>
</tr>
</table>
</div>

The <div> is given the name 'sidemenu'. In the style.css style sheet I have the following section. This says that any 'a' anchor tags which are within a <div> tag (having the id of 'sidemenu') are white, in the arial font and are of 80% of the default font size.

div#sidemenu a {
color: ffffff;
font-family: arial;
font-size: 80%;
}

Compatibility: All modern browsers will support basic style sheets.

Floating Frames

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

<center>
<iframe name="content_frame" width="400" height="244"
    SRC="fframe.htm">This site uses floating frames
</iframe>
</center>

For information on standard HTML frames see my frames guide.

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.

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.

JavaScript 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='/'">
  <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 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

<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 JavaScript Menu Page to see how to make a Pull Down Menu using JavaScript.

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></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.

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

Marquees

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>

This text will scroll from right to left slowly

<marquee behavior="alternate" scrollamount="50"
    scrolldelay="8">This text will go Alternate
    from Left to Right</marquee>

This text will go Alternate from Left to Right

<marquee behavior="slide">This text will scroll in
    and "stick."</marquee>

This text will scroll in and "stick."

<marquee scrolldelay="5" scrollamount="50">
   This is a very fast scrolling text.</marquee>

This is a very fast scrolling text.

<marquee><img src="uparrow.gif" alt="up" align="middle"
 width="21" height="19">You can even add images to marquees!</marquee>

You can even add images to marquees!

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

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

Advanced

HTML

Site