Basic HTML Coding Container Tags -- Container tags are used to affect a certain portion of your material.

They utilize the on/off approach.

Container tags operate on the material between the opening tag < tag> and the closing tag </ tag> Start tag <b> <strong> <i> <cite> <em> <center> <p align=right> End Tag </b> </strong> </i> </cite> </em> </center> </p> Format of code used in example This is for <b>bold</b> text <strong>Strong</strong> is similar to bold but may depend on the browser This is for <i>italic</i> text <cite>Cite</cite> is similar to italic So is <em>Emphasis</em> but may depend on browser <center>Centers the text</center> Right aligned paragraph. <p align=right>You can use the "p" tag as a container to align text to the right</p> <blockquote> Use blockquote to indent a section of text from both sides. Great for quoted sections in a paper. Also very effective to use on an entire page to keep things from getting too close to the edge.</blockquote> How it looks This is for bold text Strong is similar to bold but may depend on the browser This is for italic text Cite is similar to italic So is Emphasis but may depend on browser Centers the text Right aligned paragraph. You can use the "p" tag as a container to align text to the right Use blockquote to indent a section of text from both sides. Great for quoted sections in a paper. Also very effective to use on an entire page to keep things from getting

<blockquote>

</blockquote>

too close to the edge. <h3> </h3> <H3>Use H1 or H2 or H3 etc. for headings</H3>It automatically adds a paragraph break after the heading. Note: 1 is largest.

Use H1 or H2 or H3 etc. for headings

It automatically adds a paragraph break after the heading. Note: 1 is largest.

<font size=+2>

</font>

Increases <font size=+2>font size</font> by the amount of the number. You can also use <font size=-2>negative</font> numbers. Changes <font size=6>font size</font> to a specific size. Higher numbers are larger font size. You can <font color="#0000FF">change the font color</font> within your text. See the <A HREF="tables2.html">section on colors</A> for options of color codes or experiment. You can <font face="Verdana, Arial, Helvetica, sans-serif">change the actual font used to some extent within your text.</font> In this instance, the browser will attempt to use "Verdana" if the computer has it; if not, "Arial"; if not, "Helvetica"; if not, a generic sans-serif font; if not, it will ignore the instruction.

Increases font size by the amount of the number. You can also use negative numbers. Changes to a specific size. Higher numbers are larger font size. You can change the font color within your text. See the section on colors for options of color codes or experiment. You can change the actual font used to some extent within your text. In this instance, the browser will attempt to use "Verdana" if the computer has it; if not, "Arial"; if not, "Helvetica"; if not, a generic sansserif font; if not, it will ignore the

<font size=6>

</font>

font size

<font color="#0000FF">

</font>

<font face="Verdana, Arial, Helvetica, sans-serif">

</font>

instruction. <blink> <ul> </blink> </ul> Blink. The most <blink>annoying</blink> code in html. Unordered List.<ul><li>Creates a list with bullets<li>"li" is used to denote list items<li>Each appears with a bullet<p>A break with no "li" gives an item without bullet.</ul> Blink. The most annoying code in html. Unordered List.

Creates a list with bullets "li" is used to denote list items Each appears with a bullet A break with no "li" gives an item without bullet.

<ol>

</ol>

Ordered List.<ol><li>Creates a list with numbers<li>"li" is used to denote list items<li>Each appears with a consecutive<p>A break with no "li" gives an item without a number.</ol>

Ordered List. 1. Creates a list with numbers 2. "li" is used to denote list items 3. Each appears with a number A break with no "li" gives an item without a number.

<dl>

</dl>

Definition List.<dl><li>Creates a list with bullets, but the list items are not indented<li>"li" is used to denote list items<li>Each appears with a bullet<p>A break with no "li" gives an item without bullet.</dl>

Definition List. Creates a list with bullets, but the list items are not indented "li" is used to denote list items Each appears with a bullet A break with no "li" gives an item

without bullet. <tt> <pre> </tt> </pre> This changes to <tt>typewriter style text</tt> within your text. <pre> Within the pre-formatted tag, text and numbers, etc. will be lined up exactly as you typed them. Good for lists and forms, etc. </pre> This changes to typewriter style text within your text.
Within the pre-formatted tag, text and numbers, etc. will be lined up exactly as you typed them. Good for lists and forms, etc.

Basic HTML Coding Simple Tags -- Simple tags make something happen at a point in the document, such as a line break, as opposed to affecting a
portion of the document (like making some text bold). To affect a portion of a document, you use container tags. Most tags are container tags. Tag <br> Name Line Break Format of code used in example Item 1 <br>Item 2 <br>Item 3 Item 1 Item 2 Item 3 How it looks

<br>

Line Break

Item 1 <br><br>Item 2

Item 1 Item 2

<p>

Paragraph

Particularly useful for setting apart paragraphs of text.<p>The paragraph tag gives the equivalent of a double return. You generally do not want to use multiple paragraph tags. Use line break to move down a number of lines.<p>The paragraph tag can also be a container.

Particularly useful for setting apart paragraphs of text. The paragraph tag gives the equivalent of a double return. You generally do not want to use multiple paragraph tags. Use line break to move down a number of lines. The paragraph tag can also be a container.

<hr>

Horizontal Rule Horizontal Rule Options

This places a line <hr> across your document

This places a line across your document

<hr>

<hr noshade> <hr width=25> <hr size=5> <hr width=40 align=left> <hr noshade width=35 size=4>

more WEBTRICKS

Color my Web Page!

WEB-SAFE COLORS
To be on the safe side, always use web-safe colors when designing your pages. These are colors which will work on almost all computers and all browsers. The hex code for color is made up of Red/Green/Blue and represented by two digits. Simply make sure that you use FF,CC,99,66,33,00 for your codes and the colors will be web-safe. Here is the entire range of web-safe colors with their codes.
HTML Code #FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00 #FFCCFF #FFCCCC #FFCC99 #FFCC66 Color HTML Code #CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00 #CCCCFF #CCCCCC #CCCC99 #CCCC66 Color HTML Code #99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00 #99CCFF #99CCCC #99CC99 #99CC66 Color

About Web Color: HTML color codes are hex codes made up of 3 pairs of digits representing red, green, and blue (in that order). The range of codes is from 00 to FF. The absence of color is 00 and full color is FF. The first pair specifies the amount of red, the second pair the amount of green, etc. to make up the color. This is like mixing light, not like mixing paint, so black is #000000 and white is #FFFFFF. Even if you don't know the hex numbering system,

you can easily play around with making your own colors, stealing portions of codes from other colors. To insure the colors look good with every browser, stick to 00, 33, 66, 99, CC, and FF for your codes. Therefore:

#FFCC33 #FFCC00 #FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900 #FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600 #FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300 #FF00FF #FF00CC #FF0099 #FF0066

#CCCC33 #CCCC00 #CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900 #CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600 #CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300 #CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000

#99CC33 #99CC00 #9999FF #9999CC #999999 #999966 #999933 #999900 #9966FF #9966CC #996699 #996666 #996633 #996600 #9933FF #9933CC #993399 #993366 #993333 #993300 #9900FF #9900CC #990099 #990066 #990033 #990000

#FF0000is red #00FF00is green #0000FFis blue #FFFF00is yellow (red and green)

Any code used the same for each color is a shade of grey

#CCCCCC #999999 #666666 #333333

Using Color Codes: Color codes go into

#FF0033 #FF0000

appropriate tags. When you are making the background of a page, table, row, or cell a particular color, use "bgcolor=" Example: <body bgcolor="#FFFFFF"> When you are making an item (like a font) a different color, use "color=" Example: <font color="#FFFFFF"> Body Colors: Within the "body" tag, you can specify colors for page background (bgcolor), text (text), links (link), active link while it's being clicked (alink), and visited link (vlink) Example: <body bgcolor="#FFFFFF" text="#000000"

HTML Code #66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00 #66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00 #6699FF #6699CC #669999 #669966 #669933 #669900 #6666FF #6666CC #666699 #666666 #666633 #666600 #6633FF

Color

HTML Code #33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00 #33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00 #3399FF #3399CC #339999 #339966 #339933 #339900 #3366FF #3366CC #336699 #336666 #336633 #336600 #3333FF

Color

HTML Code #00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00 #00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00 #0099FF #0099CC #009999 #009966 #009933 #009900 #0066FF #0066CC #006699 #006666 #006633 #006600 #0033FF

Color

link="#006600" vlink="#000066" alink="#666666"> Tables: You can specify background color for any portion of a table, including the entire table in the <table> tag, a row in the <tr> tag, or a cell in the <td> tag. If a cell is empty, the background color will not show, so you may need to include a small transparent gif as a spacer, or use a nonbreaking space which is represented in HTML as: &nbsp;

#6633CC #663399 #663366 #663333 #663300 #6600FF #6600CC #660099 #660066 #660033 #660000

#3333CC #333399 #333366 #333333 #333300 #3300FF #3300CC #330099 #330066 #330033 #330000

#0033CC #003399 #003366 #003333 #003300 #0000FF #0000CC #000099 #000066 #000033 #000000

Miscellaneous: You can change the color of a horizontal rule:

<hr color="#CC0000"> Note: this does not work in all browsers, so be prepared for it to show up as black. WebTricks Main Page

Document tags Simple tags Container tags Hyperlinks Images Using Color Tables Animated Gifs Frames

You can reach Pete at: pguithe@ilstu.edu

Basic HTML Coding

Image Tags -- These are the tags that cause an image to appear in your document.
Basic code: <img src="image.gif"> Note that you can use the same addressing formats that you can use in hyperlinks -- eg. full addressing: http://www.arts.ilstu.edu/~guither/webtricks/image.gif or relative addressing, etc. Here is the image. Just a small nothing for demo purposes. Specifying width and height in the image tag: It is very useful to specify the actual width and height of the image (in pixels) in your tag. If you don't, the browser has to actually load the image before showing anything else below it on the page (in order to know how much room to leave). When you specify the size, the browser leaves the space for it and continues to show text, etc. while loading the image, giving your viewer more to look at while waiting. There are a number of programs which will show you the size of your image. The code format for image.gif with size info is:<img src="image.gif" width="54" height="36"> You can also use size to force an image into a different shape or size (with some distortion, of course). For example, here is the same image with a width of 94 instead of 54 specified in the tag.

Using "border" in the image tag. <img src="image.gif" width="54" height="36" border="2"> Note: Specify border="0" for an image that is a link, to avoid the link color automatically added as a border. Image spacing

You can make images line up right next to each other by eliminating spaces between code elements. This is great for creating buttons that form a grid. 1. Note extra space <img src="image.gif" width="54" height="36"> <img src="image.gif" width="54" height="36">

2. Without extra space: <img src="image.gif" width="54" height="36"><img src="image.gif" width="54" height="36"><br><img src="image.gif" width="54" height="36"><img src="image.gif" width="54" height="36">

Image alignment Image alignment refers to how the image is aligned with respect to text or other elements following it. This can be very useful in your page layout. Note that you can include images right within your text (in fact, to separate them out, you need to include line breaks, etc.) <img src="image.gif" align=top> This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

<img src="image.gif" align=middle>

This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

<img src="image.gif" align=bottom>

This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways. This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways. This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

<img src="image.gif" align=left>

<img src="image.gif" align=right>

<img src="image.gif" align=absmiddle>

This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

<img src="image.gif" align=texttop>

This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

<img src="image.gif" align=baseline>

This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

<img src="image.gif" align=absbottom>

This text is written immediately before the image tag. This text is after. This is a demonstration of how text interacts with various photo alignments as it wraps in different ways.

In order to clear text from continuing to wrap by a picture, use <br clear=left> (or whatever alignment was set) <img src="image.gif" align=left> Image text with a standard line break<br>Next line of text. <img src="image.gif" align=left> Image text with a "clear" line break<br clear=left>Next line of text. Image text with a standard line break Next line of text. Image text with a "clear" line break Next line of text.

WebTricks Main Page

Document tags Simple tags Container tags Using Color Hyperlinks Images

Table Tags Table Examples Animated Gifs Frames Outside Resources

You can reach Pete at: pete@thelivingcanvas.com

Basic HTML Coding Table Tags -- The table is one of the most useful design elements in html. It allows you to use relatively simple html codes to
create complex and interesting arrangements on your pages. Tables can be used to create grids with information in cells, or without borders, they can help you arrange your text and images in all sorts of creative ways. For an overview of how tables can be used, see the General Tables page and the Color Chart page. This page discusses the basics of the tags for tables themselves. Basic Table Tags <table> </table> <tr> </tr> <td> </td> Tags to delineate the entire table. Sets up a row in your table. Sets up a cell within a row.

So if you were going to set up a simple table with 3 rows down, and 2 columns across, the coding would look something like this (in place of the "Row_1_Col_1_" items would be your actual text, images, etc.): <table> <tr> <td> Row_1_Col_1_ </td> <td> Row_1_Col_2_ </td> </tr> <tr> <td> Row_2_Col_1_ </td> <td> Row_2_Col_2_ </td> </tr> <tr> <td> Row_3_Col_1_ </td> <td> Row_3_Col_2_ </td> </tr> </table>

Attributes in Table Tags:

There are a number of additions to the table tags you can use to add features to your tables and allow you to use them to create complex layouts. Attributes to be used within the <table> tag (remember that you can combine a number of attributes within the table tag): <table border="1"> <table width="70%"> <table width="350"> Creates a border in your table. Can use different amounts. Forces the table to fit within the specified percent of the screen. Forces the table to be a certain number of pixels wide Cellpadding is the space around your material to the edge of the cell (both vertically and horizontally). This keeps the text from runnning right to the edge. Cellspacing is the space between cells (if the table is bordered, cellspacing is represented in a kind of border). The following tables use a border of "3". This mini table has cellpadding of 20 and cellspacing of 5 Cell Info <table cellspacing="5" cellpadding="10"> This mini table has cellpadding of 5 and cellspacing of 20 Cell Info Cell Info Cell Info

This mini table has cellpadding of 0 and cellspacing of 0 Cell Info Cell Info <table bgcolor="#FF0000"> Changes the background color within the table. Can also be used for a row or a cell. See Color Chart for more information.

Attributes to be used within the <tr> tag (remember that you can combine a number of attributes within the tag): <tr align=center> <tr valign=top> <tr bgcolor="#000000"> Centers the information (left to right) in all the cells in that row. Can also use left or right -- default is left. Lines up the information in all the cells in that row vertically to start at the top of the cell, so that excess space is at the bottom. Can also use middle and bottom -- default is middle. Changes the color of the background for that row.

Attributes to be used within the <td> tag (remember that you can combine a number of attributes within the tag): <td align=center> <td valign=top> <td bgcolor="#000000"> <td colspan="2"> Centers the information (left to right) in that cell. Can also use left or right -- default is left. Lines up the information in the cell to start at the top of the cell, so that excess space is at the bottom. Can also use middle and bottom -- default is middle. Changes the color of the background for that row. Indicates that this cell will take up the width of two columns. You can use this for a heading of your table by making the colspan equal to the number of columns, or you can use this to even out your table. It's important that all rows have the same number of cells. Indicates that this cell will take up the height of two rows. Be careful with this as it can get confusing to make sure that the other rows have the right number of cells. Allows you to set the width and height of the cell in pixels

<td rowspan="2"> <td width="170" height="20">

WebTricks Main Page

Document tags Simple tags Container tags Using Color Hyperlinks Images

Table Tags Table Examples Animated Gifs Frames Outside Resources

You can reach Pete at: pete@thelivingcanvas.com

Simply put, tables can be a great way to set up a good-looking page and organize information well. Tables with borders are used to create cells of information, as in the TABLES title above. Additionally, by using tables without borders, you can do page layout which allows elements to be in various places on the page. For example, here's a simple use of a borderless table: On the left, you can have one column of information or even images that link to other locations...

While on the right, you can have descriptions in further detail, or stories, or whatever other information you'd like. Of course, what makes it look good is what you decide to put in it. This is pretty boring.

Here is the code for the section above: <table width="80%"><tr><td><center>On the left, you can have one column of information or even images that link to other locations...</center></td><td><font size="+1" color="#000066">While on the right, you can have descriptions in further detail, or stories, or whatever other information you'd like. Of course, what makes it look good is what you decide to put in it. This is pretty boring.</font></td></tr></table> Now if you create a two-toned background using a background image like this: you can do some pretty exciting layout work. Check out the Illinois Shakespeare Festival pages to see how tables and a two-toned background work together.

How about Tables with Borders?

One great use for tables with borders is in creating calendars. If you'd like to steal the code for a good-looking calendar of events, check out the Illinois Shakspeare Festival calendar. Here's an example of a simple calendar template which you can steal and modify.

TITLE OF CALENDAR SECOND LINE OF TITLE May 1996

Sun Mon GENERAL INFORMATION TEXT Tue Wed Thu Fri Sat

1 TEXT 8 TEXT 14 15 TEXT 5 TEXT 12 13 6 TEXT 7

2 TEXT 9 TEXT 16

3 TEXT 10 TEXT 17

4 TEXT 11 TEXT 18

TEXT 19 TEXT 26 TEXT 27 20

TEXT 21 TEXT 28 TEXT

TEXT 22 TEXT 29 TEXT

TEXT 23 TEXT 30 TEXT

TEXT 24 TEXT 31 TEXT

TEXT 25 TEXT TEXT

TEXT TEXT
TEXT

Now here are the basic tags for making tables. WebTricks Main Page

Document tags Simple tags Container tags Using Color Hyperlinks Images

Table Tags Table Examples Animated Gifs Frames Outside Resources

You can reach Pete at: pete@thelivingcanvas.com

gifs Here's a quick tutorial on creating animated gifs.

What is an animated gif? Simply put, it's a series of gifs which have been "stacked" into a single gif, with information on how they should be loaded (how fast, whether to start again when you get to the end, etc.). This completed gif shows up as a single object which is referred to in the HTML coding in the same way (ie. <img src="gifname.gif">). Netscape will then be able to interpret it and make it "move." The trick is more in coming up with the idea and executing the art, than in actually creating the code. Here's what you need to do. Get a copy of "GifBuilder." It's the best. In fact, I have it for you right here. Click to download. You can also visit the site of the creator of GifBuilder. 2. Get a Mac. If that's not an option, you'll have to change number 1 above, 'cause "GifBuilder" is for the Mac, or alternately, you can check out "Gif Animation on the WWW" -- a good site with more detailed tutorials, and links to Windows-based software. 3. Use any drawing or paint program (I prefer Photoshop for all graphics work). 4. Create an series of images and save them individually. 5. Drag them all into GifBuilder and set duration time for each one, and whether you want it looped, transparent, interlaced, etc., tell it to build the gif, and voila -- you have a single gif file which, if put into a web page and viewed by Netscape 2.0, will be animated! 6. After you've created all your animated gifs, get rid of most of them. An important point -- Don't overuse animated gifs. They can become obnoxious very quickly. Try staying on this page for a long time, and you'll see what I mean.
1.

The animation above is actually 8 separate animated gifs (7 really, the A is the same file) put next to each other. I could have made one gif and had the shifting colors, but I enjoyed seeing how this would work, because they each follow their own pattern. Here are some other animated gifs I've created with a brief description of how they were made, along with the opportunity to see them in context on their actual pages: A theatre marquee with moving lights across the top -- great for a calendar of events. Full details on how the image was made. Good starting point. The words "Freedom of Expression" gradually eaten away in a non-looped animated gif. A logo from the Illinois Shakespeare Festival pages, set up with a nice subtle shifting colors effect. A couple of other animations I have created.

WebTricks Main Page

Document tags Simple tags Container tags Using Color Hyperlinks Images

Table Tags Table Examples Animated Gifs Frames Outside Resources

You can reach Pete at: pete@thelivingcanvas.com

FRAMES
Reference Page Frames are a set of html pages arranged in a browser window by a "controlling" html page which is not seen, but is the actual page that needs to be loaded (ie, bookmarks and links must use the address of the controlling page). The controlling page does not have a body and is set up like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd"> <html> <head><title>Page title</title></head> <frameset> <frame> <frame> </frameset> </html> Main tags for Frames in the controlling page:

<frameset></frameset> (container tag identifying the frame structure) <frame> (simple tag identifying a frame window and its contents)

Simple frame with two columns: righ t left <frame src="left.html" name="left"> <frame src="right.html" name="right"> </frameset> Simple frame with two rows: <frameset rows="200,*">
Indicates the frame uses rows, that the top row is 200 pixels high, and the second one takes up the remainder

<frameset cols="200,*">

Sets up the two windows in the frame, says what html file goes in each to begin with, and names the windows Ends the frameset

top bottom

<frame src="top.html" name="top"> <frame src="bottom.html" name="bottom"> </frameset>

Sets up the two windows in the frame, says what html file goes in each to begin with, and names the windows Ends the frameset

Complex frame with two columns, with the second column having two rows: title menu content <frame src="menu.html" name="menu"> <frameset cols="250,*">
Indicates the frame starts with columns, that the left column is 250 pixels wide, and the second one takes up the remainder Sets up the first window on the left Indicates that the second column is made up of two rows, that the top one is 150 pixels high, and the bottom one uses the remainder Sets up the two windows in the right column Ends the rows frameset Ends the columns frameset

<frameset rows="150,*">

<frame src="title.html" name="title"> <frame src="content.html" name="content"> </frameset> </frameset>

Attributes which can be used in the <frameset> tag: cols="20%,30%,50%" rows="20%,30%,50%" Indicates in a general way how to size the windows (should add up to 100%)

cols="200,*" rows="80,150,*" frameborder="0"

Specifies a specific width or height in pixels. When using this, one of the items should be represented with an asterisk (*) to allow using up the remaining space. Eliminates the separator between frame windows. Default is "1".

Attributes which can be used in the <frame> tag: src="filename.html" Indicates the source page to go in that frame to begin with (can also be an image). Names the window of the frame -- important for loading other content into that frame window -- this is the name you would use with target="windowname" to have a link load into the frame window. Options are "yes" "no" "auto" -- This indicates whether to put a scroll bar on the window. Default is auto, which means that a scroll bar will be put on if needed to see the rest of the content. "no" means that no scroll bar will be placed regardless of whether one is needed (use with caution). "yes" means a scroll bar will be put up regardless. This means that the viewer will not be allowed to resize the window. Indicates the spacing from the edge of the frame to the content. Minimum is 1, but browsers automatically put more than 1 in there, so if you're having problems getting your logo to fit, add the marginwidth and marginheight of 1.

name="windowname"

scrolling="no"

noresize marginwidth="1" marginheight="1"

Remember: put all the attributes for a tag within the same tag. eg: <frameset cols="200,*" border=0> <frame src="file.html" name="window" noresize scroll="no" marginwidth="1" marginheight="1">

TARGETS
Be very careful to assign targets to all your links or you could end up with pages popping up in the wrong place. Format: <a href="http://www.website.com" target="name"> What names to use?

If you use a name which you established in the <frame> tag, then the link will open up in that frame window if you use name="_top" (note the underscore), then the link will fill the current browser window, eliminating the frames. if you use a name that hasn't already been established, then the link will open up in a new browser window (you can use any name you wish).

What if you have a lot of links on a page (like a links page)?

You can use the following code on your page (this gets placed WITHIN the <head> tag: <base target="name"> Then, every link on that page will go to that target, unless you specify differently.

NOFRAMES

If you're concerned that people with browsers that don't support frames may be viewing your pages, you can help them out as well. On the "controlling" page, put the following in right after your final </frameset>: <noframes> <body> Put the information you want them to see here. It may be a basic index of links without frames, or a message, or... </body> </noframes> The information you put in there will only be seen on browsers that don't support frames (very few these days). It will be ignored by any other browsers.

WebTricks Main Page

Document tags Simple tags Container tags Using Color Hyperlinks Images

Table Tags Table Examples Animated Gifs Frames Outside Resources

You can reach Pete at: pete@thelivingcanvas.com