Liam Delahunty: Home	Tips	Web	Contact

Recommended laptop
under £500.

Think I deserve a present? See my Amazon Wish List

Liam's guide to stuff.

This docuemnt is older than the hills, and is only here for historical reasons, and to make me chuckle. Frames. Ha ha. See?

Although HTML can still be initially learnt as a stand alone mark-up language I now believe that it is best to try and amalgamate all the disciplines, rather than have to learn all about HTML before touching DHTML, before looking at JavaScript etc.

This is really an amalgam of several documents and articles I've written and at some point I will rewrite it properly. This date from 1999 or there abouts, the tips directory contains more short pieces and ideas.

This is neither for the fainthearted beginner or the really advanced web designer, this is really for me to record what new thing(s) I've learnt each day, problems I've encountered, and puzzles I've still to solve.

HTML

HMTL can be created in any text editor, for a couple of years I used nothing more sophisticated than Windows Notepad. However I have recently become the proud owner of Allare HomeSite, which came bundled with Dreamwever, I have hardly touched dreamwever apart from some of the JavaScript elements it has but am now in love with HomeSite!

The basic HTML document looks like this;

<HTML>
<HEAD>
<TITLE>Title of doument</TITLE>
</HEAD>
<BODY>
Generally the bits that you see are placed after the BODY tag, and before the closing...
</BODY>
</HTML>

The body tag itself often contains the following elements;
background="image.gif" bgcolour="#ffffff" where the colour is described in it's HEX format. You can also colour the text and links using the color, link, alink (active) and vlink (visited) properties. Other elements often found include leftmargin="number" and topmargin="0" which are normally set to zero. The body tag normally looks as follows;

<BODY background="image.gif" bgcolor="#ffffff" color="#000000" link="#ff0000" alink="#cc0000" vlink="#990000" topmargin="0" leftmargin="0">

Quck tip for Notepad users, press F5 to insert time and date into your document. Javascript that grabs the same data will do so from the uploaded time, not from the edited time.

Style Sheets

This entire web site has been created using just a couple of stylesheets. I can define all the font properties, text, headings, background color, positioning and be able to amend the entire web site by updating one file. Using just HTML I should give each new paragraph or cell a <font> tag and define the colour, size and face, using a stylesheet I can do that for every page in my site and change them all in one swoop if desired. Additionally documents created without all the formatting code are quicker to download, write and debug.

Stylesheets are unfortunately not supported by all browsers, if you want your web pages to work on the oldest browsers you need to carefully plan how you implement the style sheet. The basic rule of thumb as always with internet design is to test your pages on every browser you can.

I.E 3 tried to support style sheets, Netscape 3 didn't, I.E 4 and Netscape 4 both support style sheets, but unfortunately both don't support all the same properties. However the vast majority of useful properties work in roughly the same way on both browsers. As IE 4 seems to be the market leader by about 10% of hits at the moment I think you should design to work best on this browser (while it remains the most popular) and make sure that your site looks okay on the other browsers.

Firstly, I think once you start using style sheets you should make a effort not to use any formatting tags, such as <font> within HTML, and let the HTML code do what it does best - present and link documents.

There are several methods of using style sheets but the most useful is to link to a document wiithin your website as shown in this code example;
<link rel="stylesheet" type="text/css" href="style/style.css">
This should be the first entry within the <head> section. You can also write the stylesheet within the head, but that negates the use of stylesheets, so don't do it!. If you just want to have a special effect on one page you can define the property within the head, but I prefer to define a new class and will demonstate this later.

Before we get into the style sheet language and syntax itself lets look at how we should write the HTML now.
Basicaly write basically. Although you probably don't bother much in your normal documents, start to use the <p> and closing </p> tags. Use headings, bold, underline, strong, small, etc, but you can take control of the tags in your style sheet.

Graphics.

The first ting to consider is "do you really need any graphics?" This site has mostly been constructed using stylesheets and plain text. There are images on the opening page, (either gifs or a flash movie depending on your broswer), but other than that, no more images. Did you miss them? Probably not, however if you decide that you do require images then the one golden rule is keep the file size small. I use Fireworks to create most of my graphics now. I have found it to make smaller gif files than PhotShop and some of the automated features are quite useful. However as PhotoShop is still the market leader for creating graphics, most of the examples and techniques will be PhotoShop biased. Any Fireworks users out there? Drop me a line and we can start exchanging info, and perhaps will create enough useful information to merit some pages here.

JavaScript

Alert

We need to get started with JavaScript somewhere and the two traditional places are the status bar and the alert.

To make a JavaScript alert type the following code;

Status

I use the onMouseOut to reset the status bar message.

<a href="link.htm"
onMouseOver="window.status='new text in status bar'; return true;"
onMouseOut="window.status= ' '; return true;">look in the status bar</a>

Scrolling

Due to a problem with Netscape dealing with <a href="#" onClick...> call the following function instead and use the <a href="JavaScript:function_name;"> code.

<SCRIPT language="JavaScript">
<!--
function scrollIt(x,y){
window.scrollTo(x,y);
}
// -->
</script>
<body>
<a href="javascript:scrollIt('1000','0');">Scroll</a>

Other similar window methods include scrollBy, moveTo,(which moves the window, but then you can't move it back), moveBy, resizeTo, resizeBy. The resizeTo method could be useful, to force a window to be, say, 600 x 400, but there are still problems with users resizing afterwards, or moving the window.

Absolute positioning in HTML.

<DIV>

The logical division tag appears to be one of the fundamental building blocks of DHTML or HTML 4.0 depending on how you look at it and what you read.

Using the DIV tag turns your HTML page into a series of layers, that can be positioned exactly where required, even on top or overlapping each other. Layers can also be hidden, moved or altered by JavaScript routines, though IE4 currently does a better job of supporting most properties.

Within the DIV tag you can use the following elements;

id="text" to name the layer for JavaScript.
Class="text" to utilise Style Sheet definitions.
Align="left - center - right - justify"

...and the all important Style attribute, similar to the style sheet definitions you may have already come across, (and may be reviewed later).

The properties of the layer are described using the style attribute in the following manner:

<DIV id="layerone" class= "headings" align="center" style="property: value; property: value;">

The content of the layer will follow, completed by a closing </DIV> tag. The content can be any thing you'd normally find in a HTML document, text, images, links and tables.

The style properties are obviously the important aspect to layers;

position: relative - absolute
visibility: hidden - visible - inherit
left: # pixels
top: # pixels
width: # pixels
height: # pixels
z-index: #

The left and top are where you want the layer placed in pixels from the top right hand corner of the browser. Width and height are the dimensions of the layer. I will investigate and report further. Z-index is a number that defines what layer is see on top of what, the higher values being on top, and the visibility property can be set to hidden for an invisible layer.

It is also possible to define the font family, size, colour, weight and many other stylistic properties that is to be used though out the division. However these are normally best addressed by a style sheet referring to the divisions class. Strange effects can be achieved using the overflow property and setting the attribute to hidden so that anything that doesn't fit into the 'box' is clipped. Could be useful for dramatic text effects with clipped large fonts... maybe...

The basic layer code is;

<DIV class="myclass" id="divisionid" align="center" style="position: absolute; left: 100; top; 100; width: 100; z-index: 10;">

Combine layers with images with transparent elements to produce interesting layered effects, or combine several lines of text on top of one another for rich and vibrant typographical designs.

Now the properties themselves can be 'got at' with quite simple JavaScript routine, unfortunately Netscape and Microsoft have different syntax. Using the tag above as an example, for Microsoft you can access a layer using this code:

document.all.divisionid.style.visibilty=hidden.

Whereas Netscape the JavaScript would

document.layers.divisionid.visibility=hidden.

So we need a function that will check the browser name and serve the correct syntax;

<SCRIPT Language="JavaScript">
// <!-- hide from ancient browsers
function hideLayer(layerid) {
if (navigator.appName == "Netscape"){
document.layers["layerid"].visibility="hidden";
}else{
document.all["layerid"].style.visibility = "hidden";
}
function showLayer(layerid) {
if (navigator.appName == "Netscape"){
document.layers["layerid"].visibility="visable";
}else{
document.all["layerid"].style.visibility = "visable";
}
// -->
</SCRIPT>

A preferred way though is to define global variables that can be used throughout the document. These works out if the Netscape or Microsoft is being used, then simply sets all the relevant parts. To call the hideLayer or showLayer the global variables fill in the details such as document.all or document.layers and if style is needed.

<script language="JavaScript">
// <!-- define global variables
     if (navigator.appName == "Netscape") {
		layerSwitch="document.layers";
		styleSwitch="";
     }else{
		layerSwitch="document.all";
		styleSwitch=".style";
	 }
// Layer functions
	function showLayer(layerName){
		eval(layerSwicth+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
	}
	
	function hideLayer(layerName){
		eval(layerSwitch+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
	}
// -->
</script>

The code is called with the body using the following;

<a href="javascript:showLayer('myLayer')">Show Layer</a>
<a href="javascript:hideLayer('myLayer')">Hide Layer</a>

or my preferred method of making something visible on a mouse movement rather than a click, (for some reason have to code with a href="#", but no big probbem)

<a href="#"
onMouseOver="showLayer('text4')">
Show me the layer...</a>

But all if that is really just games, the real joy is the absolute positioning that is at long last available to the web designer. Next thing to try is moving layers. Access the style parameter as detailed above, but change top and left to move a division layer.

Opening Windows.

Loading large images as you need them. Use the scrollIt function or the visibility property above with a load it function and you can load images in as requested. Using the scrollIt method gives the user the illusion of a horizontal landscape. By loading in 2 images at the beginning, perhaps with a please wait loading message, or pre-loading one of the initial images on a previous page and loading the third as the user requests the second (by clicking on a link) you will remain one ahead of the user and present images as requested. This is best achieved by previously opening a window without a scroll bar so the user can't spoil the effect by using the bar and bypassing the loading. This works better for IE4 than Netscape as Netscape reloads the images on each click, slowing things down somewhat...dooohh!! <HTML> <HEAD> <TITLE>Liams lovely loading lark</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <Body text=black link=red alink=maroon vlink=purple bgcolor=white>   <DIV style="position: absolute; left: 0; top: 0; width:600; height:400;> <img name="one" src="first_image.gif" width=600 height=400> </div>  <DIV style="position: absolute; left: 0; top: 0; width:600; height:400;> <a href="JavaScript:scrollIt('600','0');loadIt('three','third_image.gif');">next</a> </div>  <DIV style="position: absolute; left: 600; top: 0; width:600; height:400;> <img name="two" src="second_image.gif" width=600 height=400> </div>  <DIV style="position: absolute; left: 600; top: 0; width:600; height:400;> <a href="JavaScript:scrollIt('600','0');loadIt('four','fourth_image.gif');">next</a> </div>  <DIV style="position: absolute; left: 1200; top: 0; width:600; height:400;> <img name="three" src="single_pixel.gif" width=600 height=400> </div>  <DIV style="position: absolute; left: 1200; top: 0; width:600; height:400;> <a href="JavaScript:scrollIt('1800','0');">next</a> </div>  <DIV style="position: absolute; left: 1800; top: 0; width:600; height:400;> <img name="four" src="single_pixel.gif" width=600 height=400> </div>  <DIV style="position: absolute; left: 1800; top: 0; width:600; height:400;> <a href="JavaScript:scrollIt('0','0');">first</a> </div> </body> </html>

Rollover JavaScript

<html> <head> <title>Double Rollover</title> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body> <a href="link.htm" onMouseOver="mouseOver('image1','image2');" onMouseOut="mouseOut('image1','image2');"> <img src="image1off.gif" name="image1" width=100 height=100 Border=0"></a> <a href="link.htm" onMouseOver="mouseOver('image1','image2');" onMouseOut="mouseOut('image1','image2');"> <img src="image2off.gif" name="image2" width=50 height=50 Border=0"></a><br> </body> </html>

JavaScript For Modifying date to English format.

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Mailto

The following line includes the subject with the standard <a href="mailto..."> code. <A HREF="mailto:email@yours.com?subject=new email">

FORMS

Use the ENCTYPE="text/plain" parameter to makes the data from a form easily readable without CGI.

Well I never

Always declare image widths and heights so that the rest of the document will be in the correct place as it downloads. Helps with redraws and therefore loads quicker.

Changing an images width and height attributes from the real ones can significantly slow down scrolling. I had a large 600 x 480 image that I change to 600 x 400 in the HTML and the document became very jerky when scrolling.

Update two frames at once

<a href="right.htm" onClick="window.self.location='left.htm'" target="right">Click</A>

[ liamdelahunty.com | Tips and Tools | Search | Contact ]

Share this!