Professional Web Design

Document Sample
Professional Web Design Powered By Docstoc
					Hello there. Welcome to WebTutor. If you're like many people, you've thought about making your own web page. Also, if you're like many people, you may have looked at some of the coding behind those pages and thought "I could never do that". Well, guess what? You can, it's not as hard as it looks, and I'm going to teach you. So, whenever you're ready, grab a cup of coffee, and let's get to work...

Begin here

General Table of Contents

So, you want to make a

Web Page!

4.1

by Joe Barta PROFESSIONAL WEB DESIGN
Also available: Table Tutor, Forms Tutor & Frames Tutor. This tutorial is one in a series of WebTutor tutorials. WebTutor is also available for download as a zip file. (1.5Mb) Learn in the comfort and privacy of your own home. No salesman will visit. Print version now available - Get the WebTutor book! Lots of good stuff... Software discounts, Pre-release of Javascript Tutor, Free Clipart, etc.
Just a note- this tutorial is geared towards those using Windows95/98 It is also shamelessly biased towards Netscape. But rest assured, most of it should work just fine for all you Internet Explorers, AOL'ers and users of other operating systems.

Hello. My name is Joe and I'm going to give you a few simple lessons on how to make a Web Page. I must warn you though, this is for "all wet behinda ears" Newbies. If you're at all experienced at this sort of thing, you'll probably find this tutorial a bit of a yawner. You'll be happy to learn that it's really pretty simple. The basic idea is this... A web page is nothing more than a file, a HTML file to be exact. It's called HTML because web page documents have the file extension .html or .htm. HTML stands for Hyper Text Mark-up Language. (If you are unclear about this file extension stuff, then you really are newbie!! Take a quick detour for a few ramblings on the subject). Let's get started. First, if you have any of them fancy HTML editors and have an inkling to break em in now... forget it. The worst way to learn is to use one of those things. (Although there are a few that you will find helpful, they'll only help you once you learn the basics, so don't even worry about it now.) What's the best way to learn HTML?? Notepad**. I know, I know, you got this 9 megabyte Wunder Wizzard that says it's gonna make putting up a web page as easy as scratching your head. Just trust me on

this one. K? K. Another tool you'll need is a browser to view your web pages. Netscape Navigator is what I use. If you're using some flavor of Windows, then Internet Explorer (also a browser) should be on your system somewhere.

Joe, Just wanted to drop you a line to let you know how much I enjoyed your tutorials. After reading your tutorials, I bailed on my old web site which was done with * and started my own from scratch with notepad. It was like crawling out of a 5 gallon bucket. I now can do exactly what I want.

If you're using an online service such as America Online, MSN etc, you can still make a web page. However, I'm not familiar with the browser they give you, so if you want to use their stuff you're on your own. Also, just because you're using AOL (or some other online Thanks, service), that doesn't mean you have to use their tools... you are Mike welcome to use whatever you want. WebTV'ers - I don't know anything about WebTV, but I do know that people have been able to make web pages with it. You might want to look for some WebTV specific sites to learn how they do it. Then you can come back here and go through these lessons.
* I thought it was only fair to omit the name of the specific "Wunder Wizzard" that Mike was refering to.

** FAQ: What the heck is Notepad and where do I get it? A: Notepad is the default Windows text editor. On most Win9X systems, click your Start button and choose Programs then Accessories. It should be a little blue notebook. For our purposes, ANY text editor will do nicely. You can go to most any shareware/freeware site and pick yourself up a zippy new text editor, many of them being free. For the time being though, Notepad will do quite nicely. Right from the outset, you will be doing yourself a very big favor if you toddle on over to www.notetab.com and pick yourself up a free copy of NoteTab Light (Win95/98). It can be used as a simple Notepad replacement, or with a little fiddling, can be one of the most powerful text manipulation tools in the world. I give this wonderful free editor my personal "two-thumbs-up" and wholeheartedly encourage you to try it out and and learn how to use it. I've tried quite a few editors and this is what I use every day. One thing you should avoid though is to use a word processor for authoring your HTML docs. For one, these are not very well suited for HTML authoring and two, unless you know what you're doing, your file won't save as a plain text html file, it will probably save in the word processor format and won't render in a browser.

And one more thing (again) at least while you're learning... put away Composer, put away Front Page, put away Sooper Dooper Web Page Cruncher. Just follow along with Notepad. Trust me. Would I lie? ;-)

With that out of the way I can say with confidence that you are less than 5 minutes away from making your first web page! So... off to Lesson 1. I got a big old smile on my face when I found out that this humble tutorial earned the coveted 5 star rating from the ZDnet Software Library.

NEXT >>
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor

v 4.1

by Joe Barta Professional Web Design

Also available: Form Tutor, Frames Tutor and for the novice - So, you want to make a Web Page! This tutorial is one in a series of WebTutor tutorials and is also available for download as a zip file. Learn in the comfort and privacy of your own home. No salesman will visit. Print version now available - Get the WebTutor book! Lots of good stuff... Software discounts, Pre-release of Javascript Tutor, Free Clipart, etc.

Hello. My name is Joe and I'm going to give you a few simple lessons on how to make tables for your web documents. You might be thinking that a table is simply one of these but if you've ever seen some of them fancy-like web pages you might be interested to find out that they make good use of the <TABLE> tags! Just to illustrate, here is the same page with a gray background and the table BORDERs turned on. The whole mess basically has only 3 tags... <TABLE> The main tag. Used to tell the browser "this is a table", along with some attributes like size, border width and a few other things. <TR> TableRow defines a horizontal row of <TD> (TableData) cells. <TD> Specifies an indiviual block or cell in a table row. To paraphrase: A table is made up of rows which in turn are made up of cells...

<--This---

----is---cell

-----a----

---Table-cell

----Row--> cell

Well, that's tables in a nutshell. You are now ready to make some tables! Now's a good time to stress that

if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags. If you rely on the so-called "table wizards" in the "easy as pie html editors" out there, you will have greatly limited flexibilty, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are listed here. These editors will make your html coding easier. They don't attempt to do it for you. NEXT >>
Lessons: Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor

v 4.1

by Joe Barta Professional Web Design

Also available: Table Tutor, Frames Tutor and for the novice - So, you want to make a Web Page! This tutorial is one in a series of WebTutor tutorials and is also available for download as a zip file. Learn in the comfort and privacy of your own home. No salesman will visit. Print version now available - Get the WebTutor book! Lots of good stuff... Software discounts, Pre-release of Javascript Tutor, Free Clipart, etc.

Hello. My name is Joe and I'm going to show you how to add interactivity to your web documents by way of the <FORM> tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever. The basic construction of a html form is this... <FORM> <INPUT> <INPUT> </FORM> begin a form ask for information in one of several different ways... ...there can be as many input areas as you wish end a form

That's html forms in a nutshell. You are now ready to make some forms! Now's a good time to stress that if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags. If you rely on the so-called "form wizards" in the "easy as pie html editors" out there, you will have greatly limited flexibilty, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are listed here. These editors will make your html coding easier. They don't attempt to do it for you.
Although this tutorial is not "optimised" for any particular browser, things may be rendered a little differently depending on your browser of choice.

NEXT >>
Lessons: Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Frames Tutor

v 4.1

by Joe Barta Professional Web Design

Also available: Form Tutor, Table Tutor and for the novice - So, you want to make a Web Page! This tutorial is one in a series of WebTutor tutorials and is also available for download as a zip file. Learn in the comfort and privacy of your own home. No salesman will visit. Print version now available - Get the WebTutor book! Lots of good stuff... Software discounts, Pre-release of Javascript Tutor, Free Clipart, etc.

Hello. My name is Joe and I'm going to give you a few simple lessons on how to make frames for your web documents. The intelligent use of frames can give your pages a cleaner look and make them easier to navigate. Note the operative word is intelligent. Nuff said? Dividing a page into frames is actually quite simple. The basic concept goes like this: Each frame is a regular, complete html document. If you wanted to divide your page into 2 side by side frames, then you would put one complete html document in the left frame and another complete html document in the right frame. In addition you need to write a third html document. This MASTER PAGE (I'm coining a new phrase here folks) contains the <FRAME> tags that specify what goes where. As a matter of fact, that's about its only function. There are only two main frame tags to contend with: <FRAMESET> and <FRAME>. The easiest way to explain them is to have you dive right in and start making some frames. I guarantee that in 90 minutes you'll be a feel-no-pain framing machine! Now's a good time to stress that if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags. If you rely on the so-called "frame wizards" in the "easy as pie html editors" out there, you will have greatly limited flexibilty, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are listed here. These editors will make your html coding easier. They don't attempt to do it for you. NEXT >>
Lessons: Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Templates

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

This is my Kewl Homepage. It's gonna have all kinds a neat links and other stuff! Its got some frames too! My page is UNDER CONSTRUCTION!

This space empty for now

I found this, it looks like one of my budz

To go to his homepage CLICK HERE!

WELCOME TO MY HOME PAGE!
This is my page and I'm putting lotznlotz of really cool links and pictures and linx to cool places on the web and pictures of my cool friends but only the cool ones cuz nobody wants to look at a page with a bunch of dorks so you'll only find some of my friends here and I almost forgot I gotta give credit to one of my friends who told me that if you put your whole page in a blink tag your whole page BLINKS!!! This page is under serious construction

Joe's short list of free HTML Editors
Before spending your money on one of those big fancy promise you the world and hope you buy it before you figure out it's not all that html editors, try one of these. They're all very good and absolutely free*. Oh, what the heck - try a couple. Play with the toys.

Notetab Lite
(My personal favorite)

Arachnophilia
(Highly recommended)

First Page 2000 CodeEdit Web-O-Rama xSite
(Note - IE4 is required in order to take advantage of certain features.)

Homesite v1.2
This link points to my copy of an old freeware version. The new and definitely improved shareware version is here.

HTML Pad
This link points to my copy of an old freeware version. A newer shareware version is available here.

* At least they were absolutely free when I put together this list.

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc

Print version available - Get the WebTutor book!

WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 1

Just like 'follow the bouncing ball', power up Notepad and start with this... <HTML> </HTML> Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as talking to the browser, or better yet giving it instructions. What you have just told the browser (more or less) is this is the start of a HTML document (<HTML>) and this is the end of a HTML document (</HTML>). Now we need to put some stuff into it.

Every HTML document needs a pair of HEAD tags. <HTML> <HEAD> </HEAD> </HTML>

The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags. <HTML> <HEAD> <TITLE></TITLE> </HEAD> </HTML>

And the bulk of the page is going to be within the BODY tags. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>

Oh, and one more thing, give your document a title, and put something in the body. <HTML> <HEAD> <TITLE>My big ole bad page!</TITLE> </HEAD> <BODY> Hello Joe! </BODY> </HTML> Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do... In your Notepad window click File then Save As. You will be presented with a dialog box. Make a new folder by clicking this -> Name it whatever you want. Then double click on it to open it up. Where it says File name: type in page1.html Where it says Save as type: make sure it says All Files(*.*) Hit return and you're done!

Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Netscape, the file you made should look something like this...

(if your icon is a little different, it's no biggie)

You should be able to double click on it now and see the results of your handiwork. Next order of business is to start putting some neato stuff in your page. The best way to use this tutorial is to run Notepad and two instances of Netscape. One Netscape window containing this tutorial and the other containing your new page. Just toggle between the three windows. If you are looking at this lesson in Netscape right now, you can open a second instance of Netscape in one of two ways- 1) Find the icon of the html file you just made (page1.html) and double click on it. Or2) In Netscape, click on File/Open File In Browser and browse to the file (page1.html). Two quick points before we go on to lesson 2. One, what you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. And two, the document title is what appears at the very top of the browser window. << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Hello Joe!

So, you want to make a Web Page!

Lesson 2

To keep things a little cleaner I am only going to write what is in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags. Needless to say, keep these in your document. <BODY> </BODY>

Type something really cool. <BODY> Something really cool </BODY>

Something really cool

Whenever you make a change to your document, just save it, then hit the Reload button on your browser. In some instances just hitting the reload button doesn't quite do the trick... in that case hit Reload while

holding down the SHIFT key.

I think the first thing we are going to learn is how to change background colors. <BODY BGCOLOR="#CCFFCC"> Something really cool </BODY>

Something really cool

CCFFCC is computerese for light green. Here are a few more. In 256 color mode Netscape dithers all images to these colors. Additionally if a background color is specified that is not one of these colors, then Netscape will usually pick the closest of these colors to use. Although it's not overly important to understand how browsers and colors work together at this point in time, you may want to stop back after the lessons and learn about Netscape's infamous 216 colors.

You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.) <BODY BACKGROUND="swirlies.gif"> Something really cool </BODY>

Here's the background image

In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document (page1.html). The easiest way to do this is to right click on the swirlies image above and choose Save Image As (or some variant thereof). Browse to wherever you put page1.html and save the image there. Later we'll get into this stuff in a little more detail.

It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this... <BODY BACKGROUND="bluebar.gif"> Something really cool </BODY>

Here's the background image
(It's actually 1700x4, but I have compressed it here to 560x4 so it will fit on everyones screen)

FAQ: I've seen pages where the background is fixed and the page just scrolls over it. How can I do that? A: Simple... add BGPROPERTIES=FIXED to the BODY tag... <BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED> Keep in mind this little doodad is Internet Explorer specific. That is, only people using Internet Explorer or IE based browsers will be able to see it. Here is an example.

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page! WEB SAFE COLOR CHART
This file is 41Kb and fairly complicated for the browser to display, so give it a few seconds to load.

Netscape's 216 colors:
For a much larger chart containing the 216 web-safe colors plus about 1300 more, go here. For a GIF image of the 216 color chart click here. For an explanation of where all these colors come from, go here. For a zip file containing BOTH charts click here (14 Kb). (Don't you just hate a bunch of links that tell you to click here, click here and click here?)

330000 333300 336600 339900 33CC00 33FF00 66FF00 66CC00 669900 666600 663300 660000 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

330033 333333 336633 339933 33CC33 33FF33 66FF33 66CC33 669933 666633 663333 660033 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

330066 333366 336666 339966 33CC66 33FF66 66FF66 66CC66 669966 666666 663366 660066 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

330099 333399 336699 339999 33CC99 33FF99 66FF99 66CC99 669999 666699 663399 660099 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 66FFCC 66CCCC 6699CC 6666CC 6633CC 6600CC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 66FFFF 66CCFF 6699FF 6666FF 6633FF 6600FF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 99FFFF 99CCFF 9999FF 9966FF 9933FF 9900FF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF

0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 99FFCC 99CCCC 9999CC 9966CC 9933CC 9900CC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC

000099 003399 006699 009999 00CC99 00FF99 99FF99 99CC99 999999 996699 993399 990099 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99

000066 003366 006666 009966 00CC66 00FF66 99FF66 99CC66 999966 996666 993366 990066 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66

000033 003333 006633 009933 00CC33 00FF33 99FF33 99CC33 999933 996633 993333 990033 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33

000000 003300 006600 009900 00CC00 00FF00 99FF00 99CC00 999900 996600 993300 990000 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00

These are the grays:

000000 333333 666666 999999 CCCCCC FFFFFF

These are the closest (more or less) to the 16 basic Windows colors:

000000 000099 009900 009999 990000 990099 999900 CCCCCC 999999 0000FF 00FF00 00FFFF FF0000 FF00FF FFFF00 FFFFFF

1536 Color Chart >>
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page! EXPANDED COLOR CHART
This file is 172Kb and very complicated for the browser to display, so give it several seconds to load. For some users this file is so fat and complex, it may choke your poor system. If that happens, just hit your back button and back on outta here. (For whatever reason, IE seemed to be able to handle it better than Netscape.) Also keep in mind, you won't see ALL 1500+ colors unless you are running in HI-color mode or greater.

1536 colors plus several grays:
You should be running in Hi-Color (64,000 colors) mode or greater for your browser to be able to distinguish all these different colors. For a smaller chart containing the 216 web-safe colors only, go here. For an explanation of where all these colors come from, go here. For a zip file containing BOTH color charts click here. The 216 "web-safe" colors are in BOLD

330000 331100 332200 333300 334400 335500 336600 337700 338800 339900 33AA00 33BB00 33CC00 33DD00 33EE00 33FF00 66FF00 66EE00 66DD00 66CC00 66BB00 66AA00 669900 668800 667700 666600 665500 664400 663300 662200 661100 660000 FF0000 FF1100 FF2200 FF3300 FF4400 FF5500 FF6600 FF7700 FF8800 FF9900 FFAA00 FFBB00 FFCC00 FFDD00 FFEE00 FFFF00

330011 331111 332211 333311 334411 335511 336611 337711 338811 339911 33AA11 33BB11 33CC11 33DD11 33EE11 33FF11 66FF11 66EE11 66DD11 66CC11 66BB11 66AA11 669911 668811 667711 666611 665511 664411 663311 662211 661111 660011 FF0011

FF1111 FF2211 FF3311

FF4411 FF5511 FF6611

FF7711 FF8811 FF9911

FFAA11 FFBB11 FFCC11

FFDD11 FFEE11 FFFF11

330022 331122 332222 333322 334422 335522 336622 337722 338822 339922 33AA22 33BB22 33CC22 33DD22 33EE22 33FF22 66FF22 66EE22 66DD22 66CC22 66BB22 66AA22 669922 668822 667722 666622 665522 664422 663322 662222 661122 660022 FF0022

FF1122 FF2222 FF3322

FF4422 FF5522 FF6622

FF7722 FF8822 FF9922

FFAA22 FFBB22 FFCC22

FFDD22 FFEE22 FFFF22

330033 331133 332233 333333 334433 335533 336633 337733 338833 339933 33AA33 33BB33 33CC33 33DD33 33EE33 33FF33 66FF33 66EE33 66DD33 66CC33 66BB33 66AA33 669933 668833 667733 666633 665533 664433 663333 662233 661133 660033 FF0033 FF1133 FF2233 FF3333 FF4433 FF5533 FF6633 FF7733 FF8833 FF9933 FFAA33 FFBB33 FFCC33 FFDD33 FFEE33 FFFF33

330044 331144 332244 333344 334444 335544 336644 337744 338844 339944 33AA44 33BB44 33CC44 33DD44 33EE44 33FF44 66FF44 66EE44 66DD44 66CC44 66BB44 66AA44 669944 668844 667744 666644 665544 664444 663344 662244 661144 660044 FF0044

FF1144 FF2244 FF3344

FF4444 FF5544 FF6644

FF7744 FF8844 FF9944

FFAA44 FFBB44 FFCC44

FFDD44 FFEE44 FFFF44

330055 331155 332255 333355 334455 335555 336655 337755 338855 339955 33AA55 33BB55 33CC55 33DD55 33EE55 33FF55 66FF55 66EE55 66DD55 66CC55 66BB55 66AA55 669955 668855 667755 666655 665555 664455 663355 662255 661155 660055 FF0055

FF1155 FF2255 FF3355

FF4455 FF5555 FF6655

FF7755 FF8855 FF9955

FFAA55 FFBB55 FFCC55

FFDD55 FFEE55 FFFF55

330066 331166 332266 333366 334466 335566 336666 337766 338866 339966 33AA66 33BB66 33CC66 33DD66 33EE66 33FF66 66FF66 66EE66 66DD66 66CC66 66BB66 66AA66 669966 668866 667766 666666 665566 664466 663366 662266 661166 660066 FF0066 FF1166 FF2266 FF3366 FF4466 FF5566 FF6666 FF7766 FF8866 FF9966 FFAA66 FFBB66 FFCC66 FFDD66 FFEE66 FFFF66

330077 331177 332277 333377 334477 335577 336677 337777 338877 339977 33AA77 33BB77 33CC77 33DD77 33EE77 33FF77 66FF77 66EE77 66DD77 66CC77 66BB77 66AA77 669977 668877 667777 666677 665577 664477 663377 662277 661177 660077 FF0077

FF1177 FF2277 FF3377

FF4477 FF5577 FF6677

FF7777 FF8877 FF9977

FFAA77 FFBB77 FFCC77

FFDD77 FFEE77 FFFF77

330088 331188 332288 333388 334488 335588 336688 337788 338888 339988 33AA88 33BB88 33CC88 33DD88 33EE88 33FF88 66FF88 66EE88 66DD88 66CC88 66BB88 66AA88 669988 668888 667788 666688 665588 664488 663388 662288 661188 660088 FF0088

FF1188 FF2288 FF3388

FF4488 FF5588 FF6688

FF7788 FF8888 FF9988

FFAA88 FFBB88 FFCC88

FFDD88 FFEE88 FFFF88

330099 331199 332299 333399 334499 335599 336699 337799 338899 339999 33AA99 33BB99 33CC99 33DD99 33EE99 33FF99 66FF99 66EE99 66DD99 66CC99 66BB99 66AA99 669999 668899 667799 666699 665599 664499 663399 662299 661199 660099 FF0099 FF1199 FF2299 FF3399 FF4499 FF5599 FF6699 FF7799 FF8899 FF9999 FFAA99 FFBB99 FFCC99 FFDD99 FFEE99 FFFF99

3300AA 3311AA 3322AA 3333AA 3344AA 3355AA 3366AA 3377AA 3388AA 3399AA 33AAAA 33BBAA 33CCAA 33DDAA 33EEAA 33FFAA 66FFAA 66EEAA 66DDAA 66CCAA 66BBAA 66AAAA 6699AA 6688AA 6677AA 6666AA 6655AA 6644AA 6633AA 6622AA 6611AA 6600AA FF00AA FF11AA FF22AA FF33AA FF44AA FF55AA FF66AA FF77AA FF88AA FF99AA FFAAAA FFBBAA FFCCAA FFDDAA FFEEAA FFFFAA

3300BB 3311BB 3322BB 3333BB 3344BB 3355BB 3366BB 3377BB 3388BB 3399BB 33AABB 33BBBB 33CCBB 33DDBB 33EEBB 33FFBB 66FFBB 66EEBB 66DDBB 66CCBB 66BBBB 66AABB 6699BB 6688BB 6677BB 6666BB 6655BB 6644BB 6633BB 6622BB 6611BB 6600BB FF00BB FF11BB FF22BB FF33BB FF44BB FF55BB FF66BB FF77BB FF88BB FF99BB FFAABB FFBBBB FFCCBB FFDDBB FFEEBB FFFFBB

3300CC 3311CC 3322CC 3333CC 3344CC 3355CC 3366CC 3377CC 3388CC 3399CC 33AACC 33BBCC 33CCCC 33DDCC 33EECC 33FFCC 66FFCC 66EECC 66DDCC 66CCCC 66BBCC 66AACC 6699CC 6688CC 6677CC 6666CC 6655CC 6644CC 6633CC 6622CC 6611CC 6600CC FF00CC FF11CC FF22CC FF33CC FF44CC FF55CC FF66CC FF77CC FF88CC FF99CC FFAACC FFBBCC FFCCCC FFDDCC FFEECC FFFFCC

3300DD 3311DD 3322DD 3333DD 3344DD 3355DD 3366DD 3377DD 3388DD 3399DD 33AADD 33BBDD 33CCDD 33DDDD 33EEDD 33FFDD 66FFDD 66EEDD 66DDDD 66CCDD 66BBDD 66AADD 6699DD 6688DD 6677DD 6666DD 6655DD 6644DD 6633DD 6622DD 6611DD 6600DD FF00DD FF11DD FF22DD FF33DD FF44DD FF55DD FF66DD FF77DD FF88DD FF99DD FFAADD FFBBDD FFCCDD FFDDDD FFEEDD FFFFDD

3300EE 3311EE 3322EE 3333EE 3344EE 3355EE 3366EE 3377EE 3388EE 3399EE 33AAEE 33BBEE 33CCEE 33DDEE 33EEEE 33FFEE 66FFEE 66EEEE 66DDEE 66CCEE 66BBEE 66AAEE 6699EE 6688EE 6677EE 6666EE 6655EE 6644EE 6633EE 6622EE 6611EE 6600EE FF00EE FF11EE FF22EE FF33EE FF44EE FF55EE FF66EE FF77EE FF88EE FF99EE FFAAEE FFBBEE FFCCEE FFDDEE FFEEEE FFFFEE

3300FF 3311FF 3322FF 3333FF 3344FF 3355FF 3366FF 3377FF 3388FF 3399FF 33AAFF 33BBFF 33CCFF 33DDFF 33EEFF 33FFFF 66FFFF 66EEFF 66DDFF 66CCFF 66BBFF 66AAFF 6699FF 6688FF 6677FF 6666FF 6655FF 6644FF 6633FF 6622FF 6611FF 6600FF FF00FF FF11FF FF22FF FF33FF FF44FF FF55FF FF66FF FF77FF FF88FF FF99FF FFAAFF FFBBFF FFCCFF FFDDFF FFEEFF FFFFFF

0000FF 0011FF 0022FF 0033FF 0044FF 0055FF 0066FF 0077FF 0088FF 0099FF 00AAFF 00BBFF 00CCFF 00DDFF 00EEFF 00FFFF 99FFFF 99EEFF 99DDFF 99CCFF 99BBFF 99AAFF 9999FF 9988FF 9977FF 9966FF 9955FF 9944FF 9933FF 9922FF 9911FF 9900FF CC00FF CC11FF CC22FF CC33FF CC44FF CC55FF CC66FF CC77FF CC88FF CC99FF CCAAFF CCBBFF CCCCFF CCDDFF CCEEFF CCFFFF

0000EE 0011EE 0022EE 0033EE 0044EE 0055EE 0066EE 0077EE 0088EE 0099EE 00AAEE 00BBEE 00CCEE 00DDEE 00EEEE 00FFEE 99FFEE 99EEEE 99DDEE 99CCEE 99BBEE 99AAEE 9999EE 9988EE 9977EE 9966EE 9955EE 9944EE 9933EE 9922EE 9911EE 9900EE CC00EE CC11EE CC22EE CC33EE CC44EE CC55EE CC66EE CC77EE CC88EE CC99EE CCAAEE CCBBEE CCCCEE CCDDEE CCEEEE CCFFEE

0000DD 0011DD 0022DD 0033DD 0044DD 0055DD 0066DD 0077DD 0088DD 0099DD 00AADD 00BBDD 00CCDD 00DDDD 00EEDD 00FFDD 99FFDD 99EEDD 99DDDD 99CCDD 99BBDD 99AADD 9999DD 9988DD 9977DD 9966DD 9955DD 9944DD 9933DD 9922DD 9911DD 9900DD CC00DD CC11DD CC22DD CC33DD CC44DD CC55DD CC66DD CC77DD CC88DD CC99DD CCAADD CCBBDD CCCCDD CCDDDD CCEEDD CCFFDD

0000CC 0011CC 0022CC 0033CC 0044CC 0055CC 0066CC 0077CC 0088CC 0099CC 00AACC 00BBCC 00CCCC 00DDCC 00EECC 00FFCC 99FFCC 99EECC 99DDCC 99CCCC 99BBCC 99AACC 9999CC 9988CC 9977CC 9966CC 9955CC 9944CC 9933CC 9922CC 9911CC 9900CC CC00CC CC11CC CC22CC CC33CC CC44CC CC55CC CC66CC CC77CC CC88CC CC99CC CCAACC CCBBCC CCCCCC CCDDCC CCEECC CCFFCC

0000BB 0011BB 0022BB 0033BB 0044BB 0055BB 0066BB 0077BB 0088BB 0099BB 00AABB 00BBBB 00CCBB 00DDBB 00EEBB 00FFBB 99FFBB 99EEBB 99DDBB 99CCBB 99BBBB 99AABB 9999BB 9988BB 9977BB 9966BB 9955BB 9944BB 9933BB 9922BB 9911BB 9900BB CC00BB CC11BB CC22BB CC33BB CC44BB CC55BB CC66BB CC77BB CC88BB CC99BB CCAABB CCBBBB CCCCBB CCDDBB CCEEBB CCFFBB

0000AA 0011AA 0022AA 0033AA 0044AA 0055AA 0066AA 0077AA 0088AA 0099AA 00AAAA 00BBAA 00CCAA 00DDAA 00EEAA 00FFAA 99FFAA 99EEAA 99DDAA 99CCAA 99BBAA 99AAAA 9999AA 9988AA 9977AA 9966AA 9955AA 9944AA 9933AA 9922AA 9911AA 9900AA CC00AA CC11AA CC22AA CC33AA CC44AA CC55AA CC66AA CC77AA CC88AA CC99AA CCAAAA CCBBAA CCCCAA CCDDAA CCEEAA CCFFAA

000099 001199 002299 003399 004499 005599 006699 007799 008899 009999 00AA99 00BB99 00CC99 00DD99 00EE99 00FF99 99FF99 99EE99 99DD99 99CC99 99BB99 99AA99 999999 998899 997799 996699 995599 994499 993399 992299 991199 990099 CC0099 CC1199 CC2299 CC3399 CC4499 CC5599 CC6699 CC7799 CC8899 CC9999 CCAA99 CCBB99 CCCC99 CCDD99 CCEE99 CCFF99

000088 001188 002288 003388 004488 005588 006688 007788 008888 009988 00AA88 00BB88 00CC88 00DD88 00EE88 00FF88 99FF88 99EE88 99DD88 99CC88 99BB88 99AA88 999988 998888 997788 996688 995588 994488 993388 992288 991188 990088 CC0088 CC1188 CC2288 CC3388 CC4488 CC5588 CC6688 CC7788 CC8888 CC9988 CCAA88 CCBB88 CCCC88 CCDD88 CCEE88 CCFF88

000077 001177 002277 003377 004477 005577 006677 007777 008877 009977 00AA77 00BB77 00CC77 00DD77 00EE77 00FF77 99FF77 99EE77 99DD77 99CC77 99BB77 99AA77 999977 998877 997777 996677 995577 994477 993377 992277 991177 990077 CC0077 CC1177 CC2277 CC3377 CC4477 CC5577 CC6677 CC7777 CC8877 CC9977 CCAA77 CCBB77 CCCC77 CCDD77 CCEE77 CCFF77

000066 001166 002266 003366 004466 005566 006666 007766 008866 009966 00AA66 00BB66 00CC66 00DD66 00EE66 00FF66 99FF66 99EE66 99DD66 99CC66 99BB66 99AA66 999966 998866 997766 996666 995566 994466 993366 992266 991166 990066 CC0066 CC1166 CC2266 CC3366 CC4466 CC5566 CC6666 CC7766 CC8866 CC9966 CCAA66 CCBB66 CCCC66 CCDD66 CCEE66 CCFF66

000055 001155 002255 003355 004455 005555 006655 007755 008855 009955 00AA55 00BB55 00CC55 00DD55 00EE55 00FF55 99FF55 99EE55 99DD55 99CC55 99BB55 99AA55 999955 998855 997755 996655 995555 994455 993355 992255 991155 990055 CC0055 CC1155 CC2255 CC3355 CC4455 CC5555 CC6655 CC7755 CC8855 CC9955 CCAA55 CCBB55 CCCC55 CCDD55 CCEE55 CCFF55

000044 001144 002244 003344 004444 005544 006644 007744 008844 009944 00AA44 00BB44 00CC44 00DD44 00EE44 00FF44 99FF44 99EE44 99DD44 99CC44 99BB44 99AA44 999944 998844 997744 996644 995544 994444 993344 992244 991144 990044 CC0044 CC1144 CC2244 CC3344 CC4444 CC5544 CC6644 CC7744 CC8844 CC9944 CCAA44 CCBB44 CCCC44 CCDD44 CCEE44 CCFF44

000033 001133 002233 003333 004433 005533 006633 007733 008833 009933 00AA33 00BB33 00CC33 00DD33 00EE33 00FF33 99FF33 99EE33 99DD33 99CC33 99BB33 99AA33 999933 998833 997733 996633 995533 994433 993333 992233 991133 990033 CC0033 CC1133 CC2233 CC3333 CC4433 CC5533 CC6633 CC7733 CC8833 CC9933 CCAA33 CCBB33 CCCC33 CCDD33 CCEE33 CCFF33

000022 001122 002222 003322 004422 005522 006622 007722 008822 009922 00AA22 00BB22 00CC22 00DD22 00EE22 00FF22 99FF22 99EE22 99DD22 99CC22 99BB22 99AA22 999922 998822 997722 996622 995522 994422 993322 992222 991122 990022 CC0022 CC1122 CC2222 CC3322 CC4422 CC5522 CC6622 CC7722 CC8822 CC9922 CCAA22 CCBB22 CCCC22 CCDD22 CCEE22 CCFF22

000011 001111 002211 003311 004411 005511 006611 007711 008811 009911 00AA11 00BB11 00CC11 00DD11 00EE11 00FF11 99FF11 99EE11 99DD11 99CC11 99BB11 99AA11 999911 998811 997711 996611 995511 994411 993311 992211 991111 990011 CC0011 CC1111 CC2211 CC3311 CC4411 CC5511 CC6611 CC7711 CC8811 CC9911 CCAA11 CCBB11 CCCC11 CCDD11 CCEE11 CCFF11

000000 001100 002200 003300 004400 005500 006600 007700 008800 009900 00AA00 00BB00 00CC00 00DD00 00EE00 00FF00 99FF00 99EE00 99DD00 99CC00 99BB00 99AA00 999900 998800 997700 996600 995500 994400 993300 992200 991100 990000 CC0000 CC1100 CC2200 CC3300 CC4400 CC5500 CC6600 CC7700 CC8800 CC9900 CCAA00 CCBB00 CCCC00 CCDD00 CCEE00 CCFF00

These are the grays:

000000 111111 222222 333333 444444 555555 666666 777777 888888 999999 AAAAAA BBBBBB CCCCCC DDDDDD EEEEEE FFFFFF << 216 Color Chart
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Netscape's 216 colors
Just a quick note: The topics covered below are not exceptionally important to making web pages. A perfectly good web page can be made without ever learning about this stuff. It is just a little sidetrack that you might say is for somewhat "advanced" HTML students. If you are just learning HTML authoring, I would recommend going back to the tutorial and not cluttering your head with this stuff. Believe me, you have plenty to learn as it is. Once you have a few basic skills under your belt, you can come back here and learn about some of the "finer points". Have you ever been surfing along and noticed that some images look pretty crappy? Like all full of speckles? If so, then you have fallen victim to the CLUT. Now, before I go any further, let me warn you that I'm really not all that much of a computer geek, so I can only explain things as I understand them. That means I know what I'm talking about... most of the time. That said, let me try to tell you about the how's and why's of computer displays and colors... as I understand it. * * *

Most computers can run in one of 3 (maybe more) color modes1. 256 color 2. high color (64,000 colors) 3. and true color (16.7 million colors) If you are in true color mode your computer is configured to display up to 16.7 million distinct colors. That gives you a couple million shades of red alone. It's kind of nice because feathered edges look feathered, photographs look fantastic and nice backgrounds actually look nice! There is a price to pay however. Your poor computer has to work extra hard trying to display everything. Consequently things tend to work a little slower and often a little jerkier. But I gotta admit, images look very good. If you want to give your processor a bit of a break, you can set your computer to display 64,000 colors rather than 16.7 million. This is the high color mode. Although there is a huge difference between 16.7 million and 64,000 to your computer, the difference is hardly noticeable to your

average run-of-the-mill human. You get nice looking images, nicely feathered edges and there's not much in the way of jerkiness or slowness in your display. Now if your like me, and super high image quality takes a back seat to speed, and you want your display to take up as little resources as possible, or if you have an older computer, you putz around in 256 color mode. All this means is your computer says "Listen, I know that there are 16.7 million colors. But what I'm going to do is only use 256 at a time. If I have to display an image that technically has 80,000 colors in it, I'm just going to try and find the closest 256 colors and just use them. Deal with it." Now let's take that one step further. Let's suppose your computer is in 256 color mode and you're running Netscape. Netscape says, "I am taking over your colors. Since you only have 256 colors to play with, I am assigning a permanent value to 216 of them. The remaining 40 can be used any way you want." The end result is Netscape dithers all images to those 216 colors.

Dithering is when your computer takes a couple colors it has and tries to blend them to make a color that it doesn't have. This "dithering" is why images are sometimes speckled.

Why does it do this?? Let's suppose you have a web page with two pictures on it. One picture contains 150 distinct colors. The second picture contains another 150 distinct colors. If you display them together then all of a sudden your computer has to deal with 300 separate colors, not to mention the colors for your taskbar and buttons, etc. This throws a serious monkeywrench into the 256 color idea. So what Netscape does is say "Here are the 216 colors we will use for ALL images. Everything gets dithered to these colors." Netscape's 216 colors

This group of colors is called a CLUT. As far as I know, all browsers have one. However, I don't know if all browsers use the same colors in their clut, or how colors and cluts and such work on

operating systems other than Windows. (Hey, I warned you that I didn't know everything)
About Netscape's Colors (part 2) >>
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Gradient 1 - 1021 colors

Gradient 2 - 66 colors

If both of the above images look about the same, then you are running a 256 color display and Netscape is dithering the image on the left to it's 216 colors. If the image on the left looks smooth but the image on the right looks all speckled, then you are running a high or true color display. The image on the left is a few simple gradients, saved in a low compression jpg format. In true color mode the gradient is very smooth and in high color mode it is still quite smooth (although the number of distinct colors falls to 419). The image on the right is a screen capture of the left image through 256 color mode. I know its tempting to say phooey on anyone using only 256 colors, but keep in mind that a lot of people do just that. If your image is a photograph in jpg format there's not too much you can do. Photographs are simply going to look a little worse to those running 256 colors. Photo 1 - 20186 colors Photo 2 - 61 colors

Once again, if the images look about the same then you are in 256 color mode. If the image on the left looks significantly better than the image on the right then you are in high or true color mode. If this is the case then the image on the right is how people running 256 colors will see your picture. But, like I said, with photographs, there's not a whole heck of alot you can do. It's a very similar situation using gif images. Even though a gif image can only contain 256 colors, if they are not Netscape's colors, the image will get dithered... ...except when you view a single image through the browser. By that I mean not an image in a web page, but viewing the image directly. As an exercise, right click on the image Ball 1 and choose View Image (Netscape only). What you will then see is the browser displaying the image directly and not by way of a web page. Since the browser knows that no other image will be coming down the pike, it will relax it's 216

color rule and allow your computer to display whatever 256 colors it wants to. Ball 1 - 232 colors Ball 2 - 62 colors

One area where we can make a difference, is in drawings. Anything that doesn't contain a lot of gradients. Below are a couple of good examples. Flag 1 - 18 colors Flag 2 - 28 colors Flag 3 - 9 colors

Button 1 - 18 colors

Button 2 - 12 colors

Button 3 - 5 colors

We have Image 1 and Image 2 just like the ones before. (depending on your browser and it's configuration). But now we have this third image. The third one should look just fine to everyone. It is nice and smooth even at 256 colors.
<< About Netscape's Colors (part 1) About Netscape's Colors (part 3) >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

I did this by using a Netscape pallet in my graphics editor. You can do this too. If you load this image...

...into most any graphics editor you can make a color pallet from it. (Consult your graphic editor's instructions if you don't know how to do this). Then you're ready to go! You can import an existing picture and substitute the closest Netscape color for all the colors in the image. As you can see from the images above, the results are well worth the two minutes (at most) it takes to do this. If you are starting a new image, you can start with the Netscape colors. If your major areas are already done in Netscape's colors, and if you switch to 16.7 million colors for some further editing, when you go to substitute Netscape's colors back in, your image will look pretty much the way you intended. Plus it will look that way to everyone. If you want to delve a little further into Netscape's browser clut, here's how they came up with the 216 colors. In our everyday life we use a base 10 number system. We use the following numbers... 0-1-2-3-4-5-6-7-8-9 Somewhere along the line, computer people decided that certain things would be easier to do if they used a base 16 number system... 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F Since we don't have a unique symbol for 10, 11, 12 etc, we use letters to represent those values. Below are both number systems counting to our 50...

0 1 2 27 28 50 0 1 2 1B 1C 32

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31

So when someone talks about a "hex code" or "hexadecimal number" or if you see cryptic color codes like 09EC0A, CCFFCC, 00AACC, etc., this is what they're talking about and where it comes from. Taking it a little further, your computer understands colors in terms of red, green and blue values... RED - GREEN - BLUE or R-G-B Each of those can have a value from 0 to 255. 0 being the absence of color, 255 being full color. Using that scale, we get the following values... RED= 255-0-0 GREEN= 0-255-0 BLUE= 0-0-255 BLACK= 0-0-0 WHITE= 255-255-255 Since we have 3 colors, each with a value that can range from 0 to 255 we have 16,777,216 possible color combinations (256 ³). So, that's how we get 16.7 million colors. If we replace the decimal number with it's hexadecimal equivalent we start to get something that looks a little more like those "hex codes". RED= FF-0-0 GREEN= 0-FF-0 BLUE= 0-0-FF BLACK= 0-0-0 WHITE= FF-FF-FF If we then use 00 for 0, and 01 for 1, etc., and if we get rid of the dashes(-), we then got ourselves some genuwine color codes!

RED= FF0000 GREEN= 00FF00 BLUE= 0000FF BLACK= 000000 WHITE= FFFFFF Now, how did Netscape go about choosing which colors to use? Rather than using 256 values for each of the three colors, they only use 6. Namely 0, 51, 102, 153, 204 and 255. If we translate those numbers into their hexadecimal equivalents we get 00, 33, 66, 99, CC and FF. Since that is six different values for each of 3 colors, there are 216 possible color combinations (6 ³). If you go back to the color chart you saw before, you'll see a rendering of all these color combinations. One last item. If a person is running a 256 color display and you have chosen a background color that is something other than one of Netscape's 216, then there is a very good chance that Netscape will instead pick the closest match from it's own colors. Sometimes this is not a good thing. I have seen pages where this left the text almost unreadable. Once again, I know it may be tempting to say 'too bad' to those of us in 256 color land. But...as I said before, there are a lot of us. And if your goal is to design smart looking web pages, then you might want to consider spending the extra couple minutes to fine tune your graphics so you look good to everyone. "And that's all I have to say about that." - Forrest Gump 1999 Addendum: Although there are those that still run at 256 colors, various statistics show that that number is diminishing rapidly. The vast majority of internauts surf at high color mode or higher. Still, the 216 color clut is always a good starting point for web graphics.
<< About Netscape's Colors (part 2)
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 3

Let's go back to a plain old screen. <BODY> Something really cool </BODY>

Something really cool

We can make things bold. <BODY> Something really <B>cool</B> </BODY>

Something really cool

What we are (more or less) telling the browser is: at the <B> start making things bold, and at the </B> stop making things bold.

The same principle applies to italics... <BODY> Something <I>really</I> <B>cool</B> </BODY>

Something really cool

...and underlining. <BODY> <U>Something</U> <I>really</I> <B>cool</B> </BODY>

Something really cool

Back again to a plain screen. <BODY> Something really cool </BODY>

Something really cool

We can use tags in combination if we want to. <BODY> Something really <I><B>cool</B></I> </BODY>

Something really cool

This is an example of nested tags. If you are going to use tag pairs in combination (which you will

probably be doing quite a bit), then to avoid confusing the browser, they should be nested, not overlapping. Let me illustrate... <THIS><THAT></THIS></THAT> <THIS><THAT></THAT></THIS> Overlapping tags.... bad Nested tags.... good NEXT >>

<< BACK

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 4

A very useful type of text effect is the mono-spaced font, or Typewriter Text. <BODY> <TT>Something really cool</TT> </BODY>

Something really cool

Each letter uses the same amount of horizontal space... iiiiiiiiii oooooooooo mmmmmmmmmm

This is regular type ->

This is monospaced type ->

iiiiiiiiii oooooooooo mmmmmmmmmm

We can change the fon

t size too... It's pretty easy!

First add the <FONT> tags... <BODY> Something really <FONT>cool</FONT> </BODY> Then specify a SIZE attribute. <BODY> Something really <FONT SIZE=6>cool</FONT> </BODY>

Something really

cool

Fonts come in 7 sizes:

teeny tiny small

regular extra medium large 3 4 5

real big & yelling!
6 7

1

2

Two things I want to discuss now. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. Second point is about defaults. As you probably know, the default value is a value that the browser

assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3. Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times New Roman 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the defaults. Like ARIAL and COMIC SANS. <BODY> Something really <FONT FACE="ARIAL">cool</FONT> </BODY>

Something really cool

The font will only display if your viewer has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is . You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do one of these... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>. For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font. What are some common fonts that are pretty safe bets? Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times Rew Roman Trebuchet MS Verdana To see how various fonts might look through your browser, you might want to use the Handy Dandy Font Viewer. << BACK NEXT >>

Impact!

So, you want to make a Web Page!

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Handy Dandy Font Viewer
The <FONT> tag gives us some flexibility in HTML page design. An interesting use of fonts can add a little zip to a page. This little widget will help you see how different fonts, at different sizes look through your browser.

Remember- a visitor to your page will be able to see your font choices only if they have
that font installed on their computer. Remember also you can specify more than one font. This way you increase the probability that everyone will see your handiwork as you intended it to be seen. Another thing to keep in mind are potential problems with font names. There is no clearinghouse for font names. You may have a font called KewlFont on your system that looks very nice. Someone down the street may make a font of naked lady sillouettes and call it KewlFont. Now let's suppose I have that naked lady font on my system and I look at your page and you've specified KewlFont. Well, all I would see is a bunch of naked ladies. Now, on one level, that's kinda cool. On another level it's a problem. So, be judicious in your use of fonts.

Open the Handy Dandy Font Viewer

FAQ: Can I somehow embed a font or force a download of my font so my visitors automatically get the font I'm using? A: For all practical purposes... no. The only way that they will see the font you specify is if they have that font on their system. There are some emerging web technologies that actually do embed special fonts in a web page, but these are very rarely used, not very widely supported and generally a pain in the butt. You can always offer a simple link to your font. Your visitors can download & install it if they wish.

What's that?? You like the Handy Dandy Font Viewer? You want one of your very own that you can download and use locally whenever you want?? I thought you might. Here you go. (3 Kb)

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Select a font:
DEFAULT

Or type one in:
Set

bgcolor: text color:
FFFFFF 000000 Set

Handy Dandy Font Viewer v1.1
Choose a font via either method above.

So, you want to make a Web Page!

Lesson 5

Now I guess is a good time to yap a bit about syntax. You notice here and there I use quotation marks, these are important. Whenever you have an ATTRIBUTE="value", the value should really be in quotes. It's a good habit to get into. (as you work through these tutorials you'll see it's a habit that I haven't quite developed completely :-) You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than > sign . Someday we will be separated from this kind of coding, but for now we just have to be careful. Another thing is my use of CAPITAL LETTERS for most of my marking up. This is just personal preference. I find that the tags stand out more when using all caps. You could just as well use <font> instead of <FONT>. You can even use <fOnT> if that's what trips yer trigger. HTML is largely case INsensitive. Alright, back to the fun stuff... You can change the font color if you like. <BODY> Something really <FONT COLOR="#FF0000">cool</FONT> </BODY>

Something really cool

We can, of course use more than one ATTRIBUTE in a <FONT> tag... <BODY> Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</ FONT> </BODY>

Something really

cool

Oh boy we're on a roll now! <BODY BGCOLOR="#FFFFFF"> Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U> </BODY>

Something really

cool

I feel the need to point out once again that multiple tags should be nested. <TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3> It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as... <TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2> The fastest way to confuse the browser, not to mention yourself is to overlap the tags... <TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2> (I couldn't think of a way to explain it so I hope the use of examples makes it clear.) << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 6

Another occasionally useful tag worth mentioning are section headings. While they're a little obsolete in today's very graphic web, they are still a handy little thing to have in your toolbox. They come in sizes 16. <H1>Something <H2>Something <H3>Something <H4>Something <H5>Something <H6>Something really really really really really really cool<H1> cool<H2> cool<H3> cool<H4> cool<H5> cool<H6>

Something really cool
Something really cool
Something really cool
Something really cool
Something really cool
Something really cool

A useful heading attribute is ALIGN... fairly self-explanatory. <H2 ALIGN="left">Something really cool<H2> <H2 ALIGN="center">Something really cool<H2> <H2 ALIGN="right">Something really cool<H2>

Something really cool Something really cool Something really cool

One more thing and we'll wrap up this lesson. The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...

Text is usually black Links are usually blue Active link is usually red Visited link is usually purple

You can change these if you need to (notice I said need to). The whole world has gotten used to links being blue. Why confuse us? You can change these defaults for the entire document in the <BODY> tag. <BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF"> Something really cool </BODY>

Something really cool I know that we have not gotten into how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links. You can see that the background is now black and the text is now yellow. Links are now neon green Visited links are darker green And active links are sky blue.

I've written a neat little HTML & JavaScript widget called Color Picker that makes it easy (and kind of fun) to experiment with different color settings. With it, you can not only pick colors, but you can choose different fonts and font sizes, switch to bold or italic, and even easily experiment with different background images. The <BODY> tag is automagically generated for you.

There! You now know just about everything that has to do with mainpulating the text in your document. You can now make Big

red letters or small bold letters You can use other Fonts, or monospaced

fonts. You can even make a roll

ercoaster!

(Coding for the roller coaster is here if you want to see it.) Before we wrap up this lesson, there's one little thing I want to bring to your attention. You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. Your browser may word this a little differently, but nearly all browsers have this facility. So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away. << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

ColorPicker

by Professional Web Design version 1.42

Testing Site:
Press CTL+D to bookmark ColorPicker

This is text Now is the time for all good men to come to the aid of their country. This is a link This is a visited link This is an active link
Background Visited Link Text Link

Active Link

And this is a <TABLE>

Custom BGCOLOR * : #FFFFFF Choose a background image ** (optional):
Browse...

Your <BODY> tag: <BODY BGCOLOR="#ffffff" BACKGROUND="" TEXT="#000000" LINK="#0000ff" VLINK="#663399" ALINK="#ff0000"><!-BODY tag by Color Picker http://junior.apk.net/~jbarta/ weblinks/color_picker/ *** *** *** -->
Add font size & face attributes and bold & italic tags to your documents as needed. Also be sure to move your background image. For those that need it, these topics (and more) are covered in "So, you want to make a Web Page!"

Bold Font Name: Size: 1 2 3

Italic 4 5 6 7

Colors are from Netscape's 216 color pallete. Colors chosen from this picker will look the same to almost everyone. To return to default settings - hit Reload. (You may have to hit SHIFT+Reload to clear form data). Color Picker is available for download in zip format.
* When entering a Custom BGCOLOR you should include the # symbol. Click here for the chart of 1500+ colors. ** The Choose Background Image function is not supported by some versions of IE3 (And possibly others).

For more information on Netscape's 216 color palette go here.

PROFESSIONAL WEB DESIGN

You can even make a r<FONT SIZE=4>o</FONT><FONT SIZE=4>l</FONT><FONT SIZE=5>l</ FONT><FONT SIZE=6>e</FONT><FONT SIZE=7>r</FONT><FONT SIZE=7>c</FONT><FONT SIZE=6>o</FONT><FONT SIZE=5>a</FONT><FONT SIZE=4>s</FONT><FONT SIZE=3>t</ FONT><FONT SIZE=2>e</FONT><FONT SIZE=1>r!</FONT>

So, you want to make a Web Page!

Lesson 7

I think we'll start by learning something about the way a browser works. First an example... <BODY> Something really cool like an icecube! </BODY>

Something really cool like an icecube!

<BODY> Hey! What's going on

here?? </BODY>

Hey! What's going on here??

The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the characters in a steady stream. If you want to start a new line you have to use a line break. <BODY> Hey! <BR>What's <BR>going <BR>on <BR>here?? </BODY>

Hey! What's going on here?? <BR> basically says - start a new line. Can you use the <BR> tag to skip a line? Sure. <BODY> <BR>What's <BR>going <BR> <BR>on <BR>

<BR>here?? </BODY>

What's going on here?? Skip lots of lines? You betcha. <BODY> <BR>What's <BR>going <BR> <BR>on <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>here?? </BODY>

What's going on

here?? << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 8

Let's go back to our simple page. <BODY> Something really cool </BODY>

Something really cool

This is the paragraph tag. Think of a paragraph as a block of text. <BODY> <P>Something really cool</P> </BODY>

Something really cool

By itself it doesn't do much. Although with most browsers, starting a new paragraph does have the effect of skipping a line. <BODY> <P>Something really cool</P> <P>like an icecube</P> </BODY>

Something really cool like an icecube

So, what else is this <P> tag good for? Well, it's great for aligning stuff. <BODY> <P ALIGN="left">Something really cool</P> <P ALIGN="center">like an icecube</P> <P ALIGN="right">or a popsicle</P> <P ALIGN="left"> Something really cool <BR>like an icecube <BR>or a popsicle </P> <P ALIGN="center"> Something really cool

<BR>like an icecube <BR>or a popsicle </P> </BODY>

Something really cool like an icecube or a popsicle Something really cool like an icecube or a popsicle Something really cool like an icecube or a popsicle Something really cool like an icecube or a popsicle

Something about the <P> tag... although in the examples above I used a closing tag (</P>), it is not entirely necessary. Nearly all browsers will assume that when a new <P>aragraph has begun, the old one must have ended. So... <P>Some stuff <P>More stuff is the same as... <P>Some stuff</P> <P>More stuff</P> And one more thing before we move on, earlier we were talking about centering things. There's another

way to center something that should definitely be in your bag of tricks. It's pretty self-explanatory. You can center one word or your whole page. Everything betwen the <CENTER> tags gets centered. <BODY> <CENTER>Something really cool</CENTER> </BODY>

Something really cool

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 9

Have a look at this... <BODY> Something </BODY>

really

cool

Something really cool

The browser won't recognize more than 1 space. I know at first this might all seem pretty stupid for it to be this way, but really, it's better like this. It gives you absolute control over the document's appearance. There is a nifty little code that means "space" to the browser -> &nbsp;

Try this instead... <BODY> Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cool </BODY>

Something

really

cool

The & means we are beginning a special character the ; means ending a special character and the letters in between are sort of an abbreviation for what it's for. There are quite a few of these special characters. Here are six more. (Note- these should always be lower case) &nbsp; &lt; &gt; &amp; &quot; &shy; non-breaking space < less-than symbol > greater-than symbol & ampersand " quotation mark - soft hyphen

You don't need to use them all the time, just when typing the real character would confuse the browser. How do you know when that is? No hard and fast 'rule' that I can think of. It will just come with a little practice and a few screw-ups. By the way, some thoughts on mistakes & screw-ups. There are those that are of the opinion that mistakes are bad. They are afraid to try anything new for fear of messing it up. Making the same mistake over and over might be a little dumb, but especially while you are learning, don't be afraid to screw everything all up. Mistakes are our friends :-) If you are not screwing something up then you are not learning anything and probably not doing anything. Remember, messing things up is a perfectly acceptable part of learning! OK, enough babbling. There are other special characters too. You'll probably hardly ever use them but I want you to know they are there. Let's go over the last couple points real quick because if you're at all like me, it will get confusing. The

browser will dispay your text in a steady stream unless you tell it otherwise with line breaks, etc. It will reduce any empty areas to 1 space. If you want more spaces, you must use the space code (&nbsp;). Here's a tidbit that we didn't cover... If you hit Return (or Enter) while you are typing, most browsers will interpret that as a space... unless there is already a space there. One more quick example. <BODY> Something<BR>really<BR>cool<BR> like<BR>an<BR>icecube! </BODY>

Something really cool like an icecube! Pretty clear?? I hope so. I gave it my best shot! << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Special Characters
This list has been shamelessly copied from the HTML Quick Reference Guide.

ISO Latin-1 characters
&Agrave; À capital A, grave accent diæresis/umlaut &agrave; à small a, grave accent Icelandic &Aacute; Á capital A, acute accent Icelandic &aacute; á small a, acute accent tilde &Acirc; Â capital A, circumflex tilde &acirc; â small a, circumflex grave accent &Atilde; Ã capital A, tilde accent &atilde; ã small a, tilde acute accent &Auml; Ä capital A, diæresis/umlaut accent &auml; ä small a, diæresis/umlaut circumflex &Aring; Å capital A, ring circumflex &aring; å small a, ring tilde &AElig; Æ capital AE ligature tilde &aelig; æ small ae ligature diæresis/umlaut &Ccedil; Ç capital C, cedilla &iuml; &ETH; &eth; &Ntilde; &ntilde; &Ograve; &ograve; &Oacute; &oacute; &Ocirc; &ocirc; &Otilde; &otilde; &Ouml; &ouml; ï Ð ð Ñ ñ Ò ò Ó ó Ô ô Õ õ Ö ö small i, capital Eth, small eth, capital N, small n, capital O, small o, grave capital O, small o, acute capital O, small o, capital O, small o, capital O, small o,

diæresis/umlaut &ccedil; ç small c, cedilla slash &Egrave; È capital E, grave accent slash &egrave; è small e, grave accent grave accent &Eacute; É capital E, acute accent accent &eacute; é small e, acute accent acute accent &Ecirc; Ê capital E, circumflex accent &ecirc; ê small e, circumflex circumflex &Euml; Ë capital E, diæresis/umlaut circumflex &euml; ë small e, diæresis/umlaut diæresis/umlaut &Igrave; Ì capital I, grave accent diæresis/umlaut &igrave; ì small i, grave accent acute accent &Iacute; Í capital I, acute accent accent &iacute; í small i, acute accent Icelandic &Icirc; Î capital I, circumflex Icelandic &icirc; î small i, circumflex German sz &Iuml; Ï capital I, diæresis/umlaut diæresis/umlaut

&Oslash; &oslash; &Ugrave; &ugrave; &Uacute; &uacute; &Ucirc; &ucirc; &Uuml; &uuml; &Yacute; &yacute; &THORN; &thorn; &szlig; &yuml;

Ø ø Ù ù Ú ú Û û Ü ü Ý ý Þ þ ß ÿ

capital O, small o, capital U, small u, grave capital U, small u, acute capital U, small u, capital U, small u, capital Y, small y, acute capital Thorn, small thorn, small sharp s, small y,

Additional characters from ISO 8859-1
&#160; &nbsp; non-breaking space or-minus sign &#161; &iexcl; ¡ inverted exclamation mark superscript two &#177; &plusmn; ± plus&#178; &sup2; ²

&#162; &cent; ¢ cent sign superscript three &#163; &pound; £ pound sign accent &#164; &curren; ¤ general currency sign sign &#165; &yen; ¥ yen sign pilcrow (paragraph sign) &#166; &brvbar; ¦ broken (vertical) bar dot &#167; &sect; § section sign cedilla &#168; &uml; ¨ umlaut/dieresis superscript one &#169; &copy; © copyright sign ordinal indicator, male &#170; &ordf; ª ordinal indicator, fem quotation mark, right &#171; &laquo; « angle quotation mark, left fraction one-quarter &#172; &not; ¬ not sign fraction one-half &#173; &shy; - soft hyphen fraction three-quarters &#174; &reg; ® registered sign inverted question mark &#175; &macr; ¯ macron multiply sign &#176; &deg; ° degree sign division sign

&#179; &sup3; &#180; &acute; &#181; &micro; &#182; &para;

³ ´ acute µ micro ¶

&#183; &middot; · middle &#184; &cedil; &#185; &sup1; &#186; &ordm; &#187; &raquo; ¸ ¹ º » angle

&#188; &frac14; ¼ &#189; &frac12; ½ &#190; &frac34; ¾ &#191; &iquest; ¿ &#215; &times; &#247; &div; × ÷

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 10

Let's get into putting images into a web page. We're going to use this one. Once again, right click to save it off this page or copy it from the pics folder.

You specify an image with the <IMG> (image) tag. <BODY> <IMG> </BODY> We must also specify the source and the size. <BODY> <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101> </BODY>

FAQ: How do I find out the WIDTH and HEIGHT of an image? A: Well, there's a couple different ways. One way is to load it in a graphics viewer/editor. An outstanding (and free) viewer that I use is Irfan View. A very popular graphics editor is Paint Shop Pro. This is time limited shareware but it is one fine editor. There is an older version that I VERY highly recommend for beginning web designers, and this version does not time out. It is available here. Another method is to use a text or html editor that imports the size when you insert the image. I use NoteTab, and an image tag of my design is built for me when I simply drag the filename on to the current file. I can insert an image in about 6 tenths of a second (I told you NoteTab was my favorite!)

Let me make the point that not only does the source specify what image, it also specifys where is the image. The above source, "chef.gif", means that the browser will look for the image named chef. gif in the same folder (or directory) as the html document itself. Below are a few diagrams.

SRC="chef.gif" means that the image is in the same folder as the html document calling for it.

SRC="images/chef.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.

SRC="../chef.gif" means that the image is in one folder up from the html document that called for it.

SRC="../../chef.gif" means that the image is two folders up from the html document that called for it.

SRC="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.

SRC="../../../other/images/ chef.gif" I'm not even going to try and put this into words. I hope you get the drift.

There is another way that this can be done. All references to images can have as their source the complete

URL. For example: http://www.hair.net/~squiggie/LottzaStuff/other/images/ chef.gif Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to absolute (complete) URLs?? Because you can build your site locally and all the links will work. When your pages are done, you just upload the whole pile to your server and everything will work just fine. In addition, it is easier for the browser to get the images and your page will load faster. Is there ever a reason to use an absolute URL? Sure, if the image resides on a completely different server.

FAQ: As soon as I upload my stuff to the Web, all my image links are broken. I used relative URLs and I definitely uploaded them because I can see them there with my FTP program. What gives? A: Sounds like a case problem. To a Windows based system, Chef.gif is the same as CHEF.GIF is the same as chef.gif. Put that image on a (often) UNIX server and they become 3 distinct filenames. You're telling the server to look for Chef.gif, but all it can find is CHEF.GIF. The fix? Always use lower case filenames. Make this a definite habit and you'll never get bit by the case bug. Another really good habit is to avoid spaces in your web filenames. Swap an underscore for any spaces. Change My Mommy.gif to my_mommy.gif.

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

It's not an overstatement to say that Paint Shop Pro is the Great Grandaddy and Godfather of web graphics. The non-expiring fully functional shareware version of PSP3 helped fuel the growth of the WWW by placing powerful graphics editing and conversion capability into the hands of millions. After a modest 2 Mb download... you were a web artist. It's no secret that only a small percentage of all copies were actually paid for. It's also not a stretch to assume that the folks over at JASC knew that, but allowed their editor to be distributed far and wide anyway. Surely they were looking for exposure and were willing to let us share in the benefits. So, I believe that I speak for millions when I say to JASC... Thank-you. Well, Paint Shop Pro is up to version 6 now. It's a 30-day time-limited demo. The full version is only $99. It's a powerhouse of an application and dollar for dollar, it easily ranks at the top of any list. Read all about it here. If you're rather new at graphics work and are looking for something a little less whiz-bang, yet still very powerful, you should grab yourself a copy of Paint Shop Pro version 3. This is the one that put PSP on the map. I have a copy of the old non-expiring version here (Win95/98)... psp312-32.zip Screenshot

I use it all the time and recommend it very highly. With it you can dig right into your images on a pixel level. You'll learn about colors, color depth, palettes, basic image editing, plus you can effortlessly convert between many popular image formats. After you become familiar with version 3, the latest version will be that much easier to use.

IrfanView is the graphics viewer that I use. It's fast, handles all major image formats (and quite a few not-so-major ones), it does slide shows, killer batch conversions, thumbnail browsing, it plays videos and sounds AND it's FREEWARE. (Well, postcardware. Send the kid a postcard and he's happy). Hook your images up to this thing, doubleclick on the icon and it pops open in a flash. Visit his site and download it.

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Paint Shop Pro v3 screenshot:

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 11

Another IMG attribute that deserves mention is ALT... <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef"> ALT is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that ALT attribute could be very important to your visitor.

Something really neato you should know about images and their size. Try this... <BODY> <IMG SRC="chef.gif"> </BODY>

As you can see, the browser figures out how big the image is all by itself. Why bother with dimensions then? Because with dimensions, the browser can simply reserve a space for the image, then load the rest of page. Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. All in all, the browser functions much better with image dimensions. Well Joe, that's all well and good <yawn>, but what's the neato part?? Check this out... <BODY> <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101> </BODY>

<BODY> <IMG SRC="chef.gif" WIDTH=40 HEIGHT=200> </BODY>

You can specify whatever dimensions you want and override the proper dimensions. Still foggy on the neato part? Well, look at this little red dot -> It's a 1x1 square. Lookie what I can do with it though... <BODY> <P ALIGN="center"><IMG <P ALIGN="center"><IMG <P ALIGN="center"><IMG <P ALIGN="center"><IMG </BODY>

SRC="red_dot.gif" SRC="red_dot.gif" SRC="red_dot.gif" SRC="red_dot.gif"

WIDTH=500 HEIGHT=1> WIDTH=500 HEIGHT=2> WIDTH=500 HEIGHT=8> WIDTH=2 HEIGHT=200>

Pretty nifty huh? << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 12

Let's learn about links. It's really very simple. We'll make a link to Yahoo. Start with this... <BODY> Go to Yahoo! </BODY>

Go to Yahoo!

Then add a pair of anchor tags. <BODY> Go to <A>Yahoo!</A> </BODY>

Go to Yahoo!

Add the URL and you're done! URL Stands for Uniform Resource Locator. That's a big fancy phrase that the computer people came up with. They tend to do that alot. A URL is just an address. <BODY> Go to <A HREF="http://www.yahoo.com/">Yahoo!</A> </BODY>

Go to Yahoo!

Let's do one more. <BODY> Go to Netscape! </BODY>

Go to Netscape!

<BODY>

Go to <A HREF="http://home.netscape.com/">Netscape!</A> </BODY>

Go to Netscape!

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 13

An email link works the same way. We just use an email address instead of a page address. <BODY> Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A> </BODY>

Send me Mail!

FAQ: How can I specify a Subject for my email message? A: Very easily, but there's a catch. You can add a subject to the link as follows... <A HREF="mailto:forrest@bubbagump.com?subject=Hey Bubba!"> ... but, be advised that floating around out there is the occasional email client that doesn't know what to do with that subject. For those people the email may appear to be sent, but in reality it may simply disappear into oblivion. If this occasional glitch is a concern to you, then don't specify a subject.

FAQ: How can I get rid of the underline in my links? A: Well, technically that can't be done with HTML. But, it can using Style Sheets. If you put the following between the HEAD tags of your document, any browser supporting Style Sheets should render the links without an underline... <style type="text/css"><!-a:link, a:visited, a:active {text-decoration: none} --></style>

We can make an image a link if we want. Using the 'Go to Netscape!' example above we simply substitute an <IMG> tag for the word Netscape! <BODY> Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A> </BODY>

Go to

FAQ: How do you get rid of that ugly blue border around an image link? A: Simple... add BORDER=0 to the IMG tag. (See below.)

FAQ: How do I link to a _____ file so people can download it? A: Simple, just link to it. Let's suppose you have a few Microsoft Word documents that you would like to offer. Just link to them... <A HREF="myresume.doc">Download my resume</A> <BR><A HREF="mybio.doc">Download my autobiography</A>
Download my resume Download my autobiography

You may wonder how to be sure the file gets saved to disk rather than being displayed or loaded or whatever. In short you have little control over what happens when a user downloads a file. Most people know how to right click and Save To Disk. Others may have a plugin to handle the file. Just let people manage that part by themselves. Your job is simply to offer it for download. If the file is a lengthly file (200+Kb) or a collection of files, you may wish to zip them and offer the zip file for download instead.

<< BACK

NEXT >>

So, you want to make a Web Page!

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 14

FAQ: How do I make a link open in a new browser window? A: Well, first of all, this can be done easily by your visitor if he wishes. All he has to do is right click on the link and choose "Open In New Window". If we figure that you want to force this action for whatever reason, you can add TARGET="_blank" to the link... Go to <A HREF="http://home.netscape.com/" TARGET="_blank">Netscape!</A> There's more on targets in Frame Tutor.

<BODY> Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 BORDER=0></A> </BODY>

Go to

One more note about links... It is perfectly acceptable to link to someones page(s) without asking. Links are what makes the Web the Web. Now that you've learned how to make links, I'm going to tell you about one of my pet peeves. I hate searching for information on widgets and all I get are pages with 14 dozen LINKS to widget sites and nothing else. I follow some of those links and I get MORE LINKS to more widget link sites... but never any friggin widgets!

If you're making a page, of course include links if you think it adds value, but try to refrain from having a page that consists of nothing more than links and links that link to even more links! << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 15

Before we go on, we need to go over something. When you include images on your page, remember that they contain alot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half results in an image only 1/4 the size in Kb. Also you can reduce the number of colors. For example:

Dimensions 310 x 304 # of colors- 238 Size - 69 Kb

Dimensions 207 x 203 # of colors- 238 Size- 34 Kb

Dimensions 207 x 203 # of colors- 48 Size - 19 Kb

All image editing was done with Paint Shop Pro.
(An older, non time limited version is available here. Even though it's older and not as fancy as the latest version, it is a GREAT graphics editor - PERFECT for new web authors.)

Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if your page takes forever to load, your visitors will probably leave and they won't see anything. Just to see how much images can be reduced, try the GIF Optimizer below. You send it your image, and it comes back progressively more "optimized". Note that the GIF Optimizer is not actually a part of this tutorial. It is a program that resides on another computer. This is just an interface and you must be online to use it.

GIF Optimizer
GifOptimizer is a FREE, online tool that reduces the file size of GIF images up to 75%, allowing web pages to load faster. Optimization is achieved in four simple steps:

1. Upload the GIF to the GIF Optimizer server. 2. Reduce the number of colors used in the image. This step also removes extra data
and comments from the GIF. 3. Reduce the height and width of the image. 4. Save the optimized GIF to your computer for use on your website. GifOptimizer can reduce the file size of GIF images (up to 150K in size), even animated GIFs. Use it as often as you like, there's never any charge. Step 1: Upload GIF

Remote File
If the image you want to optimize is located somewhere on the Web:

1. Enter the GIF's URL into the field below. (Be sure to enter the url of the gif itself, not
the url of the page it is on.) 2. Press the "Upload" button.
(Example: http://www.somewhere.com/coolimage.gif )

http:// Upload

Local File
If the image you want to use is located on your computer: (Internet Explorer users must have at least version 3.02 and the 3.02 add-on available here to use this feature.)

1. Press the Browse button below. 2. Locate the GIF image on your hard drive. 3. Press the "Upload" button.
Browse... Upload

Check out other FREE online tools and files from Media Builder: GIFWorks • Animated Banner Maker • 3D Text Maker • ButtonMaker • FontMapper Animated GIFs • Backgrounds • Borders • Icons • Lines • Fonts

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 16

Another option that can be used if you want to offer alot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).

Click on the thumbnail to see a larger image

The first thing you need to do is fire up your image editor and make smaller versions of your images. It would also help to reduce the color depth. This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the <IMG> tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image. Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know). Put the full sized image and the small image in your working folder. Once again, Netscape users right-click & Save Image As. (everyone else, it's something similar) Start with your <IMG> tag. <BODY>

<IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62> </BODY>

Add your <A> tags. <BODY> <A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> </BODY>

And add the URL of the big picture and bingo, you're done! <BODY> <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> </BODY>

You can, if you want, get rid of the blue border. Although, you may wish to keep it so that your viewers know that it is a link. It's up to you. <BODY> <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A> </BODY>

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 17

FAQ: My image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Browser B.

A: Some browsers (most browsers?) interpret a carriage return between images as a space. A few browsers don't. It's that simple. The little blue dash is simply the link underlining an empty space. The cure is to eliminate carriage returns right before or right after the image. This is the markup for the above images:

<CENTER> <A HREF="myhome.html"> <IMG SRC="pics/myhome.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Home"> </A> <A HREF="mailto:me@my.house"> <IMG SRC="pics/myemail.gif"

WIDTH="66" HEIGHT="23" BORDER="0" ALT="Email"> </A> <A HREF="mylinks.html"> <IMG SRC="pics/mylinks.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Links"> </A> </CENTER> If we were to change it to this we would eliminate the little blue dashes:

<CENTER> <A HREF="myhome.html"><IMG SRC="pics/myhome.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Home"></A> <A HREF="mailto:me@my.house"><IMG SRC="pics/myemail.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Email"></A> <A HREF="mylinks.html"><IMG SRC="pics/mylinks.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Links"></A> </CENTER>

Another adjustment and the spaces disappear too:

<CENTER> <A HREF="myhome.html"><IMG SRC="pics/myhome.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Home"></A><A HREF="mailto:me@my.house"><IMG SRC="pics/myemail.gif" WIDTH="66" HEIGHT="23" BORDER="0" ALT="Email"></A><A HREF="mylinks.html"><IMG SRC="pics/mylinks.gif"

WIDTH="66" HEIGHT="23" BORDER="0" ALT="Links"></A> </CENTER>

Is this a pain in the butt? Only if you don't understand what's happening and how to fix it. Is Browser A a crappy browser? Not necessarily, it's just different than Browser B. Browsers sometimes do different things with the same markup.

Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done. First start with the spot you want people to be transported to. Pick a word and wrap it in the <A> tags. <A>Add</A> the URL and you're done!

Next give that spot a NAME. <A NAME="upabit">Add</A> the URL and you're done! What you have done is marked that spot. Now that spot can be referenced and linked to.

Start building the link. Click <A>here</A> to be magically transported...

Add the document to be referenced... Click <A HREF="lesson06.html">here</A> to be magically transported...

And lastly, add the anchor NAME like so... Click <A HREF="lesson06.html#upabit">here</A> to be magically transported... And that's all there is to it! Not exactly brain surgery is it?? << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 18

We've covered a lot so far. Text & font manipulation, images, links. As far as the basics go, there's not a whole heck of alot more. I think I'm going to take this time to tell you about screen resolution. The screen I work on is 640 pixels by 480 pixels. Many use 800x600 and a few use 1024x768. I'm sure that there are even a few others out there. What does this have to do with anything? It has alot to do with how your pages will look to them. Here are a couple screen shots of my current homepage at different resolutions.

640×480

800×600

1024×768

It is a very good idea to check your page at other resolutions. Your carefully crafted layout might fall apart at other resolutions. Especially if you design your page at a higher resolution. View your creation at a lower res and you might be surprised. For Windows95 users, there is a handy little MS Powertoy called Quickres that lets you easily switch screen resolutions.

Now we are going to look at a couple formatting tools availble to you. First one is <BLOCKQUOTE>. In most browsers it pulls your margins in from both sides. (I don't know if that's the proper terminology but if you understand what I mean I guess it's close enough). <BODY> <BLOCKQUOTE> WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. </BLOCKQUOTE> </BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

I'm sure when <BLOCKQUOTE> was first devised it had a loftier purpose, such as quoting profound bits of prose from authors I've never even heard of. But here in the trenches it serves a more mundane purpose... easy indenting. It's important to note that although most browsers render blockquoted text by indenting it, that's not specifically what it's designed to do. It's conceivable that some future browser may render blockquoted text in some other way (such as red italics). That said however, for the time being, it is perfectly safe to indent blocks of text with <BLOCKQUOTE>. << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

For Windows95 only. (Not Windows 98/NT*)
At this writing, Quickres seems to be only available from the Microsoft site as part of the MS Powertoys for Win95 package. Since most of the powertoys have a certain amount of usefulness, you may want to grab the whole thing (209Kb). Here is the MS Powertoy web page... MS Powertoys at www.microsoft.com For the Quickres component by itself (39Kb), the following FTP Search should take you to several download locations... Quickres (quik_res.exe) Installing it can be a little annoying. First double click on quik_res.exe. It will barf up two files - Quickres.exe and Quickres.inf. You may be able to use Quickres.exe right out of the package (that is, without installing it with Quickres.inf). You can try, it won't hurt anything. When the program starts up, it will deposit a little monitor in your tray area. Left click on it once and a menu will pop up. If it seems that you must install it for it to work, right click on Quickres.inf and choose install or active install. This is where the tricky part is. The install script may not be able to "find" the program, so you'll have to help it along. Just fiddle with it for a bit.. it'll go. Installing it will place a shortcut in your start-up folder so unless you want this little bad boy starting up all the time, move the shortcut to somewhere else. Also, there is no "Exit" command. The thing has no off switch. To shut it down you'll have to CTRL+ALT+DEL and choose Quickres from the menu.

* With Windows98 you can change the monitor resolution easily. Right click on the desktop and choose Properties. Choose the Settings tab and select a desktop area.
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 19

Another very useful little tool is a LIST. There are ORDERED lists and UNORDERED lists. This is an ordered list 1. 2. 3. 4. something big something small something short something tall This is an unordered list
q q q q

something red something blue something old something new

First, we will build an UNORDERED list. It's mind-numbingly simple... really. Start with this... <BODY> What I want for Christmas </BODY>

What I want for Christmas

Note - technically we have not started to build the list yet. This is just a sort of heading.

Add a pair of unordered list tags. <BODY> What I want for Christmas <UL> </UL> </BODY>

What I want for Christmas

Add a list item. <BODY> What I want for Christmas <UL> <LI>a big red truck </UL> </BODY>

What I want for Christmas
q

a big red truck

Add a few more... <BODY> What I want for Christmas <UL> <LI>a big red truck <LI>a real fast speedboat <LI>a drum set <LI>a BB gun <LI>a Melanie Griffith </UL> </BODY>

What I want for Christmas
q q q q q

a big red truck a real fast speedboat a drum set a BB gun a Melanie Griffith

Bingo! You made a list!

How to make an ordered list? Easy! Change the <UL> tag to <OL>.

<BODY> What I want for Christmas <OL> <LI>a big red truck <LI>a real fast speedboat <LI>a drum set <LI>a BB gun <LI>a Melanie Griffith </OL> </BODY>

What I want for Christmas 1. 2. 3. 4. 5. a big red truck a real fast speedboat a drum set a BB gun a Melanie Griffith

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 20

Another type of list is a definition list. aardvark A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every selfrespecting dictionary. Did you know there's such a thing as an aardwolf?

Start with this... <BODY> <DL> </DL> </BODY> Then add a definition title... <BODY> <DL> <DT>10th Amendment </DL> </BODY>

10th Amendment

And a definition item. <BODY> <DL> <DT>10th Amendment <DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people. </DL> </BODY>

10th Amendment The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

As a finishing touch I like to make the definition title bold. It's not required, but I think it looks much better that way. <BODY> <DL> <DT><B>10th Amendment</B> <DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people. </DL> </BODY>

10th Amendment The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 21

Another little widget that you will find yourself using a lot is the Horizontal Rule. <BODY> <HR> </BODY>

We have a few options available to us... <BODY> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100>

</BODY>

This one is pretty self explanatory. <BODY> <HR WIDTH=60% ALIGN="left"> <HR WIDTH=60% ALIGN="right"> <HR WIDTH=60% ALIGN="center"> </BODY>

We can control the thickness of the line... <BODY> <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% </BODY>

SIZE=1> SIZE=3> SIZE=8> SIZE=15>

And we can make it a solid line. <BODY> <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% </BODY>

SIZE=1 NOSHADE> SIZE=3 NOSHADE> SIZE=8 NOSHADE> SIZE=15 NOSHADE>

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 22

Remember when I said that the browser doesn't understand formatting, it just displays text in a steady stream? Kind of like this... <BODY> ///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo </BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

Well, with the <PRE> (preformat) tag, we can put a stop to that and have things displayed the way we type them. <BODY> <PRE> ///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo </PRE> </BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

Notice that a monospaced font is used.

The last tag we're going to discuss is a comment. <BODY> <!--This is a comment--> This is not <P>A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, <!--Hi Mom!--> notes to yourself, <!--Pick up milk--> or write a helpful message to someone looking at the source of your page.<!--Copy anything off me and you're dead meat!--> </BODY>

This is not A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page. Just to be absolutely clear, the comment must start with <!-- and end with --> You can (usually) even put other html tags in a comment and they will be ignored. The browser will just keep ignoring everything until it sees a --> << BACK NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 23

Well, that about does it! You now know all the basic tags you'll need to create a web page! Aren't there more tags? Oh yeah. Lots more. But rest assured you've got most of the basic weaponry you'll need. After you tinker with these main tags awhile, you may want to look at some of my other slightly more advanced tutorials: Table Tutor, Form Tutor and Frames Tutor. They will give you a few more really neat things to have in your bag of web publishing tricks. Beyond that, there are quite a few redundant tags, that is tags that in theory have a specialized use, but in practice, duplicate more common tags presented here. There are a few outdated tags, and a few that have such a limited use, it wasn't even worth it to go over them. Plus there are a few browser-specific tags (tags that only work in one browser). Lately there has been a push to separate structural markup (paragraphs, lists, tables etc) and presentational markup (colors, fonts etc.). The result, in part, has been the introduction of style sheets. While understanding style sheets is not at all necessary for making web pages, it is a related area where you might wish to expand your studies. One of the neatest things you can do with a web page is to make it DO stuff. You can investigate the wonderful world of JavaScript and learn to write mini programs that you can insert in your pages. It's a little bit more complex than HTML, but I've written JavaScript Tutor, and that will give you a solid start on some of the basics. In addition there are dozens of "copy-n-paste" javascript sites that offer code for the taking. I mentioned at the beginning of this tutorial some of my thoughts on HTML editors. In my opinion the best editors to use are not the big clunky wizard types. You know, the ones that say you don't need to

know a lick of HTML to author a page. The problem is, a large number of the pages I see that have been put together with these programs look as if the author didn't know a lick of HTML. Not only that, if a problem arises, a person with a basic knowledge of HTML is going to solve that problem a heck of a lot faster than a person who has been leaning on one of those page maulers. Most experienced authors use some sort of text-based editors. What these editors do is pop in a set of tags for you with a simple click. They make it so you don't have to manually type in color codes, LEFT, RIGHT, CENTER or whatever. You have absolute control over your page design. I once heard the phrase "text editor on steroids" to desribe one. That's about what they are. Several good (and free) ones that come to mind are listed in my Short List of Free HTML Editors. What they all have in common is that you must know some HTML. They will make your coding easier. They don't attempt to do it for you. What do I use? Lately I've been using NoteTab almost exclusively. Once you have made your pages you will need to upload them to a server. The server is a computer that is running a server program that doles out documents to whoever requests them. For a little bit of guidance on putting your pages on the Web, have a look at Uploading Your Pages. And before I go, I must say something about web page style and content. Better yet, I think I'll defer to Jeffrey Glover's Top 10 ways to tell if you have a sucky homepage.

Good luck and happy HTML'ing!

<< BACK

NEXT >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Upload your pages

First off, understand that the procedure for getting your pages on the Internet can vary greatly. Your circumstances might be a little different than what I outline here. Also know that this is notoriously confusing for beginners. It may be a lot of stumbling around at first. But, you will get it. Just keep at it and don't give up. One more thing before we begin. Your ISP probably already has help pages set up for uploading your pages. Look at their web site first and see what you can find. Needless to say, follow their instructions over mine. That said, the first thing you'll need is an FTP program. FTP stands for File Transfer Protocol and it is the method we use to transfer files from place to place on the Internet. An FTP program (or FTP client) simply puts a nice graphical interface to an old command-line protocol. What we'll use for this example is a great little freebie called FTP Explorer. (For Win95/98)

http://www.ftpx.com/
Download it and install it before you go any further. Another thing you'll need is your server's FTP address, your login name and your password. Your login name and password you should already know - that's probably the login & password you use to connect to the internet. You can get your server's FTP address from your Internet Service Provider. If your ISP is excellent.net, then the FTP address is probably ftp.excellent.net. Double check with your

ISP just the same though. Your server might also require that you place all web documents in a directory of a special name. That name can be public_html, www, public or something else. Get this info also from your ISP. As soon as you crank up FTP Explorer you'll get the Connect dialog:

Plug in the following information...
q q q q

Profile Name: Just a label for the list of sites at left. This can be anything you wish. Host Address: This is your server's FTP address that I told you to get. Login: your login name. Password: your password.

Don't worry about the rest for now. After you add this info, hit Add. You'll then see your brand new profile at the left. Highlight it and hit the Connect button. Hopefully all went well up til now and you're connecting to the server. As soon as you're connected, you should see something like this. (It's very possible that the contents of this directory are different than what is shown here. It's also possible that yours is completely empty.)

Just so we're on the same page, make sure you've chosen the "Details" view. (circled above) Upload (part 2) >>
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Upload your pages - part 2

Our first order of business is to make our web directory. (You needed to ask your ISP what this was remember? Also it's very possible that in your situation this step is not even necessary.) For this exercise we'll call it www. So, what we want to do is Make Directory www. Right click in the right window and choose New/Folder:

Then rename it to www (or whatever the proper name is.)

Now double click on that new folder to get into it:

<< Upload (part 1)

Upload (part 3) >>

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Upload your pages - part 3

To upload a file, press the button with the blue up-arrow. This will open an Upload dialog:

Now browse to the files you want to upload:

Select the file and press the Open button. The file will automagically be uploaded to the server:

Now let's try to figure out what your web page URL is. In a simple world it would be... http://www.excellent.net/~bigjoe/page1.html Some servers use a slightly different name for user's web pages so your URL might be something like... http://members.excellent.net/~bigjoe/page1.html Once again, this info can be had from your ISP. And that's about it. Learning to do this can be a little rough at first. It's all new. Rest assured though, soon you'll be able to do it with your eyes closed. << Upload (part 2)
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

Lesson 24 - Last one!
Here are some excellent materials that you may want to have a look at. Table Tutor, Form Tutorand Frames Tutor When you're past the basics and are ready to add a few high octane components to your web page, these three tutorials will take you step by step through the tags. The HTML Reference Library An outstanding html guide and reference source in windows HELP format. (Note that you must have Internet Explorer 4 installed for this latest version of the HTML Library to work.) Beginner's Guide to HTML A good concise guide that explains the basics very well. I keep a copy and still refer to it on occasion. Other outstanding HTML & web authoring sites: The Web Developer's Virtual Library irt.org HTML Goodies Webmonkey CNET Builder.com The World Wide Web Consortium

If you need stuff for your pages... - like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff!

Got a question? "How do I fit a thigamajig around a whatchamacallit and put in one of those doohickeys?" Almost without exception your question has already been asked... and already been answered. Look here for FAQs (Frequently Asked Questions) from this tutorial, and links to other excellent HTML FAQ lists. Got any suggestions? Let's hear 'em. Want to get on the WebTutor mailing list? Sign-up. If you would like to add a link to the Professional Web Design site, you are welcome to use one of the following. Just copy the code, paste it into your page and you're all set.
<A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_white.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_teal.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A>

<A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/158x60_webtutor_white.gif" WIDTH="158" HEIGHT="60" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/160x50_webtutor_teal.gif" WIDTH="160" HEIGHT="50" BORDER="0" ALT="Get WebTutor!"></A>

<< BACK
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Excellent HTML FAQs on the Web
FAQ = Frequently Asked Question

Web Design Group - Web Authoring FAQ irt.org HTML FAQ Scott Brady's "Unofficial" Official alt.html FAQ John Gann's Just the FAQs please Also learn to use the Power Search at DejaNews. DejaNews (or Deja.com as they call themselves now) is a storehouse of all past USENET (newsgroups) discussions. Any question you may have about web page authoring has almost definitely been discussed before in alt.html and a handful of other similar groups. Do a little searching and you'll find information on pert near anything.

FAQs presented/answered in this tutorial
So, you want to make a Web Page!
q

What the heck is Notepad and where do I get it? I've seen pages where the background is fixed and the page just scrolls over it. How can I do that? How do I find out the WIDTH and HEIGHT of an image? As soon as I upload my stuff to the Web, all my image links are broken. I used relative URLs and I definitely uploaded them because I can see them there with my FTP program. What gives? How can I specify a Subject for my email message? How can I get rid of the underline in my links?

q

q

q

q

q

q

How do you get rid of that ugly blue border around an image link? How do I link to a _____ file so people can download it? How do I make a link open in a new browser window? In Netscape my image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Explorer. Can you recommend any good free HTML editors? Can I somehow embed a font or force a download of my font so my visitors automatically get the font I'm using? OK, I made my page. Now how do I get it onto the Internet?

q

q

q

q

q

q

Table Tutor
q

I've laid out my table with my dimensions but the table doesn't show up right. Or it's fine in Browser A but looks different in Browser B. I made my page using SooperCoder and my page is fine in Browser A but it's completely invisible in Browser B. What's going on? Why are there spaces in my tables (or between my images)? How can I make image A sit flush up against image B?

q

q

Form Tutor
q

When I press the Submit button, all I get is a New Mail Message that pops up. What am I doing wrong? Can I use an image for a Submit button? Can I make a simple button that just takes the user to another page? How can I send my visitor to another page after they submit my form?

q

q

q

Frames Tutor
q

I try to make my frames with no borders, but with Browser-A, a thin line

still appears between the frames. How do I make it go away?
q

Can I load 2 frames with only one click?

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 5

Let's go back to plain old Ed. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="middle">Ed</TD> </TR> </TABLE>

Ed

And for the sake of clarity and simplicity let's remove the alignment attributes. We know what will happen because we know what the default values are. By the way, a TAG tells the browser to do something. An ATTRIBUTE goes inside the TAG and tells the browser how to do it. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR>

</TABLE>

Ed

Now we will make our table a fuzz bigger. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

Ed

You should know that fuzz is a technical term. Its full definition is so broad and complicated that it would only be suitable for advanced html students.

Ed's friend Tom is back and this time he wants his own cell. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> <TD>Tom</TD> </TR> </TABLE>

Ed

Tom

When no instructions are given to the browser, each cell may (but not always) be different in size. It's often a fine idea to specify how big each cell is. Make sure your arithmetic is correct or what people see may be drastically different than what you want them to see! <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=150>Ed</TD> <TD WIDTH=150>Tom</TD> </TR> </TABLE>

Ed

Tom

These WIDTH attributes can also be expressed as a percentage. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=50%>Ed</TD> <TD WIDTH=50%>Tom</TD> </TR> </TABLE>

Ed

Tom

FAQ: I've laid out my table with my dimensions but the table doesn't show up right. Or it's fine in Browser A but looks different in Browser B. A: Getting too specific with table cell dimensions is a tricky business. Often the browser doesn't render a table exactly how we've specified. The best way I've found to overcome this is to design tables that are more like rubberbands than a rigid framework. That is they flexibly hold everything together rather than rigidly box everything together. Design your table in such a way so that minor differences in the way a browser renders it won't destroy what you're trying to do.

<< BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 4

We can control where in the cell the data will appear. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="center">Ed</TD> </TR> </TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="right">Ed</TD> </TR> </TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left">Ed</TD> </TR> </TABLE>

Ed

As you can see, the default value is (usually) ALIGN="left". You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

We can also control where data will appear vertically in a cell. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="top">Ed</TD> </TR> </TABLE> Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="bottom">Ed</TD> </TR> </TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="middle">Ed</TD> </TR> </TABLE>

Ed

Default is usually middle.

I will take a second now to show you something else. Images can also be used and manipulated in a table data cell. Take Ed here*, and save him to the folder you are working out of (the one where you

put tables1.html). Then substitute an <IMG> tag for Ed. * To save an image off of a web page, right click on it and choose Save Image As (or something similar). <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="middle"><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32 ALT="Ed"></TD> </TR> </TABLE>

I suppose that now is also a good time to stress that it is good practice to include size attributes with all

your image tags. When your browser knows in advance how big your image is going to be, it loads the page faster. << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 3

Let's get rid of Ed's friends for now. <TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

Let's reduce the table size to 50% of the browser window. <TABLE BORDER=3 WIDTH=50%> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

Now we will specify a width of 50 instead of 50%. <TABLE BORDER=3 WIDTH=50> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

Now 100. <TABLE BORDER=3 WIDTH=100> <TR> <TD>Ed</TD> </TR> </TABLE> Ed As you can see there are two ways to specify table width. Each style has its uses. Which style to use for what is unimportant now.

We can also mess around with the height. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

Ed

I'm reminded of something Steven Wright said...

"The other day, I was walking my dog around my building...on the ledge. Some people are afraid of heights. Not me, I'm afraid of widths." Note - Controlling a table's height is fairly simple. Controlling the height of individual cells in the table is a little unreliable, especially across different browsers. << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 2

Ok, what we've got is this... <TABLE> <TR> <TD>Ed</TD> </TR> </TABLE> ...which gives us this: Ed

First lets make it look more like a table and give it a border. Every time you make a change and want to see how it looks, you can hit the Reload (or Refresh) button on your browser. Every so often, a change you've made doesn't seem to "stick". In that case, hold the SHIFT button and hit Reload. <TABLE BORDER=1> <TR> <TD>Ed</TD> </TR> </TABLE>

Ed

How about a bigger border? <TABLE BORDER=5> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

How about a HUGE border? <TABLE BORDER=25> <TR> <TD>Ed</TD> </TR> </TABLE>

Ed

How about NO border? <TABLE BORDER=0> <TR> <TD>Ed</TD> </TR> </TABLE> Ed As you can see, the default is (usually) no border.

Let's stick with a modest border for now. <TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

When no sizes are specified the table is only as big as it needs to be. <TABLE BORDER=3> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE> Ed, Rick and Tom

Specifying a table size is pretty simple though. <TABLE BORDER=3 WIDTH=100%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE> Ed, Rick and Tom

How about this? <TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed, Rick and Tom</TD> </TR>

</TABLE> Ed, Rick and Tom << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 1

Just like "follow the bouncing ball", I want you to open up Notepad (Yes Notepad!) and follow me. Copy and paste off this page the following to get you started: <HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY> </BODY> </HTML> Save it as table1.html in some folder somewhere. Go ahead and give it its own folder because we will be putting other things in there too. Start up your browser. Use it to open table1.html and run Notepad and the browser side by side. This way you can create your pages and almost instantaneously see the results of your handiwork. (And you thought you needed a 13 megabyte 'wizzard' ;-)

Type in your table tags. These simply mean "starting a table" and "ending a table".

<HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY> <TABLE> </TABLE> </BODY> </HTML>

Every table needs at least one row. <HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY> <TABLE> <TR> </TR> </TABLE> </BODY> </HTML>

And of course every row has to have at least one table data cell. <HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD></TD>

</TR> </TABLE> </BODY> </HTML>

Now, just to keep things a little less cluttered I am going to start writing only what is in the table tags. I will leave out the head, body, title, etc. tags from now on. Needless to say, leave them in your document. <TABLE> <TR> <TD></TD> </TR> </TABLE>

Now you need something to put in that cell. How about Ed? let's put Ed in the <TD> cell. <TABLE> <TR> <TD>Ed</TD> </TR> </TABLE> Well now, you are the proud owner of a fully functional html table! Open it with the browser and check it out! If you've done everything correctly your table should look like this: Ed

Just kidding! Haha! As you can see I am easily amused. This is what you have created:

Ed

Take a deep breath, pat yourself on the back and be proud. You made your first table! << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 6

Lets give Ed a bigger cell since he's been here from the beginning. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=80%>Ed</TD> <TD WIDTH=20%>Tom</TD> </TR> </TABLE>

Ed

Tom

Now Rick is back and of course he wants his own cell. We need to decide how much of the row we will give him. I suppose 20% is fair. Make sure to adjust Ed's share also. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD>

</TR> </TABLE>

Ed

Tom

Rick

Three yahoos from across the street see what's going on and they want to be in your table. I think we will give them their own row. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed Larry

Tom Curly

Rick Moe

The WIDTH attributes in the first row carry over to the second row.

If Moe leaves, we still have a perfectly good table, it just has an empty spot. <TABLE BORDER=3 WIDTH=300 HEIGHT=75 > <TR>

<TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> </TR> </TABLE>

Ed Larry

Tom Curly

Rick

What we may want to do, just to keep the browser from guessing, is to actually leave that empty cell there and just put a blank space in it (&nbsp;). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guesing the browser has to to, the better off you'll be. <TABLE BORDER=3 WIDTH=300 HEIGHT=75 > <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>&nbsp;</TD> </TR> </TABLE>

Ed Larry

Tom Curly

Rick

Let's put Moe back and remove all attributes except BORDER. <TABLE BORDER=3> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 7

Next are a couple of attributes called CELLPADDING and CELLSPACING. Both are used up front in the <TABLE> tag. CELLPADDING is the amount of space between the border of the cell and the contents of the cell. <TABLE BORDER=3 CELLPADDING=12> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed Larry

Tom Curly

Rick Moe

The default value for this attribute is normally 1. The reason it is 1 and not 0 is so that any text in the cells won't be banging up against the borders. (Although you could specify 0 if you wanted to).

If we substitute CELLSPACING for CELLPADDING we get a slightly different effect. <TABLE BORDER=3 CELLSPACING=12> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed Larry

Tom Curly

Rick Moe

The default value for the CELLSPACING attribute is usually 2.

We can, of course, use these attributes in combination. <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

<TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed

Tom

Rick

Larry

Curly

Moe

And, to see what it would look like, we can set them both to 0. <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed Tom Rick Larry Curly Moe

Before we continue there's an issue I'd like to touch on. I've seen more and more lately that some HTML authors are omitting closing cell </TD>, row </TR> and table </TABLE> tags. Even the W3C's html recommendation suggests that at least the closing cell and row tags can be left out. The idea is that the browser should know that when another cell begins, the last one must have ended. Unfortunately, as your tables become more complex, some browsers don't always understand this and the table goes goofy. The easiest way to completely sidestep this issue is to always include those closing tags. This also leads up to our next FAQ...

FAQ: I made my page using SooperCoder and my page is fine in Browser A but it's completely invisible in Browser B. What's going on? A: Whenever a whole page, or large portions of a page just "disappear", the culprit is usually one or more missing </TABLE> tags. Make sure all closing tags are there (especially /TABLE) and then the problem disappears. ;-)

<< BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 8

Let's get rid of CELLPADDING and CELLSPACING and go back to our simple little table. <TABLE BORDER=3> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe

A cool feature of the newer browsers is the ability to specify background colors for a table cell, row or the whole table. You use BGCOLOR just like you would in the <BODY> tag.

<TABLE BORDER=3 BGCOLOR="#FFCC66"> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe

<TABLE BORDER=3> <TR BGCOLOR="#FF9999"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR BGCOLOR="#99CCCC"> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe

<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD BGCOLOR="#FF0000">Larry</TD> <TD>Curly</TD> <TD BGCOLOR="#3366FF">Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe

Here's a handy chart I use to choose background colors. There are also 2 charts in HTML format, one with 216 colors and another with 1536 colors. You can also use Color Picker for playing around with colors. One more thing about these table background colors... a <TD> bgcolor will override a <TR> bgcolor and a <TR> bgcolor will override a <TABLE> bgcolor. Not that this needs further explanation but I'm kind of having fun with this so here's an example: <TABLE BORDER=3 BGCOLOR="#FF6633"> <TR BGCOLOR="#009900"> <TD BGCOLOR="#9999FF">Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed

Tom Rick

Larry Curly Moe << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 9

Let me take a minute to esplain something. A browser has to interpret the instructions you give it the best way it can. If something has not been specified one way or another, most browsers will try to come up with an attractive solution. The best thing you can do as an author is to specify as much as you can, especially those things that are important for your page to look right. It is also important to view your work through those browsers that people actually use. Since most people use Netscape or Internet Explorer, that is a good start. You may also want to have a copy of a couple other less popular browsers to be sure that you look right to them too. Another consideration is screen resolution. I work on a 640x480 screen. Many people use 800x600 and many have theirs set to 1024x768 or even 1600x1200. This simple difference has the potential to seriously mess with your page design. There is a little Win95 utility that I use called QuickRes that can change your screen resolution back and forth with the click of a button. It's not a bad idea to view your pages through other resolutions.

Now we will play with COLSPAN (Column Span) and ROWSPAN (Row Span maybe??). Let's suppose Ed beats the crap out of Tom and throws him out of the table. Just doing that, this is what we have. <TABLE BORDER=3>

<TR> <TD>Ed</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Rick

Larry Curly Moe It just left an empty spot and Rick slid over to fill the void.

If we want Ed to actually take possession of Tom's cell and make the area part of his own, we have to use the COLSPAN attribute like so... <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Rick

Larry Curly Moe

To emphasize the point I made earlier, about the browser trying to find an attractive solution, let's make Ed span two columns but we'll put Tom back in. We will deliberately introduce a discrepancy just to see how the browser handles it. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe The point is 1) The browser is very forgiving in that it does the best it can with what you give it. 2) It is very important to specify what is important and make sure there are no discrepancies or you may end up with a surprise. And 3) there's very little you do with html will crash the other person's browser no matter how badly you may have messed it up, so don't worry about that. << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 10

OK... let's take Tom back out (the poor sap). <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Rick

Larry Curly Moe

Rick gets scared and he leaves. Ed takes over Rick's cell too, and just cause he's that way, he stands right in the middle of the cell.

<TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN="center">Ed</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Larry Curly Moe

All other html coding, by the way, can be used in a cell. We'll make Ed bold as an example. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN="center"><B>Ed</B></TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Larry Curly Moe

We'll make him a link to my homepage.

<TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN="center"><A HREF="http://junior.apk.net/ ~jbarta/">Ed</A></TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Larry Curly Moe << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 11

Now get rid of all that stuff, bring back Tom and Rick and we'll dive into <ROWSPAN>. <TABLE BORDER=3> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Ed Tom Rick

Larry Curly Moe

As you may have guessed, <ROWSPAN> is just like <COLSPAN> 'cept y'all span rows instead of columns. (Not exactly brain surgery... is it?) If we remove Larry and let Ed take over his cell, this is the result. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Tom Rick Curly Moe

Ed

And of course, these attributes can also be used in combination. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Ed</TD> <TD COLSPAN=2>Tom</TD> </TR> <TR> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Ed

Tom Curly Moe << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 12

Now we're going to play around a little. Here's a little unordered list: Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

That's all fine & dandy, but what if we want to put it over here... Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

Because we want it to be next to a picture of...

a pie!

Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

By golly we could use a table to do that!

When studying or building a table, it's always easier when the borders are turned on.

Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

Let's build this thing one step at a time. It's really pretty simple! Start with little Ed. <TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

Replace Ed with the unordered list.

<TABLE BORDER=3> <TR> <TD> Ingredients for Apple Pie <UL> <LI>Apples <LI>Flour <LI>Sugar <LI>Cinnamon </UL> </TD> </TR> </TABLE> Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

Remember, in the absence of other instructions, the table will make itself just big enough to contain the data. So in this instance, a size attribute is not needed to accomodate the list. The table simply expands to the proper size.

Next we'll expand the table the full width of the browser window. <TABLE BORDER=3 WIDTH=100%> <TR> <TD> Ingredients for Apple Pie <UL> <LI>Apples <LI>Flour <LI>Sugar <LI>Cinnamon </UL> </TD>

</TR> </TABLE> Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

Isn't this fun! << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 13

Now we need to make a second cell. We want the left cell to be a little smaller than the right one. <TABLE BORDER=3 WIDTH=100%> <TR> <TD WIDTH=40%>&nbsp;</TD> <TD WIDTH=60%> Ingredients for Apple Pie <UL> <LI>Apples <LI>Flour <LI>Sugar <LI>Cinnamon </UL> </TD> </TR> </TABLE>

Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

As a matter of habit, you should always place a blank space (&nbsp;) in any empty cell.

Now would be a good time to copy applepie.gif to your working folder.

Plug the image into the first cell. <TABLE BORDER=3 WIDTH=100%> <TR> <TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD> <TD WIDTH=60%> Ingredients for Apple Pie <UL> <LI>Apples <LI>Flour <LI>Sugar <LI>Cinnamon </UL> </TD> </TR> </TABLE>

Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

All that's left is to align the pie image to the right side of the cell and turn off the border attribute. <TABLE BORDER=0 WIDTH=100%> <TR> <TD WIDTH=40% ALIGN="right"><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD> <TD WIDTH=60%> Ingredients for Apple Pie <UL> <LI>Apples <LI>Flour <LI>Sugar <LI>Cinnamon </UL> </TD> </TR> </TABLE> Ingredients for Apple Pie
q q q q

Apples Flour Sugar Cinnamon

Bingo! << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 14

Can we have a table within a table?? Let's try. Start with little Ed. <TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE> Ed

Make the table a fuzz bigger. <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>Ed</TD> </TR> </TABLE>

Ed

Replace Ed with a complete "little Ed" table <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD> <TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE> </TD> </TR> </TABLE>

Ed

Well, howa bout that!

Our table can also be centered very easily. <CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD> <TABLE BORDER=3>

<TR> <TD>Ed</TD> </TR> </TABLE> </TD> </TR> </TABLE> </CENTER>

Ed

<< BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor
Lesson 15

Here's a situation where a table can solve a common problem. Say you've got this great idea for an animated gif. But the picture you want to use is pretty big. Since you know that an animated gif is basically a series of gifs displayed one after another, you cringe at the size this thing is going to be. Your viewers won't be too happy about a 700Kb clodhopper coming down the pike at them. Not only that, but because of its size, their browser is going to choke trying to display it. One solution? Cut it up and display it as a table. Here's an example:

Netscape vs. Microsoft?

Artwork by Boris Vallejo

Here is the same table with the CELLSPACING set to 3.

Netscape vs. Microsoft?

The only part of the picture that is animated are the eyes. Here is the html code for that table. (The caption is just something I added for my own amusement. It is not required nor does it have any impact on the rest of the table) <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> <CAPTION ALIGN="top"><FONT SIZE=6><B><I>Netscape vs. Microsoft?</I></ B></FONT></CAPTION> <TR> <TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD> <TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD> <TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD> </TR> <TR> <TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD> </TR>

<TR> <TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD> </TR> </TABLE>

This is the layout.

FAQ: Why are there spaces in my tables (or between my images)? How can I make image A sit flush up against image B? A: This is a common problem. What's worse is it sometimes only shows up on certain browsers, thus leading to thoughts that the offending browser may be "faulty". There are a few possible causes and cures, all of which are outlined here.

Well that's about it for the table tags. Used to be that this was the end of the tutorial, but since I cannot stress enough the important role table tags can play in the creation of high quality web pages, I've added a few more examples. Try to reproduce them yourself. << BACK
Lessons:

NEXT >>
Quick Reference

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Hey, there's sp aces in my ta ble!
There are a few reasons why there may be spaces in your tables... 1. Table 1 - First, this is a table with no spaces. 2. Table 2 - One reason is not setting CELLPADDING and CELLSPACING to 0. The usual defaults are usually 1 and 2 respecively. 3. Table 3 - The most common reason are carriage returns within the cells: Change this: <TD> <IMG> </TD> To this: <TD><IMG></TD> Or, change this: <TD> <IMG> <IMG> <IMG> </TD> To this: <TD><IMG><IMG><IMG></TD> If you want to add carriage returns, do it within the tags themselves rather than between them: <TD property1="0" property2="0"

property3="0"><IMG attribute1="0" attribute2="0" attribute3="0"></TD> 4. Table 4 - If you use the images as links, you'll want to make sure that the attribute BORDER="0" is in the image tag or you might get not only spaces, but blue boxes around the sections (blue or whatever your link color is). Actually, it is good practice to include BORDER="0" in there anyway, because some browsers may default at 1. Keep in mind that these things can be happening one at a time, or in combination. Also, even with these three direct causes eliminated, you may find that something else is causing the problem indirectly.
Lessons: Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table 1

Lessons:

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor - Lesson 16 (last one!)
Well folks, that's it! For this tutorial that is. You have learned all the major TABLE tags. There are a few more, but nearly all of what you'll need to do can be done with these tags. Be sure to check out Form Tutor and Frames Tutor!

Here are some excellent materials that you may want to have a look at. Table Tutor, Form Tutorand Frames Tutor When you're past the basics and are ready to add a few high octane components to your web page, these three tutorials will take you step by step through the tags. The HTML Reference Library An outstanding html guide and reference source in windows HELP format. (Note that you must have Internet Explorer 4 installed for this latest version of the HTML Library to work.) Beginner's Guide to HTML A good concise guide that explains the basics very well. I keep a copy and still refer to it on occasion. Other outstanding HTML & web authoring sites: The Web Developer's Virtual Library irt.org HTML Goodies Webmonkey CNET Builder.com The World Wide Web Consortium

If you need stuff for your pages... - like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff!

Got a question?

"How do I fit a thigamajig around a whatchamacallit and put in one of those doohickeys?" Almost without exception your question has already been asked... and already been answered. Look here for FAQs (Frequently Asked Questions) from this tutorial, and links to other excellent HTML FAQ lists. Got any suggestions? Let's hear 'em. Want to get on the WebTutor mailing list? Sign-up. If you would like to add a link to the Professional Web Design site, you are welcome to use one of the following. Just copy the code, paste it into your page and you're all set.
<A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_white.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_teal.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/158x60_webtutor_white.gif" WIDTH="158" HEIGHT="60" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/160x50_webtutor_teal.gif" WIDTH="160" HEIGHT="50" BORDER="0" ALT="Get WebTutor!"></A>

<< BACK
Lessons: Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 12

FAQ: When I press the Submit button, all I get is a New Mail Message that pops up. What am I doing wrong? A: You're not doing anything "wrong". Your particular browser/email setup is not handling mailto forms very well. You'll need to use a CGI script to handle your forms. Q: Is this going to happen to people using my form too? A: It will invariably happen to a few. Once again, using a CGI form handler eliminates these problem.

We can easily change what the buttons say. <FORM> <INPUT TYPE="submit" VALUE="Send it away Ray!"> <INPUT TYPE="reset" VALUE="Clear the form Norm!"> </FORM>
Send it away Ray! Clear the form Norm!

If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.

Can we use an image for a Submit button? Sure, piece of cake. <FORM> <INPUT TYPE="image" SRC="submit.gif"> </FORM>

Add WIDTH & HEIGHT so your browser can load your page quickly and efficiently. Add an ALT attribute so if someone is running without images they can still submit your form. And add BORDER=0 if you want the little link colored box to go away. <FORM> <INPUT TYPE="image" SRC="images/submit.gif" WIDTH=94 HEIGHT=26 BORDER=0 ALT="Submit"> </FORM>

Note that the INPUT TYPE="image" is, by default, a Submit button only. You can't make a Reset image button.

FAQ: Can I make a simple button that just takes the user to another page? A: Sure... <FORM ACTION="../tables/index.html"> <INPUT TYPE="submit" VALUE="Table Tutor"> </FORM>
Table Tutor

<< BACK

NEXT >>

Form Tutor

Lessons:

Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Quick Reference

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 11

Yet another type of input is HIDDEN input. <INPUT TYPE="hidden" NAME="LOCATION" VALUE="USA Form"> A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page. Let's suppose you were a company trying to generate leads for a new product. You have a standard form for gathering information... name, company, phone, products interested in, etc. The only problem is there are 6 slightly different versions of the form in 6 slightly different places. You need to know what's coming from where. What to do? You could add a HIDDEN input to your forms like so... <INPUT TYPE="hidden" NAME="LEADFORM" VALUE="Version 1"> ...for the first version <INPUT TYPE="hidden" NAME="LEADFORM" VALUE="Version 2"> ...for the second version <INPUT TYPE="hidden" NAME="LEADFORM" VALUE="Version 3"> ...for the third version And so on and so forth yada yada yada. By the way, it doesn't matter what the name/value pair in the hidden input is (or any input for that matter). It can be anything you want. This would be a perfectly legitimate HIDDEN input...

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...You would get back E=Mc^2 HIDDEN inputs are also useful for cgi scripts. For example, many Internet Service Providers have a script you can have your forms sent to. It then spits the form back to you all nice and neat and ready for human consumption. The hidden input tells the cgi script who you are, where to send the parsed data, etc.

An occasionally useful input is the File Upload input. With it your visitors can send you a file right off their hard drive. <FORM> <INPUT TYPE=FILE NAME="myfile"> </FORM>
Browse...

When using this type of input, you must use ENCTYPE="multipart/form-data" in your FORM tag. Also be aware that the occasional older browser doesn't support this type of input and that when this input is used in a mailto form, the results can often be unpredictable.

Last on the list are the SUBMIT and RESET buttons. They really are very simple... <FORM> <INPUT TYPE="submit"> </FORM>
Submit Query

SUBMIT of course, sends the data...

...and RESET, clears the form. <FORM> <INPUT TYPE="reset">

</FORM>
Reset

<< BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 10

A very useful type of input is <TEXTAREA>. <FORM> <TEXTAREA NAME="COMMENTS"> </TEXTAREA> </FORM>

You control the size of the box like so... <FORM> <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> </TEXTAREA> </FORM>

ROWS is the height, COLS is the width.

\\|// (@ @) +--------------------oOO----(_)----OOo-----------------------+ | | | This is to illustrate that if you type something between | | the TEXTAREA tags, it will show up in the window as the | | default text. The cool part is... it shows up EXACTLY | | the way you type it! | | | | * Most, but not all, browsers behave this way. | +------------------------------------------------------------+ |__|__| || || ooO Ooo

Html code for this textarea here.

A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it. <FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="soft"> </TEXTAREA> </FORM>

WRAP="soft" means that the text in the box wraps, but it is sent as one long continuous string.

<FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="hard"> </TEXTAREA> </FORM>

WRAP="hard" means that the text in the box wraps, and it is sent that way too.

<FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="off"> </TEXTAREA> </FORM>

This is normally the default. WRAP="off" means that the text in the box does not wrap, although it is sent exactly the way it was typed in. << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Textarea Example
<FORM> <TEXTAREA NAME="COMMENTS" ROWS=16 COLS=67> \\|// (@ @) +--------------------oOO----(_)----OOo-----------------------+ | | | This is to illustrate that if you type something between | | the TEXTAREA tags, it will show up in the window as the | | default text. The cool part is... it shows up EXACTLY | | the way you type it! | | | | * Most, but not all, browsers behave this way. | +------------------------------------------------------------+ |__|__| || || ooO Ooo </TEXTAREA> </FORM>
Lessons: Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 1

Just like "follow the bouncing ball", I want you to open up Notepad (Yes, Notepad!) and follow me. Copy and paste the following to get started: <HTML> <HEAD> <TITLE>Joe's the handsomest guy I know</TITLE> </HEAD> <BODY> </BODY> </HTML> Save it as form1.html in some folder somewhere. Go ahead and give it its own folder. Start up your browser. Use it to open form1.html and run Notepad and the browser side by side. This way you can create your pages and almost instantaneously see the results of your handiwork. If hitting the reload button is not quite resetting everything, hit the reload button while holding down the SHIFT key. Type in your form tags. <HTML> <HEAD>

<TITLE>Joe's the handsomest guy I know</TITLE> </HEAD> <BODY> <FORM> </FORM> </BODY> </HTML> Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do. 1) You can send the data to a CGI script for processing. The parsed data is then emailed to you. This is the preferred method, or 2) You can have the data emailed directly to you using the mailto action. This is simpler but less reliable. For the sake of simplicity, we will start with the second method. <HTML> <HEAD> <TITLE>Joe's the handsomest guy I know</TITLE> </HEAD> <BODY> <FORM METHOD=POST ACTION="mailto:abc@123.com" ENCTYPE="text/plain"> </FORM> </BODY> </HTML> The only thing you have to do is plug in your email address after mailto: To send the data to more than one email address, separate them with commas... larry@3stooges.org,curly@3stooges.org,mo@3stooges.org Now, I said that this method is simple, but not entirely reliable. For the time being, it is perfectly OK to use this method as you work through the tutorial. As you complete the lessons you can practice sending yourself information. For most people, under most circumstances, everything will be just fine. However, for some folks, submitting a mailto form results in just a blank mail message popping up. Nothing is harmed, but nothing is sent either. I've written a simple demo that will generate a mailto form for you. You can use it to see how your system handles mailto forms.

If you'd like, you can skip the rest of this lesson for now and dive right into making forms. After you learn a little about forms (or if you're having trouble submitting them), definitely come back here and learn more about form processing. Skip ahead to Lesson 2

As I mentioned earlier, sometimes, depending on the sender's browser/email configuration, using the mailto action might just bring up an empty New Mail window instead of sending the form data. Sometimes (rarely) you'll click on the button and nothing will happen. In this case you will not be able to even practice with the simpler mailto action. You will have to go straight into using a CGI form handler to practice with. Before we get into that, there is one more thing about the mailto action that I want to mention. Sometimes, depending on the person sending the data, you will recieve the data in a very strange format. Instead of something nice & neat like this... FORMNAME=New Entrant NAME=R.U. Havinfun ADDRESS=1313 Mockingbird Lane CITY=Beverly Hills STATE=CA The info comes back looking like this... FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313 +Mockingbird+Lane&CITY=Beverly+Hills&STATE=CA What you may want to keep handy is a little program that converts this "raw" data into a human readable format. For Windows users, one such program is Mailto Converter. (It is distributed as part of this tutorial, clicking on the link will "download" it to where ever you'd like.)

CGI Form Handling
The most common and reliable way to process your form data is to send it to a script on a server for processing. The most obvious place to look for such a script is your own ISP or web host. Most have a form mail script that you can send the data to. If you look at their help pages (hopefully they have help pages), you will probably find directions for using their script. The directions normally involve setting the ACTION attribute to a particular something...

ACTION="/cgi-bin/mail.pl"

(this is just an example)

They may also require that you insert some HIDDEN fields in the form so they know where to send the processed data to and where to send your visitor after he fills out your form... <input type=hidden name="to" value="buckie@yadayada.com"> <input type=hidden name="return-url" value="http://yadayada.com/ thanksdude.html"> (Once again, these are examples. Don't use them unless you like disappointment.) If for some reason your ISP or web host is unable to provide a form mail script, all is certainly not lost. You still have a few options. One option is to use one of many free form processing services out there. These are simply form mail scripts that reside somewhere else but are offered for use to the general public. Below are two places where you might be able to find one. http://www.cgi-resources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/ http://www.sbrady.com/hotsource/cgi/index.html#ffp Another option (only if you have access to your server's CGI bin) is to run your own script. Here again are places where you might be able to find a script. http://www.cgi-resources.com/Programs_and_Scripts/ http://www.artsackett.com/freebies/asform/ Once again, use a CGI script one way or another if you can. The mailto method is simple sure, but for a portion of your visitors (2%? 10%? more?) the thing will fail. << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Mailto Test
Enter your email address and click the button. A simple mailto form will be generated below using your email address. You can then send it to yourself to see if it works and what it looks like. (For you Nervous Nellies out there, your email address isn't sent anywhere but to you.)

Generate

Form Tutor
Lesson 2

Now, just to keep things a little cleaner I am going to start writing only the <FORM> tags. I will leave out the head, body, title and form tag attributes from now on. Needless to say, leave them in your document. The most common TYPE of form <INPUT> is TEXT. <FORM> <INPUT TYPE="text"> </FORM>

Every input needs a NAME. <FORM> <INPUT TYPE="text" NAME="ADDRESS"> </FORM>

When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with ADDRESS so the end result after processing will be ADDRESS=1313

Mockingbird Lane.

We can if we want, type in a VALUE. <FORM> <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St"> </FORM>
44 Cherry St

This will automatically pair the value 44 Cherry St with the name ADDRESS, unless the user changes it. Note - be sure to use quotes where I've specified.

We can specify the size of the text input box. <FORM> <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10> </FORM>
44 Cherry St

<FORM> <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20> </FORM>
44 Cherry St

<FORM> <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30> </FORM>
44 Cherry St

As you can see, the default value is (usually) 20. You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

Note - A text box is not always the same size between browsers. Author a form with one browser, then view it in another browser, and you'll see them rendered a little differently. The only time this becomes a problem is when you try to get into precision form layout. (Actually precision layout of anything on a web page is just begging for problems.) << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 3

Go ahead and remove VALUE="44 Cherry St". <FORM> <INPUT TYPE="text" NAME="ADDRESS" SIZE=30> </FORM>

If we want, we can specify how many characters a user can input. Just go ahead and try to input more than 10 characters! <FORM> <INPUT TYPE="text" NAME="ADDRESS" SIZE=30 MAXLENGTH=10> </FORM>

I suppose this feature might come in handy now and again, but unless you think someone's going to send the whole King James Bible down the pike at you, I wouldn't worry about it.

Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it displays *** instead of the actual input. The browser will send you the input, it just won't display it. <FORM> <INPUT TYPE="password"> </FORM>

Remember that each <INPUT> must have a NAME. <FORM> <INPUT TYPE="password" NAME="USERPASS"> </FORM>

SIZE, VALUE, and MAXLENGTH attributes work here also. By the way, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 4

Next up are Radio Buttons and Check Boxes. Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of several options. First let's build some Radio Buttons. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND"> </FORM>

Now add 2 more. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND"> <INPUT TYPE="radio" NAME="BEST FRIEND"> <INPUT TYPE="radio" NAME="BEST FRIEND"> </FORM>

Hmmm... I suppose we could insert a couple line breaks.

<FORM> <INPUT TYPE="radio" NAME="BEST FRIEND"> <BR><INPUT TYPE="radio" NAME="BEST FRIEND"> <BR><INPUT TYPE="radio" NAME="BEST FRIEND"> </FORM>

Note that each input has the same name. The reason will become apparent very shortly.

Each of the Radio Buttons must be assigned a VALUE. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed"> <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick"> <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom"> </FORM>

(If you're wondering why I shoved the top input over 4 spaces, the reason is simple... neat code. The neater and more organized you write your code, the easier it is to work with. Also, when you go back to make changes, having an orderly layout is half the battle.)

Now label each button. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed">Ed Holleran <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick">Rick Weinberg <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">Tom Studd </FORM>

Ed Holleran Rick Weinberg Tom Studd You can, of course, modify these labels with html tags if you wish.

Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional). <FORM> Who is your best friend? <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed" CHECKED>Ed Holleran <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick">Rick Weinberg <BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">Tom Studd </FORM> Who is your best friend? Ed Holleran Rick Weinberg Tom Studd The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair BEST FRIEND=Ed (or whoever they pick). << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 5

Building Check Boxes is pretty much the same thing. Start with this. <FORM> <INPUT TYPE="checkbox" NAME="Ed"> </FORM>

Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want) <FORM> <INPUT <BR><INPUT <BR><INPUT <BR><INPUT </FORM>

TYPE="checkbox" TYPE="checkbox" TYPE="checkbox" TYPE="checkbox"

NAME="Ed"> NAME="Rick"> NAME="Tom"> NAME="BM">

Each Check Box gets the same VALUE. <FORM> <INPUT <BR><INPUT <BR><INPUT <BR><INPUT </FORM>

TYPE="checkbox" TYPE="checkbox" TYPE="checkbox" TYPE="checkbox"

NAME="Ed" NAME="Rick" NAME="Tom" NAME="BM"

VALUE="YES"> VALUE="YES"> VALUE="YES"> VALUE="YES">

Note - For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don't feel bad, my simple mind still gets confused. That's why I lean heavily on html reference documents. (You thought I had all this in my head?? HA!)

OK, let's label each box. <FORM> <INPUT TYPE="checkbox" <BR><INPUT TYPE="checkbox" <BR><INPUT TYPE="checkbox" <BR><INPUT TYPE="checkbox" Meisterburger </FORM> Ed Holleran Rick Weinberg Tom Studd Burgermeister Meisterburger

NAME="Ed" NAME="Rick" NAME="Tom" NAME="BM"

VALUE="YES">Ed Holleran VALUE="YES">Rick Weinberg VALUE="YES">Tom Studd VALUE="YES">Burgermeister

And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults. Only if you want to of course. <FORM>

Which of these guys are your friends? <BR><INPUT TYPE="checkbox" NAME="Ed" <BR><INPUT TYPE="checkbox" NAME="Rick" <BR><INPUT TYPE="checkbox" NAME="Tom" <BR><INPUT TYPE="checkbox" NAME="BM" Meisterburger </FORM> Which of these guys are your friends? Ed Holleran Rick Weinberg Tom Studd Burgermeister Meisterburger

VALUE="YES" CHECKED>Ed Holleran VALUE="YES">Rick Weinberg VALUE="YES" CHECKED>Tom Studd VALUE="YES">Burgermeister

The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/ value pairs... Ed=YES Tom=YES (or what ever they choose... if they choose nothing, nothing will be returned to you) << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 6

Now a question might come to mind... What if I want to ask 3 different questions about the same group of guys?? How, Mr Smartypants am I going to do that! Well, just settle down and I'll show you. Which of these guys would you Which of these guys would you Which of these guys are your trust with your sister? lend money to? friends? Ed Holleran Ed Holleran Ed Holleran Rick Weinberg Rick Weinberg Rick Weinberg Tom Studd Tom Studd Tom Studd Burgermeister Meisterburger Burgermeister Meisterburger Burgermeister Meisterburger It's true that in each form there should never be duplicate NAMEs. So, maybe we could use a different name for each question. (When I say never, I don't mean that your computer will blow up... at most it might confuse the browser or the form handler. At the very least it will confuse the poor sap that has to make sense of the form data.) What follows is the html for these 3 questions. The <TABLE> tags are in blue. They are for appearance only, they don't affect how the form works. If you need to brush up on your <TABLE> tags, then stumble on over to Table Tutor.

<FORM> <TABLE BORDER=1><TR><TD WIDTH=33%> Which of these guys are your friends? <BR><INPUT TYPE="checkbox" NAME="Friend?..Ed" VALUE="YES">Ed Holleran <BR><INPUT TYPE="checkbox" NAME="Friend?..Rick" VALUE="YES">Rick Weinberg <BR><INPUT TYPE="checkbox" NAME="Friend?..Tom" VALUE="YES">Tom Studd <BR><INPUT TYPE="checkbox" NAME="Friend?..BM" VALUE="YES">Burgermeister Meisterburger </TD><TD WIDTH=33%> Which of these guys would you lend money to? <BR><INPUT TYPE="checkbox" NAME="Lend money?..Ed" VALUE="YES">Ed Holleran <BR><INPUT TYPE="checkbox" NAME="Lend money?..Rick" VALUE="YES">Rick Weinberg <BR><INPUT TYPE="checkbox" NAME="Lend money?..Tom" VALUE="YES">Tom Studd <BR><INPUT TYPE="checkbox" NAME="Lend money?..BM" VALUE="YES">Burgermeister Meisterburger </TD><TD WIDTH=34%> Which of these guys would you trust with your sister? <BR><INPUT TYPE="checkbox" NAME="Date sister?..Ed" VALUE="YES">Ed Holleran <BR><INPUT TYPE="checkbox" NAME="Date sister?..Rick" VALUE="YES">Rick Weinberg <BR><INPUT TYPE="checkbox" NAME="Date sister?..Tom" VALUE="YES">Tom Studd <BR><INPUT TYPE="checkbox" NAME="Date sister?..BM" VALUE="YES">Burgermeister Meisterburger </TD></TR></TABLE> </FORM>

Let's suppose the user checked the following boxes...

Which of these guys would you Which of these guys would you Which of these guys are your trust with your sister? lend money to? friends? Ed Holleran Ed Holleran Ed Holleran Rick Weinberg Rick Weinberg Rick Weinberg Tom Studd Tom Studd Tom Studd Burgermeister Meisterburger Burgermeister Meisterburger Burgermeister Meisterburger ...doing that would send you the following name/value pairs. Friend?..Ed=YES Friend?..Rick=YES Friend?..Tom=YES Lend money?...Tom=YES Lend money?...BM=YES Date sister?...Ed=YES Date sister?...Tom=YES Date sister?...BM=YES Ain't it cool? << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 7

Before we go on, there is one more thing I want to mention. You can also use images in a form. As a matter of fact, you can use just about anything in a form or a form in anything. Just watch your html syntax and avoid overlapping tags.

A Presidential Quiz

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

The html for the above form is here if you are interested. ...and the answers are here ...if you need them. Overlapping tags, for those that are wondering, are tags that... um... overlap. Let me illustrate. <TABLE><FORM></TABLE></FORM> <TABLE><FORM></FORM></TABLE> Overlapping tags.... bad Nested tags.... good NEXT >>
Quick Reference

<< BACK
Lessons:

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Presidential Quiz Source
<FORM> <CENTER><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4> <CAPTION ALIGN=top><FONT SIZE=5><I>A Presidential Quiz</I></FONT></ CAPTION> <!--***** Start of row 1 *****--> <TR> <TD ALIGN=center><IMG SRC="images/clinton.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Clinton" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Clinton" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR>&nbsp;<BR></TD> <TD ALIGN=center><IMG SRC="images/bush.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Bush" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Bush" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR>&nbsp;<BR></TD> <TD ALIGN=center><IMG SRC="images/reagan.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Reagan" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Reagan" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR>&nbsp;<BR></TD> <TD ALIGN=center><IMG SRC="images/carter.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Carter" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Carter" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR>&nbsp;<BR></TD> <TD ALIGN=center><IMG SRC="images/ford.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Ford" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Ford" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR>&nbsp;<BR></TD> <TD ALIGN=center><IMG SRC="images/nixon.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Nixon" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Nixon" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR>&nbsp;<BR></TD> </TR> <!--***** Start of row 2 *****--> <TR> <TD ALIGN=center><IMG SRC="images/johnson.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Johnson" TYPE=radio VALUE="Rep"><FONT

SIZE=2>Rep</FONT><INPUT NAME="Johnson" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR></TD> <TD ALIGN=center><IMG SRC="images/kennedy.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Kennedy" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Kennedy" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR></TD> <TD ALIGN=center><IMG SRC="images/eisenhow.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Eisenhower" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Eisenhower" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR></TD> <TD ALIGN=center><IMG SRC="images/truman.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Truman" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Truman" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR></TD> <TD ALIGN=center><IMG SRC="images/fdr.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Roosevelt" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Roosevelt" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR></TD> <TD ALIGN=center><IMG SRC="images/hoover.gif" WIDTH=86 HEIGHT=101><BR><INPUT NAME="Hoover" TYPE=radio VALUE="Rep"><FONT SIZE=2>Rep</FONT><INPUT NAME="Hoover" TYPE=radio VALUE="Dem"><FONT SIZE=2>Dem</FONT><BR></TD> </TR> </TABLE></CENTER> </FORM>
Lessons: Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 8

The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag. Let's make one. <FORM> <SELECT> </SELECT> </FORM>

Don't forget to give it a name. <FORM> <SELECT NAME="BEST FRIEND"> </SELECT> </FORM>

Next add a few options.

<FORM> <SELECT NAME="BEST FRIEND"> <OPTION>Ed <OPTION>Rick <OPTION>Tom <OPTION>Guido </SELECT> </FORM>
Ed

And give each <OPTION> a VALUE. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION VALUE="ED">Ed <OPTION VALUE="RICK">Rick <OPTION VALUE="TOM">Tom <OPTION VALUE="GUIDO">Guido </SELECT> </FORM>
Ed

The default option is the one that is listed first.

We can specify a default other than the first option in the list. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION VALUE="ED">Ed <OPTION VALUE="RICK">Rick <OPTION VALUE="TOM" SELECTED>Tom <OPTION VALUE="GUIDO">Guido </SELECT> </FORM>
Tom

<< BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 9

A Scrolling List is very similar in construction to a Pull Down List. Let's add a few more names first though. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION VALUE="ED">Ed <OPTION VALUE="RICK">Rick <OPTION VALUE="TOM">Tom <OPTION VALUE="GUIDO">Guido <OPTION VALUE="HORACE">Horace <OPTION VALUE="REGGIE">Reggie <OPTION VALUE="MYRON">Myron </SELECT> </FORM>
Ed

All we gotta do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag. <FORM> <SELECT NAME="BEST FRIEND" SIZE=4>

<OPTION VALUE="ED">Ed <OPTION VALUE="RICK">Rick <OPTION VALUE="TOM">Tom <OPTION VALUE="GUIDO">Guido <OPTION VALUE="HORACE">Horace <OPTION VALUE="REGGIE">Reggie <OPTION VALUE="MYRON">Myron </SELECT> </FORM>
Ed Rick Tom Guido Horace

The SIZE is simply how many options show in the window. This stuff is CAKE!

Again, the default value is the first <OPTION>, and again we can change that by selecting one. <FORM> <SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="ED">Ed <OPTION VALUE="RICK">Rick <OPTION VALUE="TOM" SELECTED>Tom <OPTION VALUE="GUIDO">Guido <OPTION VALUE="HORACE">Horace <OPTION VALUE="REGGIE">Reggie <OPTION VALUE="MYRON">Myron </SELECT> </FORM>
Ed Rick Tom Guido Horace

I have no idea why you would use the selection feature for a Scrolling List but it's there and I just felt the need to tell you about it. Actually, I'll take that back. Here is a perfectly good use for it :-)

Ed Rick Tom Guido

(This effect is done using a combination of HTML and JavaScript. If you're curious about how it was done, the source is here. << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Flashing Selected Option Source
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"><!-var flashindex = 0; var flashdir = "down"; if (document.images) { smiley_ed = new smiley_ed.gif"; smiley_rick = new smiley_rick.gif"; smiley_tom = new smiley_tom.gif"; smiley_guido = new smiley_guido.gif";

Image(64,64); smiley_ed.src = Image(64,64); smiley_rick.src = Image(64,64); smiley_tom.src =

"images/ "images/ "images/

Image(64,64); smiley_guido.src = "images/

flashpics = new Array(4); flashpics[0] = "smiley_ed"; flashpics[1] = "smiley_rick"; flashpics[2] = "smiley_tom"; flashpics[3] = "smiley_guido"; } function hiLite(imgObjName) { if (document.images) { document.images['flashpic'].src = eval(flashpics[imgObjName] + ". src"); } }

function FlashSelect() { window.document.flashform.flashfriend[flashindex].selected = true; hiLite(flashindex); setTimeout('FlashSelect2()',500); } function FlashSelect2() { if (flashdir == "down") { flashindex++; if (flashindex == 4) { flashindex = 2; flashdir = "up"; } FlashSelect(); } else { flashindex--; if (flashindex == -1) { flashindex = 1; flashdir = "down"; } FlashSelect(); } } //--></SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF" onLoad="FlashSelect()"> <FORM NAME="flashform"> <TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=150><TR><TD> <SELECT NAME="flashfriend" SIZE=4> <OPTION VALUE="ED">Ed <OPTION VALUE="RICK">Rick <OPTION VALUE="TOM">Tom

<OPTION VALUE="GUIDO">Guido </SELECT> </TD><TD ALIGN="right"> <IMG SRC="images/smiley_ed.gif" WIDTH="64" HEIGHT="64" BORDER="0" NAME="flashpic" ALT=""> </TD></TR></TABLE> </FORM> </BODY> </HTML>
Lessons: Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor
Lesson 13

FAQ: How can I send my visitor to another page after they submit my form? A: That depends. If you are using a CGI script to process your forms (preferred) then that capability is probably there. The directions for using that particular script may have you send the redirect URL as a hidden field, or it may be specified in the CGI script itself. Either way, consult the documentation for that script. If you are using mailto forms then there's still something we can do. Understand however that mailto forms can be unreliable depending on the visitor's browser/email setup. Some visitors may have trouble sending the data. (How many? 5%? 20%? More? I don't know.) Also, the mailto redirect requires Javascript, and while most people have javascript enabled, those that don't won't get redirected. So, all warnings given... here's how to add a javascript redirect to a mailto form:

First add this in the HEAD section of your document... <SCRIPT language="JavaScript"><!-function FormRedirect(){ setTimeout('this.document.location.href = "page.html"',5000);} //--></SCRIPT> Where page.html is the URL of the redirect document. Then add this to your FORM tag... onSubmit="FormRedirect()" Below is a sample form. <FORM NAME="myform" METHOD=POST ACTION="mailto:abc@123.org" ENCTYPE="text/plain" onSubmit="FormRedirect()"> <INPUT TYPE="text" NAME="mytextbox" VALUE=""> <INPUT TYPE="submit"> </FORM> Note the 5000 in the function. It is a 5000 millisecond delay (5 seconds) and it's necessary to allow the browser to actually send the data before the redirect occurs. If the browser takes longer than 5 seconds, it redirects anyway and the data goes bye-bye. If the mailto action fails, the redirect happens anyway and the data again goes bye-bye. (Actually, the data is probably going to still be there if the user hits the back button. But, unless he makes other efforts to send it to you, you'll never see it.) Unfortunately a setup like this isn't the wisest thing in the world. In most instances it will work as planned, but it's sort of house of cards. A house of cards looks neat, but it doesn't take much to knock it down. Your form put together this way will be cool alright, but it wouldn't take much to make it take a dump.

One more little tidbit and we're going to wrap this up. When you put a mailto form on your page and someone sends you information, you'll notice that it is sent with a default Subject. If you're visitor was using Netscape you'd get the default Subject "Form posted from Mozilla". Other browsers might send "Form Response", etc. You can change this by editing what's in the <FORM> tag as follows...

<FORM METHOD=POST ACTION="mailto:robin@batman.org?subject=Jumpin Jellyfish!" ENCTYPE="text/plain"> Pretty cool huh? Be advised however, that floating around out there are a few old email clients that can't handle a subject specified in that manner. In that situation, the data might appear to be sent, but in reality, it just dissappears into oblivion. If an occasional lost response is a concern to you, don't specify a subject. If you skipped the part in the beginning that talked about CGI Form Handlers, I want you to go back and become familiar with the process. As I've said before, mailto forms can be a little troublesome and/or unreliable for a certain percentage of your visitors. If you are concerned about these potential problems, you should really use a form mail script. << BACK
Lessons:

NEXT >>
Quick Reference

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Lesson 14 (last one!)
Well folks, that's it! For this tutorial that is. You have learned all the major FORM tags. There is a little more here and there, but nearly all of what you'll need to do can be done with these tags. Be sure to check out Table Tutor and Frames Tutor!

Here are some excellent materials that you may want to have a look at. Table Tutor, Form Tutorand Frames Tutor When you're past the basics and are ready to add a few high octane components to your web page, these three tutorials will take you step by step through the tags. The HTML Reference Library An outstanding html guide and reference source in windows HELP format. (Note that you must have Internet Explorer 4 installed for this latest version of the HTML Library to work.) Beginner's Guide to HTML A good concise guide that explains the basics very well. I keep a copy and still refer to it on occasion. Other outstanding HTML & web authoring sites: The Web Developer's Virtual Library irt.org HTML Goodies Webmonkey CNET Builder.com The World Wide Web Consortium

If you need stuff for your pages... - like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff!

Got a question?

"How do I fit a thigamajig around a whatchamacallit and put in one of those doohickeys?" Almost without exception your question has already been asked... and already been answered. Look here for FAQs (Frequently Asked Questions) from this tutorial, and links to other excellent HTML FAQ lists. Got any suggestions? Let's hear 'em. Want to get on the WebTutor mailing list? Sign-up. If you would like to add a link to the Professional Web Design site, you are welcome to use one of the following. Just copy the code, paste it into your page and you're all set.
<A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_white.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_teal.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/158x60_webtutor_white.gif" WIDTH="158" HEIGHT="60" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/160x50_webtutor_teal.gif" WIDTH="160" HEIGHT="50" BORDER="0" ALT="Get WebTutor!"></A>

<< BACK
Lessons: Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Suggestion Box
About the tutorials and the web site... What's good? What's bad? What is over-explained? What is under-explained? What more would you like to see? What could you do without? Tell me.

jbarta@apk.net
General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

SiteMap & General Table of Contents
Red links are part of the WebTutor download (and of course at the web site) Blue links are available at the web site only, but much of it is downloadable. (If you can read this, then your browser may not be displaying alternate link colors.) Print version now available - Get the WebTutor book! Lots of good stuff... Software discounts, Pre-release of Javascript Tutor, Free Clipart, etc. WebTutor Version Check - Are you using the latest version?

So, you want to make a Web Page!
Lessons: Introduction Lesson 1: getting started, saving as html Lesson 2: background colors, background images Lesson 3: bold, italic, underlining, nesting tags Lesson 4: monospaced font, font size, font face Lesson 5: font color, more about nesting tags Lesson 6: section headings, link colors Lesson 7: line breaks Lesson 8: paragraph tag & paragraph aligning, centering Lesson 9: the "space code", special characters Lesson 10: inserting images, relative paths Lesson 11: ALT attribute, image dimensions, colored lines Lesson 12: simple links Lesson 13: email links, image links Lesson 14: more on linking Lesson 15: about image filesizes, the GIF Optimizer

Lesson 16: making & using thumbnails Lesson 17: more on images, image filesizes, thumbnails, anchors Lesson 18: screen resolution, blockquote Lesson 19: ordered & unordered lists Lesson 20: definition lists Lesson 21: horizontal rules Lesson 22: preformating, comments Lesson 23: final thoughts Lesson 24: more resources, WebTutor buttons Index and Quick Reference Quickres Color Picker Download ColorPicker Handy Dandy Font Viewer - (intro) About Netscape's 216 colors Special Characters About files GIF Optimizer Upload your page to the Web Joe's Short List of Free HTML Editors About Paint Shop Pro and IrfanView Download Paint Shop Pro version 3 Color Charts: Netscape's 216 colors (image) Netscape's 216 colors (page) Chart of 1536 colors (page)

Table Tutor
Lessons: Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 11 - 12 - 13 - 14 - 15 - 16 Ouick Index Why are there spaces in my tables? More examples - Do it with a Table! Colored horizontal lines using tables Picture framing using tables

Form Tutor
Lessons: Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 11 - 12 - 13 - 14 Quick Reference

Mailto Converter About CGI Form Handling

Frames Tutor
Lessons: Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 11 - 12 - 13 - 14 - 15 - 16 Templates Change 2 (or more) frames with one click: HTML method (preferred) JavaScript method Eliminating those pesky thin lines My Framz Page

Frequently Asked Questions
Bare Bones Guide to HTML (by Kevin Werbach) Suggestion Box Get on the WebTutor mailing list WebTutor Readme WebTutor printed version - Curl up with the WebTutor book! Re-posting WebTutor How to keep an idiot busy Build your own custom idiot page. Take a Joke Break JavaScript Tutor Learn and practice basic Javascript GateKeeper v3.2 Cool password protection with javascript. GateKeeper-II v3.2 GateKeeper v2.2 HTTP Authentication example & run through The Vault Magic Buttons 3.0 Learn to make javascript mouseovers. Index of Examples

MegaCounter - a "configurable" hit counter for the rest of us Millenium Clock - count down to Y2K Miscellaneous pages on various Web Authoring Topics Color charts Examples and use of the ALIGN attribute in an <IMG> tag How to add transparency to a GIF image with PaintShop Pro v4 GIF Compression Explained How to make multi-link jump boxes How to Make Popup Windows Image Compression Examples RGB to HEX conversion chart Grey Matter Web Pro - the high-tech web editor Resources for Web Authors Newest Resources Lines, Buttons & Bullets Photos, Images & Icons Backgrounds & Textures Java VRML HTML Tools JavaScript CGI Scripting Sounds & Music Miscellaneous Submit Resource NoteTab Clips C-Liner CSV-2-Table HTML-Wrap Image-Wrap ReverseText Slide Show Magic Miscellaneous clip snippets Filecons - A collection of icons designed for 16x16 resolution

Applications & Other Gizmos My Personal MessageBox v1.1 - A simple Windows utility Division Calculator v1.0 - A specialty calculator for craftsmen INI Test v1.3 - A demonstration of .ini file reading/writing Octagon Layout Calculator v1.0 - Layout octagons with ease Simple Checkbook v1.0 - A simple checkbook for MS Excel and MS Works Bug Report
General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

So, you want to make a Web Page!

INDEX
& Quick Reference

Basic Document Structure Structural Formatting Images

Basic Text Formatting Links Miscellaneous

Basic Document Structure
<HTML> <HEAD> <TITLE>My big ole bad page!</TITLE> </HEAD> <BODY> Hello Joe! </BODY> </HTML>

Basic Text Formatting
Make text bold: <B>Sample</B> Make text italics: <I>Sample</I>

Make text underlined: <U>Sample</U> Monospaced text: <TT>Sample</TT> Change font

size (sizes:1-7) <FONT

SIZE=5>Sample</FONT>

Change the font name (face) <FONT FACE="fontname1,fontname2, etc">Sample</FONT> Change the font color <FONT COLOR="#0000FF">Sample</FONT> Section headings (1-6): <H1>Sample</H1> Align the section heading: <H1 ALIGN="center">Sample</H1> Change text, link, etc color for whole page <BODY BGCOLOR="#123456" TEXT="#23456A" LINK="#3456AB" VLINK="#456ABC" ALINK="#56ABCD"> The Handy Dandy Font Viewer (intro page), Open viewer directly

The roll

ercoaster!

Structural Formatting
Line breaks <BR> Multiple line breaks: <BR> <BR> <BR>

New paragraph <P> New paragraph + ALIGN <P ALIGN="left|center|right">

Old style centering: <CENTER>Sample</CENTER> Horizontal Rule (plain default): <HR> With a few parameters: <HR ALIGN="left" WIDTH=90% SIZE=1 NOSHADE> Pull in your margins with Blockquote: <BLOCKQUOTE>Sample</BLOCKQUOTE> Ordered(<OL>) and Unordered(<UL>) lists: <OL> <LI>List item </OL>

Definition list (bold tags optional): <DL> <DT><B>Definition title</B> <DD>Definition item </DL>

Preformat tag: <PRE> Sample Sample Sample </PRE>

Images
Inserting an image (gif or jpg): <IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image"> Specify background image (gif or jpg): <BODY BACKGROUND="mybackground. gif">

Fixed background images (IE specific): <BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED> Save an image off of a page Image sources (SRC) explained in detail. About image sizes Using thumbnails Make lines out of a 1x1 dot The incredible GIF Optimizer!

Get Paint Shop Pro and IrfanView!

Links
Add a relative link <A HREF="page.html">My page</A> Add an absolute link: <A HREF="http://www.yahoo.com/page. html">Yahoo's page</A> Link to a particular section of a page: <A HREF="page.html#cheesewiz">About Cheese Wiz</A> Add an email link: <A HREF="mailto:scottie@enterprise.com">Email Scottie</A> Making an image a link: <A HREF="page.html"><IMG SRC="mypic.gif" WIDTH=123 HEIGHT=456></A> Get rid of the blue border around an image link <IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image" BORDER=0> Absolute vs Relative URLs

Miscellaneous Upload your pages to the Web.
Specify background color: <BODY BGCOLOR="#123456"> Specify background image (gif or jpg): <BODY BACKGROUND="mybackground. gif"> Fixed background images (IE specific): <BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED>

Tags in combination - Overlapping vs Nested tags More about Overlapping vs Nested tags About Netscape's 216 colors Netscape's 216 color chart (image) Netscape's 216 color chart (page) Chart of 1536 colors (page) Space code (special character for a space) &nbsp; Six main special characters: &nbsp; &lt; &gt; &amp; &quot; &shy; non-breaking space < less-than symbol > greater-than symbol & ampersand " quotation mark - soft hyphen

A whole bucketful of special characters About screen resolution Comment tag: <!-- This is a comment --> Save document as an HTML file View the source of any HTML document and see how they did stuff.

About files & file extensions Quickres Joe's Short List of FREE HTML Editors
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

a bit about FILES

On your computer, everything is stored as a file. Every file has a file extension that tells the world what kind of a file it is.
file name --->

diary.txt <--- file extension

A file is simply a packet of information such as a picture or a document. If you want to organize your files and put them into nice neat little groups, you'd use some folders. Folders don't come with file extensions because because they're not files. If your file extensions are not all showing, you can do the following to make them all magically appear... 1. In any window (like the one above) click View. 2. Click Options...

3. 4. 5. 6.

Click the View tab Click Show all files Make sure the Hide MS-DOS File Extensions box is not checked. Click OK

.txt is a plain old text file; .gif, .jpg and .bmp are image files; .mpg and .avi are movie files; .doc and .wri are formatted documents; .exe is an application or program; and .html or .htm are commonly known as HTML files. They are the backbone of Web Pages. You will be making a few very soon and you'll be surprised at how easy it is! Now let's get back to the tutorial!
So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ T H E B A R E B O N E S G U I D E T O H T M L by Kevin Werbach <http://werbach.com/> Version 4.0 -- January 1999 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

This document is available at <http://werbach.com/barebones/>, where you will also find the HTML formatted version, translations, and background materials. The Bare Bones Guide to HTML lists all the tags that current browsers are likely to recognize. I have included all the elements in the official HTML 4.0 recommendation with common attributes, as well as Netscape and Microsoft extensions. This document is a quick reference, not a complete specification; for official information about HTML and its development, see the World Wide Web Consortium site at <http://www.w3.org/MarkUp/>. The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. For links to some good step-by-step HTML guides, see <http://werbach.com/web/wwwhelp.html>.

FORMATTING OF THIS DOCUMENT ---------------------------------------------------------------------------This document looks best displayed in a monospaced font. For clarity, I have separated out tag attributes onto separate lines. Generally, multiple attributes can be applied to the same tag. Tags are listed in upper case for ease of reading, although most tags are not case sensitive.

SYMBOLS USED ----------------------------------------------------------------------------

URL ? % etc.) *** $$$$$$ ::: @ ,,, |

URL of an external file (or just file name if in the same directory) Arbitrary number (i.e. <H?> means <H1>, <H2>, <H3>, etc.) Arbitrary percentage (i.e. <HR WIDTH="%"> means <HR WIDTH="50%">, Arbitrary text (i.e. ALT="***" means fill in with text) Arbitrary hex (i.e. BGCOLOR="#$$$$$$" means BGCOLOR="#00FF1C", etc.) Arbitrary date (i.e. DATETIME=":::" means "1994-11-05T08:15:30" etc.) Email address (i.e. "mailto:@" means "mailto:kevin@werbach.com" etc.) Comma-delimited (i.e. COORDS=",,," means COORDS="0,0,50,50", etc.) Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER means pick one of these)

COMPATIBILITY (remember, HTML is evolving and browser implementations vary) ---------------------------------------------------------------------------(no notation) In the HTML 3.2 spec.; should work on all browsers 4.0 Introduced in HTML 4.0 recommendation N1 Netscape extension introduced with Navigator version 1.0 or 1.1 N2 Netscape extension introduced with Navigator version 2.0 N3 Netscape extension introduced with Navigator version 3.0 N4 Netscape extension introduced with Navigator/Communicator version 4.0 MS Microsoft Internet Explorer extension * Netscape extension now included in the HTML 4.0 specification =========================================================================== ===========================================================================

GENERAL (all HTML documents should have these) ---------------------------------------------------------------------------Document Type <HTML></HTML> (beginning and end of file) Title <TITLE></TITLE> (must be in header) Header <HEAD></HEAD> (descriptive info, such as title) Body <BODY></BODY> (bulk of the page)

STRUCTURAL DEFINITION (appearance controlled by the browser's preferences) ---------------------------------------------------------------------------Heading <H?></H?> (the spec. defines 6 levels) Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?> Division <DIV></DIV> Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> 4.0 Defined Content <SPAN></SPAN> Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually indented) 4.0 Quote <Q></Q> (for short quotations) 4.0 Citation <Q CITE="URL"></Q> Emphasis <EM></EM> (usually displayed as italic)

4.0 4.0 4.0 4.0 4.0 4.0 4.0 4.0

Strong Emphasis Citation Code Sample Output Keyboard Input Variable Definition Author's Address Large Font Size Small Font Size Insert Time of Change Comments Delete Time of Change Comments Acronym Abbreviation

<STRONG></STRONG> (usually displayed as bold) <CITE></CITE> (usually italics) <CODE></CODE> (for source code listings) <SAMP></SAMP> <KBD></KBD> <VAR></VAR> <DFN></DFN> (not widely implemented) <ADDRESS></ADDRESS> <BIG></BIG> <SMALL></SMALL> <INS></INS> (marks additions in a new version) <INS DATETIME=":::"></INS> <INS CITE="URL"></INS> <DEL></DEL> (marks deletions in a new version) <DEL DATETIME=":::"></DEL> <DEL CITE="URL"></DEL> <ACRONYM></ACRONYM> <ABBR></ABBR>

PRESENTATION FORMATTING (author specifies text appearance) ---------------------------------------------------------------------------Bold <B></B> Italic <I></I> 4.0* Underline <U></U> (not widely implemented) Strikeout <STRIKE></STRIKE> (not widely implemented) 4.0* Strikeout <S></S> (not widely implemented) Subscript <SUB></SUB> Superscript <SUP></SUP> Typewriter <TT></TT> (displays in a monospaced font) Preformatted <PRE></PRE> (display text spacing as-is) Width <PRE WIDTH=?></PRE> (in characters) Center <CENTER></CENTER> (for both text and images) N1 Blinking <BLINK></BLINK> (the most derided tag ever) Font Size <FONT SIZE=?></FONT> (ranges from 1-7) Change Font Size <FONT SIZE="+|-?"></FONT> Font Color <FONT COLOR="#$$$$$$"></FONT> 4.0* Select Font <FONT FACE="***"></FONT> N4 Point size <FONT POINT-SIZE=?></FONT> N4 Weight <FONT WEIGHT=?></FONT> 4.0* Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3) MS Marquee <MARQUEE></MARQUEE>

POSITIONING ----------------------------------------------------------------------------

N3 N3 N3 N3 N3 N3 N3 N3 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4

Multi-Column Column Gutter Column Width Spacer Spacer Type Size Dimensions Alignment Layer Name Location Rel. Position Source File Stacking Stack Position Dimensions Clipping Path Visible? Background Color Inline Layer Alt. Content

<MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> <MULTICOL WIDTH=?></MULTICOL> <SPACER> <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=LEFT|RIGHT|CENTER> <LAYER></LAYER> <LAYER ID="***"></LAYER> <LAYER LEFT=? TOP=?></LAYER> <LAYER PAGEX=? PAGEY=?></LAYER> <LAYER SRC="***"></LAYER> <LAYER Z-INDEX=?></LAYER> <LAYER ABOVE="***" BELOW="***"></LAYER> <LAYER HEIGHT=? WIDTH=?></LAYER> <LAYER CLIP=,,,></LAYER> <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER> <LAYER BACKGROUND="$$$$$$"></LAYER> <LAYER BGCOLOR="$$$$$$"></LAYER> <ILAYER></ILAYER> (takes same attributes as LAYER) <NOLAYER</NOLAYER>

LINKS, GRAPHICS, AND SOUNDS ---------------------------------------------------------------------------Link Something <A HREF="URL"></A> Link to Location <A HREF="URL#***"></A> (if in another document) <A HREF="#***"></A> (if in current document) 4.0* Target Window <A HREF="URL" TARGET="***"></A> 4.0* Action on Click <A HREF="URL" ONCLICK="***"></A> (Javascript) 4.0* Mouseover Action <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript) 4.0* Mouse out Action <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript) Link to Email <A HREF="mailto:@"></A> Specify subject <A HREF="mailto:@?SUBJECT=***"></A> (use a real ?) Define Location <A NAME="***"></A> Display Image <IMG SRC="URL"> Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT| RIGHT> N1 Alignment <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE|ABSBOTTOM> Alternate <IMG SRC="URL" ALT="***"> (if image not displayed) Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels) <IMG SRC="URL" WIDTH=% HEIGHT=%> (as percentage) Border <IMG SRC="URL" BORDER=?> (in pixels) Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)

N1

MS MS

N1 N2 N2 4.0 4.0

Low-Res Proxy <IMG SRC="URL" LOWSRC="URL"> Imagemap <IMG SRC="URL" ISMAP> (requires a script) Imagemap <IMG SRC="URL" USEMAP="URL"> Movie Clip <IMG DYNSRC="***" START="***" LOOP=?> Background Sound <BGSOUND SRC="***" LOOP=?|INFINITE> Client-Side Map <MAP NAME="***"></MAP> (describes the map) Map Section <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF> Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> Embed Object <EMBED SRC="URL"> (insert object into page) Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?> Object <OBJECT></OBJECT> Parameters <PARAM>

DIVIDERS ---------------------------------------------------------------------------Paragraph <P></P> (closing tag often unnecessary) Align Text <P ALIGN=LEFT|CENTER|RIGHT></P> N Justify Text <P ALIGN=JUSTIFY></P> Line Break <BR> (a single carriage return) Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL> Horizontal Rule <HR> Alignment <HR ALIGN=LEFT|RIGHT|CENTER> Thickness <HR SIZE=?> (in pixels) Width <HR WIDTH=?> (in pixels) Width Percent <HR WIDTH="%"> (as a percentage of page width) Solid Line <HR NOSHADE> (without the 3D cutout look) N1 No Break <NOBR></NOBR> (prevents line breaks) N1 Word Break <WBR> (where to break a line if needed)

LISTS (lists can be nested) ----------------------------------------------------------------------------Unordered List <UL><LI></UL> (<LI> before each list item) Compact <UL COMPACT></UL> Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list) <LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent) Ordered List <OL><LI></OL> (<LI> before each list item) Compact <OL COMPACT></OL> Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list) <LI TYPE=A|a|I|i|1> (this & subsequent) Starting Number <OL START=?> (for the whole list) <LI VALUE=?> (this & subsequent) Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition) Compact <DL COMPACT></DL>

Menu List Compact Directory List Compact

<MENU><LI></MENU> (<LI> before each list item) <MENU COMPACT></MENU> <DIR><LI></DIR> (<LI> before each list item) <DIR COMPACT></DIR>

BACKGROUNDS AND COLORS ---------------------------------------------------------------------------Tiled Bkground <BODY BACKGROUND="URL"> MS Watermark <BODY BGPROPERTIES="FIXED"> Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue) Text Color <BODY TEXT="#$$$$$$"> Link Color <BODY LINK="#$$$$$$"> Visited Link <BODY VLINK="#$$$$$$"> Active Link <BODY ALINK="#$$$$$$"> (More info at <http://werbach.com/web/wwwhelp.html#color>)

SPECIAL CHARACTERS (these must all be in lower case) ---------------------------------------------------------------------------Special Character &#?; (where ? is the ISO 8859-1 code) < &lt; > &gt; & &amp; " &quot; Registered TM &#174; Registered TM &reg; Copyright &#169; Copyright &copy; Non-Breaking Spc &nbsp; (Complete list at <http://www.uni-passau.de/%7Eramsch/iso8859-1.html>)

FORMS (generally require a script on your server) ---------------------------------------------------------------------------Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM> 4.0* File Upload <FORM ENCTYPE="multipart/form-data"></FORM> Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET"> Field Name <INPUT NAME="***"> Field Value <INPUT VALUE="***"> Checked? <INPUT CHECKED> (checkboxes and radio boxes) Field Size <INPUT SIZE=?> (in characters) Max Length <INPUT MAXLENGTH=?> (in characters) 4.0 Button <BUTTON></BUTTON> 4.0 Button Name <BUTTON NAME="***"></BUTTON> 4.0 Button Type <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>

4.0 4.0 4.0

4.0

N2 4.0 4.0 4.0

Default Value <BUTTON VALUE="***"></BUTTON> Label <LABEL></LABEL> Item Labelled <LABEL FOR="***"></LABEL> Selection List <SELECT></SELECT> Name of List <SELECT NAME="***"></SELECT> # of Options <SELECT SIZE=?></SELECT> Multiple Choice <SELECT MULTIPLE> (can select more than one) Option <OPTION> (items that can be selected) Default Option <OPTION SELECTED> Option Value <OPTION VALUE="***"> Option Group <OPTGROUP LABEL="***"></OPTGROUP> Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTAREA> Name of Box <TEXTAREA NAME="***"></TEXTAREA> Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA> Group elements <FIELDSET></FIELDSET> Legend <LEGEND></LEGEND> (caption for fieldsets) Alignment <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>

TABLES ---------------------------------------------------------------------------Define Table <TABLE></TABLE> 4.0* Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER> Table Border <TABLE BORDER></TABLE> (either on or off) Table Border <TABLE BORDER=?></TABLE> (you can set the value) Cell Spacing <TABLE CELLSPACING=?> Cell Padding <TABLE CELLPADDING=?> Desired Width <TABLE WIDTH=?> (in pixels) Width Percent <TABLE WIDTH=%> (percentage of page) 4.0* Table Color <TABLE BGCOLOR="$$$$$$"></TABLE> 4.0 Table Frame <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE> 4.0 Table Rules <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE> MS Border Color <TABLE BORDERCOLOR="$$$$$$"></TABLE> MS Dark Border <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> MS Light Border <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> Table Row <TR></TR> Alignment <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> Table Cell <TD></TD> (must appear within table rows) Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> No linebreaks <TD NOWRAP> Columns to Span <TD COLSPAN=?> Rows to Span <TD ROWSPAN=?> 4.0* Desired Width <TD WIDTH=?> (in pixels) N3 Width Percent <TD WIDTH="%"> (percentage of table)

4.0*

4.0* N3 4.0* 4.0 4.0 4.0

4.0 4.0 4.0 4.0 4.0 4.0 4.0 4.0

<TD BGCOLOR="#$$$$$$"> <TH></TH> (same as data, except bold centered) <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> No Linebreaks <TH NOWRAP> Columns to Span <TH COLSPAN=?> Rows to Span <TH ROWSPAN=?> Desired Width <TH WIDTH=?> (in pixels) Width Percent <TH WIDTH="%"> (percentage of table) Cell Color <TH BGCOLOR="#$$$$$$"> Table Body <TBODY> Table Footer <TFOOT></TFOOT> (must come before THEAD> Table Header <THEAD></THEAD> Table Caption <CAPTION></CAPTION> Alignment <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> Column <COL></COL> (groups column attributes) Columns Spanned <COL SPAN=?></COL> Column Width <COL WIDTH=?></COL> Width Percent <COL WIDTH="%"></COL> Group columns <COLGROUP></COLGROUP> (groups column structure) Columns Spanned <COLGROUP SPAN=?></COLGROUP> Group Width <COLGROUP WIDTH=?></COLGROUP> Width Percent <COLGROUP WIDTH="%"></COLGROUP>

Cell Color Header Cell Alignment

FRAMES (define and manipulate specific regions of the screen) ---------------------------------------------------------------------------4.0* Frame Document <FRAMESET></FRAMESET> (instead of <BODY>) 4.0* Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %) 4.0* Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size) 4.0* Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %) 4.0* Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size) 4.0* Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET> 4.0* Border Width <FRAMESET BORDER=?></FRAMESET> 4.0* Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> N3 Frame Spacing <FRAMESET FRAMESPACING=?></FRAMESET> 4.0* Define Frame <FRAME> (contents of an individual frame) 4.0* Display Document <FRAME SRC="URL"> 4.0* Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top> 4.0* Margin Width <FRAME MARGINWIDTH=?> (left and right margins) 4.0* Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins) 4.0* Scrollbar? <FRAME SCROLLING="YES|NO|AUTO"> 4.0* Not Resizable <FRAME NORESIZE> 4.0* Borders <FRAME FRAMEBORDER="yes|no"> 4.0* Border Color <FRAME BORDERCOLOR="#$$$$$$"> 4.0* Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers) 4.0 Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME)

4.0 4.0

Dimensions Dimensions

<IFRAME WIDTH=? HEIGHT=?></IFRAME> <IFRAME WIDTH="%" HEIGHT="%"></IFRAME>

SCRIPTS AND JAVA ---------------------------------------------------------------------------Script <SCRIPT></SCRIPT> Location <SCRIPT SRC="URL"></SCRIPT> Type <SCRIPT TYPE="***"></SCRIPT> Language <SCRIPT LANGUAGE="***"></SCRIPT> 4.0* Other Content <NOSCRIPT></NOSCRIPT> (if scripts not supported) Applet <APPLET></APPLET> File Name <APPLET CODE="***"> Parameters <APPLET PARAM NAME="***"> Location <APPLET CODEBASE="URL"> Identifier <APPLET NAME="***"> (for references) Alt Text <APPLET ALT="***"> (for non-Java browsers) Alignment <APPLET ALIGN="LEFT|RIGHT|CENTER"> Size <APPLET WIDTH=? HEIGHT=?> (in pixels) Spacing <APPLET HSPACE=? VSPACE=?> (in pixels) N4 Server Script <SERVER></SERVER>

MISCELLANEOUS ---------------------------------------------------------------------------Comment <!-- *** --> (not displayed by the browser) Prologue <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Searchable <ISINDEX> (indicates a searchable index) Prompt <ISINDEX PROMPT="***"> (text to prompt input) Send Search <A HREF="URL?***"></a> (use a real question mark) URL of This File <BASE HREF="URL"> (must be in header) 4.0* Base Window Name <BASE TARGET="***">(must be in header) Relationship <LINK REV="***" REL="***" HREF="URL"> (in header) N4 Linked File <LINK TYPE="***" SRC="***"></LINK> Meta Information <META> (must be in header) Style Sheets <STYLE></STYLE> (implementations vary) 4.0 Bidirect Off <BDO DIR=LTR|RTL></BDO> (for certain character sets)

============================================================================ Copyright (c) 1995-1999 Kevin Werbach. Redistribution is permitted, so long as there is no charge and this document is included without alteration in its entirety. This Guide is not a product of Bare Bones Software. More information is available at <http://werbach.com/barebones>.

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor - Quick Index
A basic 2-row, 3-column table: Roses are red Violets are blue Useful and optional table attributes.
(In addition to the attributes shown here, there are a few others. The ones here are limited to those that are commonly used, widely supported and mentioned in this tutorial. Consult the BareBones Guide packed with this tutorial for an expanded listing, and consult the latest HTML Reference Library for more on which attributes work with which browsers.)

<TABLE <TABLE BORDER=2> CELLPADDING=0 or greater <TR> CELLSPACING=0 or greater <TD>Roses</TD> BORDER=0 or greater <TD>are</TD> WIDTH=pixel or percent value <TD>red</TD> </TR> HEIGHT=pixel or percent value (not overly reliable) <TR> BGCOLOR="#123456" <TD>Violets</TD> > <TD>are</TD> <TD>blue</TD> <TR </TR> BGCOLOR="#123456" </TABLE> > <TD ALIGN="left|center|right" VALIGN="top|middle|bottom" WIDTH=pixel or percent value (not overly reliable) BGCOLOR="#123456" COLSPAN=1 or greater ROWSPAN=1 or greater > Remember, it's very good practice to ALWAYS include </TD>, </TR> and </ TABLE> closing tags in your tables. If you don't, you run the risk of large chunks of your page not being rendered in some browsers. Consider yourself warned ;-)

Do it with a Table! Color charts:
Lessons:

Picture Frames

Colored Lines The Dragon 1536 colors(html)
Quick Reference

Hey, there's spaces in my table! 216 colors(gif)

216 colors(html)

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Do it with a Table!

Table Tutor (YES,THIS TABLE IS A TABLE!)

Table tags are by far the most useful tags you will find. When it comes to page layout you can achive just about anything using these tags. Following are few examples and ideas for you. Some you might find useful, some are just showing off. But all will show some of the versatility of the <TABLE> tags.
(This page is fairly colorful. If you don't see color then maybe you oughtta put that tired old browser to pasture. I happen to know where you can get a good deal on a new one.) If you can read this, your browser understands the color attributes just fine! If you can read this, your browser doesn't display table colors. Sorry bud! There are a total of 18 image files used on this page. They are all zipped up right here. That way, if you want to practice with them, you don't have to try and find them all over the page. (isn't that nice of me!) And once again, you'll find a whole chartful of background color codes right here.

The Bill of Rights
Passed by Congress September 25, 1789. Ratified December 15, 1791.

AMENDMENT I

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

AMENDMENT II
A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.

AMENDMENT III
No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

I feel guilty cutting this document short so I figure if I provide a link to the U.S. Constitution in it's entirety, I have made up for the 'wrong'.

Here's a simple chessboard. Not super useful, but making one is great practice! Theoretically you could

probably use this to play chess with someone through a web page.

Another (less colorful) example using the Bill of Rights again.

The Bill of Rights
Passed by Congress September 25, 1789. Ratified December 15, 1791. AMENDMENT Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances. A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.

I
AMENDMENT

II

AMENDMENT

III

No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

You can make bar graphs with just table tags and a few colored 1x1 dots. It's not all that hard and once it's done, it's easy to change. Plus it can do things a regular image can't. Like suppose you needed to change it a lot. Or what if you made it part of results generated by a CGI, Java, or JavaScript program. This technique lends itself very well to "on-the-fly" graphing.

Joe's Widget Mfg. Co. Inc.
Unit production January-June
RED WIDGETS 150 BLUE WIDGETS TUNE-UP KITS

UNITS 100
in thousands 50

0

JAN

FEB

MAR

APR

MAY

JUN

This is a nice effect. It's kind of a pain to do initially, but updates are easy if you're neat & organized with your HTML coding.

Punch Gran Cru
Cigar Britania Diademas Monarcas Prince Consort Robusto Robusto Superior Length 6.25 7.25 6.75 8.5 5.25 5.25 5.5 Ring 50 54 48 52 50 50 48 Wrapper Natural Natural Natural Natural Maduro Natural Natural Box of 25 25 10 10 20 20 25 Price 96.75 102.50 57.00 48.00 75.00 75.00 86.50

Honduras

Single 4.55 4.80 6.40 5.65 4.40 4.40 4.05

Here's nearly the same effect yet a MUCH simpler table to construct...

Punch Gran Cru
Cigar Length Ring Wrapper Single 50 Natural Box of Price

Honduras

Britania 4.55 Diademas 4.80 Monarcas 6.40 Prince Consort 5.65 Robusto 4.40 Robusto 4.40 Superior 4.05

6.25

25

96.75

7.25

54

Natural

25

102.50

6.75

48

Natural

10

57.00

8.5

52

Natural

10

48.00

5.25

50

Maduro

20

75.00

5.25

50

Natural

20

75.00

5.5

48

Natural

25

86.50

Tables can also be used to make colored lines...

Many more cut-n-paste lines here...

Here is a picture framing technique using tables...

More examples here.

This last example is a simple button bar...
100 200 300 400 500 600 700 800

Lessons:

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table Tutor- Do it with a Table!
This is a relatively simple table. It uses a brown dot -> transparent dot -> (yes, it's really there). , a black dot -> and a

Do it with a Table!

(YES,THIS TABLE IS A TABLE!)

The exact same thing but with the borders turned on and using all transparent dots.

Do it with a Table!

(YES,THIS TABLE IS A TABLE!)

This is with the borders turned on and the transparent dot changed to a green dot.

Do it with a Table!

(YES,THIS TABLE IS A TABLE!) Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Lessons:

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Colored Lines
Colored Lines? How'd you do that? Easy - tables. Each line is a table... HR-magnified

Just pick a few neat colors and you're done. Or, scroll down this page and find one you like. View the source of the page and grab the corresponding table. You'll also need this blank image --> Easy as pie! Use this box to change this page's background color: BBBBBB
Set

HR-01

HR-02

HR-03

HR-04

HR-05

HR-06

HR-07

HR-08

HR-09

HR-10

HR-11

HR-12

HR-13

HR-14

HR-15

HR-16

HR-17

HR-18

HR-19

HR-20

HR-21

HR-22

HR-23

HR-24

HR-25

HR-26

HR-27

HR-28

HR-29

HR-30

HR-31

HR-32

HR-33

HR-34

HR-35

HR-36

HR-37

HR-38

HR-39

HR-40

HR-41

HR-42

Lessons:

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Picture frame examples using HTML tables
Example 1
<IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0>

Example 2
<TABLE BORDER=2> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 3
<TABLE BORDER=4 CELLSPACING=0 CELLPADDING=0> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 4
<TABLE BORDER=3 CELLSPACING=7 CELLPADDING=0> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 5
<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=6> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 6
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=8 BGCOLOR="#993300"> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 7
<TABLE BORDER=2 CELLSPACING=0 CELLPADDING=8 BGCOLOR="#993300"> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 8
<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=8 BGCOLOR="#993300"> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

Example 9
<TABLE CELLSPACING=0 CELLPADDING=3 BGCOLOR="#663333" BORDER=3><TR><TD> <TABLE BORDER=1 CELLSPACING=0 CELLPADDING=12 BGCOLOR="#993300"> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE>

</TD></TR></TABLE>

Example 10
<TABLE CELLSPACING=0 CELLPADDING=1 BGCOLOR="#663333" BORDER=4><TR><TD> <TABLE CELLSPACING=0 CELLPADDING=6 BGCOLOR="#993300" BORDER=1><TR><TD> <TABLE CELLSPACING=0 CELLPADDING=14 BORDER=1 BGCOLOR="#FFFFFF"> <TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR> </TABLE> </TD></TR></TABLE> </TD></TR></TABLE>

Pretty neat? Youbetcha.
Lessons: Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Quick Reference
Text

Enter item 2 here

<INPUT TYPE="text" NAME="ITEM-ONE" SIZE=20><BR> <INPUT TYPE="text" NAME="ITEM-TWO" SIZE=30 VALUE="Enter item 2 here">

Password

<INPUT TYPE="password" SIZE=20>

Radio Buttons
Good Better Best Super Dooper

<INPUT TYPE="radio" <INPUT TYPE="radio" <INPUT TYPE="radio" <INPUT TYPE="radio" Dooper<BR>

NAME="INPUTNAME" NAME="INPUTNAME" NAME="INPUTNAME" NAME="INPUTNAME"

VALUE="GOOD"> Good<BR> VALUE="BETTER" CHECKED> Better<BR> VALUE="BEST"> Best<BR> VALUE="SUPER DOOPER"> Super

Check Boxes
Gone With the Wind Dr Zhivago Ben Hur Tommy Boy

<INPUT TYPE="checkbox" With the Wind<BR> <INPUT TYPE="checkbox" <INPUT TYPE="checkbox" <INPUT TYPE="checkbox" Boy<BR>

NAME="Gone"

VALUE="YES" CHECKED> Gone

NAME="Dr" VALUE="YES"> Dr Zhivago<BR> NAME="Ben" VALUE="YES"> Ben Hur<BR> NAME="TOMMY BOY!" VALUE="YES" CHECKED> Tommy

Textarea
___ ____ ____( \ .-' `-. / (____ \___ / (O O) \ (____ `----( ) )----' (____ __________\ .____. (______/ `-.____.-' ___ )____ ___/ ____) ____) /__________ \______)

____)

<TEXTAREA NAME="COMMENTS" ROWS=7 COLS=56> ___ ____ ___ ____( \ .-' `-. / )____ (____ \___ / (O O) \ ___/ ____) (____ `----( ) )----' ____) (____ __________\ .____. /__________ ____) (______/ `-.____.-' \______) </TEXTAREA>

Pull Down List
Lions

<SELECT NAME="INPUT01"> <OPTION VALUE="item1">Lions <OPTION VALUE="item2">and <OPTION VALUE="item3">Tigers <OPTION VALUE="item4">and <OPTION VALUE="item5">Bears <OPTION VALUE="item6">Oh my! </SELECT>

Scrolling List
People who feed tacos

<SELECT NAME="STUFF" SIZE=3> <OPTION VALUE="stuff-a">People <OPTION VALUE="stuff-b">who <OPTION VALUE="stuff-c">feed <OPTION VALUE="stuff-d">tacos <OPTION VALUE="stuff-e">to <OPTION VALUE="stuff-f">a <OPTION VALUE="stuff-g">dog <OPTION VALUE="stuff-h">should <OPTION VALUE="stuff-i">be <OPTION VALUE="stuff-j">SHOT! </SELECT>

Hidden

<INPUT NAME="WHODAT" TYPE="hidden" VALUE="Schmeckalecka">

File Upload
Browse...

<INPUT TYPE="file" NAME="AFILE">

Submit & Reset
Submit my form Reset my form

<INPUT TYPE="submit" VALUE="Submit my form"> <INPUT TYPE="reset" VALUE="Reset my form">

Submit using an image

<INPUT TYPE="image" SRC="submit.gif" WIDTH=94 HEIGHT=26 BORDER=0 ALT="Submit">

Mailto form test

About CGI form processing

Don't Press This Button
Lessons: Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Frames Tutor
Lesson 1

First things first. For this tutorial we will need a few html documents. Fire up Notepad and copy the following to get you started. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> </BODY> </HTML> We will give each document a name. In Table Tutor and Form Tutor we used guy's names. I think its time to get some young ladies in here. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Lisa

</BODY> </HTML> Create a new folder somewhere and save this as lisa.html. Now make another html document. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Terri </BODY> </HTML> Save this in the same folder as terri.html. Now do the same for Kim, Tina, Shannon, and Beth. Save them just like the others. You should now have a folder that contains 6 complete standalone html documents. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Frames Tutor
Lesson 2

Ok, now the fun stuff... making your master page. Start with this. <HTML> <HEAD> <TITLE>My Framz Page- The Master Page</TITLE> </HEAD> <BODY> </BODY> </HTML>

Remove the <BODY> tags. The master page doesn't use them... <HTML> <HEAD> <TITLE>My Framz Page- The Master Page</TITLE> </HEAD>

</HTML>

...it uses <FRAMESET> tags instead. <HTML> <HEAD> <TITLE>My Framz Page- The Master Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>

To keep things a little cleaner, I'm going to stop writing the <HTML>, <HEAD> and <TITLE> tags. Needless to say, keep them in your document. <FRAMESET> </FRAMESET> Now's a good time to save it. Save it in your folder (with all the girls) as index.html. If you try to open it with your browser now it will be blank. All you have said so far is "This is my Master Page".

Now let's start defining just how things are going to look. Tell the browser to split the main window into 2 columns, each occupying 50% of the window. <FRAMESET COLS="50%,50%"> </FRAMESET> This will still be blank, we have one more thing to do before our 'system is operational'.

We must tell the browser what to put in each frame.

<FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT. You are now the proud parent of a fully functional Framed page! One last thing before we go on. Note that <FRAMESET> is a container tag, and <FRAME> is not. For those that don't know what that means, a container tag has an opening <TAG> and a closing </TAG>. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Lisa

Terri

Frames Tutor
Lesson 3

The <FRAMESET> tag does all the dividing. That's all it does... divide up windows. It specifies a few things regarding how to divide them up, but remember, whenever you want to do some dividing - use <FRAMESET>. Can we divide it into more than 2 pieces? Yes, just make sure that you specify a page for each section or the browser's gonna get confused. <FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> VIEW IT By the way, if hitting the Reload button is not quite resetting everything, hit the Reload button while holding down the SHIFT key.

It's pretty obvious that we can make the frames all differents sizes. Just make sure your arithmetic is correct or the browser will come up with its own interpretation.

<FRAMESET COLS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> VIEW IT

If we specify dividing into ROWS instead of COLS we get something else entirely. <FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> VIEW IT

Let's go back down to 2 frames, divided equally into columns. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

We can specify 50 pixels instead of 50%. And, we can use * instead of a number. The * means whatever is left over. <FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html">

</FRAMESET> VIEW IT << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Lisa

Terri

Kim

Tina

Shannon

Lisa

Terri

Kim

Tina

Shannon

Lisa Terri Kim Tina Shannon

Lisa

Terri

Frames Tutor
Lesson 4

Here is an important point: Let's suppose that you make a frame 100 pixels wide on the left, and 100 pixels wide on the right. Since you are running an 800x600 screen you make the 3rd and middle area 600 pixels wide. Everything looks just dandy... to you. My screen is set at 640x480. Those 100 pixel wide frames you put in your page are now 80 pixels wide on my screen. If you use any absolute dimensions in your <FRAMESET> tags ALWAYS have at least one * as an elastic frame. That way everything will look good to everyone and there will be peace across the land once again. This is the cause of a common problem with frames that I want to take the time to draw extra attention to. A popular frame layout is a narrow directory window on the left and a larger main window on the right like so. Here's the problem... If you divide up the windows using percentages (such as <FRAMESET COLS="15%,85%">) everything will probably look just dandy to you. But... to someone with a different screen resolution it might look like this. The reason this happens is because you have specified that the left window should be 15%. 15% of what? 15% of whatever their horizontal screen resolution is. That means that that left window might look a little different to different people. How to fix you say? Glad you asked... Just use an absolute dimension for the left window and make the right window elastic (such as <FRAMESET COLS="120,*">). Bingo. Problem solved. It's good idea to make that absolute dimension just a wee bigger than it needs to be. Give the stuff in that left window a little breathing room. For example, if 100 pixels gives a good but snug fit... make the window 120 or 125 pixels.

A good and painless way to check your layout at a couple different screen resolutions is with a nifty little MS PowerToy called Quickres.

We can have more than one leftover frame and specify a size relationship between them. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> </FRAMESET> VIEW IT Translated this says: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Lisa in the first frame, Terri in the second and Kim in the third. It is important to note that everything is done in order. The first <FRAME> is displayed according to the first size attribute in the <FRAMESET> tag (50/lisa) and the second with the second (*/terri) and the third with the third (2*/kim). I know that this may be mind-numbingly obvious, but it is very important and I wanted to draw extra attention to it.

What if we want to divide kim in half horizontally? Remember that I said that if you want to do any dividing you must use the <FRAMESET> tag. First we must replace Kim with a <FRAMESET> tag pair. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET> </FRAMESET> </FRAMESET> At this point we have told the browser: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Lisa in the first frame, Terri in the second and the third frame we are going to divide further. Now we have to specify how to divide up that third frame.

We were going to divide it in half horizontally. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> </FRAMESET> </FRAMESET>

And I think we'll put Kim back in on the top and Tina on the bottom. And that's that. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> VIEW IT << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Directory Link here Link there Link to me Link to you Here a link There a link Everywhere a Link link

Main Page

Directory Link here Link there Link to me Link to you Here a link There a link Everywhere a Link link

Main Page

Lisa

Terri

Kim

Lisa

Terri

Kim Tina

Frames Tutor
Lesson 5

That was so much fun I think we'll do it again! Let's divide Lisa horizontally into 3 sections. The top window needs to be 50 pixels high. The other two can be split equally. We will put Lisa into all three. Here are all the changes in one big chunk. <FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> VIEW IT I know it doesn't look like much. Actually if a page was divided up that much it would look pretty crappy. A good rule of thumb is don't have more than 3 frames on your page. If you can avoid them altogether, that's even better.

Now's also a good time to think about the poor folks that are using non frames capable browsers. Although most, if not all of your visitors will be able to see frames, there is a minority that's surfing the web with outdated or special equipment. If you would like to help these folks out you can write a non frames version of your main page and add it within the main <FRAMESET> tag pair thusly... <FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> <NOFRAMES> <BODY> Put your non-frames page down here. If someone is using an old browser, it will skip everything above and come straight down here. Framescapable browsers will ignore what is between the <NOFRAMES> tags. You may be asking a couple questions right now. * Do I have to write a whole nuther page? Probably. * How many people will be missing my page if I don't do this? Very few. * Do you think I should worry about it? Nope. * Do you worry about it? Nope. * Why did you put it in this tutorial? Because it's a major feature and I wanted you to at least know about it. * Are you always this witty and charming? Of course. </BODY> </NOFRAMES> </FRAMESET>

Note - My personal opinion aside, there is a strong argument for using the <NOFRAMES> tag. A few businesses are still using older, non-frames capable browsers. The handicapped's screen readers have a really hard time with frames. And those outside the US are sometimes left out of framed pages for various reasons. The bottom line is, if your page is "frames only" you will be cutting off a few people. If it is important to you to reach absolutely everyone with the least amount of potential problems, then take the time to use the <NOFRAMES> tag. My thanks to Matthew Miller, of the HTML Writers Guild for pointing this out.

<< BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Lisa

Terri

Kim Tina

Lisa Lisa

Frames Tutor
Lesson 6

Let's go back to something a wee bit simpler. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

We can put pictures in the frames if we want to. Grab the picture at left and save it into your working folder as world.gif. (Right click and choose Save Image As)

<FRAMESET COLS="50%,50%"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT Remember it is always good practice to include HEIGHT & WIDTH attributes for any image tag.

Let's try to frame the picture nice and neat. First shrink the left window to 146 pixels wide. Since we are using an absolute dimension should make the other frame elastic. <FRAMESET COLS="146,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

Next we will divide the left frame horizontally into 2 sections. The top section to be 162 pixels high and the bottom section to be whatever is left over. We will put in world.gif and Lisa respectively. <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT As you can see, we have a bit of a problem. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc

Print version available - Get the WebTutor book!

WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Terri

Terri

Terri

Lisa

Frames Tutor
Lesson 7

The scrollbars that you see can be specified as YES, NO or AUTO. YES means the window gets scrollbars - whether they're needed or not. NO means there will be no scrollbars, even if your frame contents are as big as New Jersey... the browser will simply display as much as it can. AUTO is the default. If scrollbars are needed, they appear, if they are not needed they stay convienently out of the way. Let's get rid of our scrollbars. <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT Keep in mind, that you should be very careful about turning off the scrollbars. I see many many pages where this was done, and the author never bothered to see how those frames looked at other resolutions or

font sizes. Well, for some visitors, the bottoms of all the frames are chopped off and there's no way to see the rest of that frame. Mess with the scrolling only when absolutely necessary and know what it's going to look like at different resolutions.

Ok. Back to framing. We still have a problem. The image is not in the frame right. The next two attributes deal with margins. The browser automatically gives each frame some empty space around its contents. This is normally necessary for asthetics. You can control the size of these margins by using MARGINWIDTH and MARGINHEIGHT. They control the left & right and top & bottom margins respectively. We will set them both to 1. (1 is the minimum) <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

Unfortunately that still doesn't quite do it. The frame dimensions are (often) measured center to center.

There is also that minimum border of 1 to deal with. Since the default border size is normally about 6 pixels, we have to add 8 to each image dimension (half of 6, plus 1, times 2). If that's confusing, just add 8 to each image dimension to get your window size. <FRAMESET COLS="154,*"> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html">

</FRAMESET> VIEW IT Although not exactly foolproof, this will usually display your image perfectly in the window, or at least pretty darn close. Have you ever seen an image in a frame that was cut off on one or more sides? If you use absolute dimensions, along with an elastic frame... And if you add 8 to the size of the image to get your frame dimensions, by golly you'll look just pretty good to pert near everyone. (Keep in mind that this is an imperfect thing we're doing here. The more you try to be too precise, the greater the chances it won't look as expected to somone.) << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Terri

Lisa

Terri

Lisa

Terri

Lisa

Frames Tutor
Lesson 8

Next we'll try a couple minor effects. Not all of them work with all browsers though. If the browser doesn't understand the attribute, it will just ignore it. First we can change the thickness of the borders. <FRAMESET COLS="154,*" BORDER=20> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

We can change the color of the borders. <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*">

<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

We can turn off borders for individual <FRAMESET>s with FRAMEBORDER. <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

FAQ: I try to make my frames with no borders, but with Browser-A, a thin line still appears between the frames. How do I make it go away? A: Under most circumstances those thin lines can be eliminated. Look here for a simple solution.

We can prevent the viewer from resizing a frame. Unless you have a very unusual circumstance, there really is no reason to use this attribute. <FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html">

</FRAMESET> <FRAME SRC="terri.html" NORESIZE> </FRAMESET> VIEW IT << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Terri

Lisa

Terri

Lisa

Terri

Lisa

Frames Tutor - No thin lines
The problem: you try to set frame borders to zero, but a thin line still appears between frames in some browsers. The solution: set everything to zero. Sometimes different browsers understand different things. By covering everything that any browser might understand, you solve the problem. The only time this won't work completely is if you have fairly complex framesets. In that case there's often a stubborn remaining line that just won't go away no matter how hard you try. Consider this example. Here is the code for that page... <FRAMESET ROWS="60,*"> <FRAME SRC="doc1.html" NAME="top"> <FRAMESET COLS="160,*"> <FRAME SRC="doc2.html" NAME="left"> <FRAME SRC="doc3.html" NAME="main"> </FRAMESET> </FRAMESET> Now we'll set everything we possibly can to zero... To both the <FRAMESET> tags and the <FRAME> tags we'll add BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 <FRAMESET ROWS="60,*" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0> <FRAME SRC="doc1.html" NAME="top" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0> <FRAMESET COLS="160,*" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0> <FRAME SRC="doc2.html" NAME="left" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0> <FRAME SRC="doc3.html" NAME="main" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>

</FRAMESET> </FRAMESET> Now look at it. It should now be line free in at least most browsers.
Lessons: Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Templates

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Doc 1

Doc 2

Doc 3

Doc 1

Doc 2

Doc 3

Frames Tutor
Lesson 9

Ok, now that we have learned a bit about framing tear into linking between frames. <FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

let's go back to something simple and we'll

What we're going to do is add a link from beth.html to shannon.html. So open beth.html with Notepad and add the following... <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth <P>You have to visit my friend Shannon.

</BODY> </HTML>

Then add the link, and save it. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth <P>You have to visit my friend <A HREF="shannon.html">Shannon</A>. </BODY> </HTML>

Now try it. <FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html"> </FRAMESET> VIEW IT

If you click on that link you'll see Shannon's page load into Beth's window. I know, I know... you're not impressed. You want to click on a link in Beth's window and have it load into Terri's window. Well, that's a little more work. What you have to do is NAME the <FRAME> in your master page. So go ahead and give that second frame a name. <FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html" NAME="WINDOW-1"> </FRAMESET>

Note - <FRAME> NAMEs must begin with an alpha-numeric character (abc123 etc). All other window names will be ignored. (An exception is to begin the frame name with the underscore _ Its use is explained a little later.)

Next we have to add a little something to that link in Beth's page, so open beth.html again (with Notepad) and add a TARGET. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth <P>You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW1">Shannon</A> </BODY> </HTML> This will cause the link to load into the frame named WINDOW-1. VIEW IT << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Beth

Terri

Beth You have to visit my friend Shannon

Terri

Shannon

Beth You have to visit my friend Shannon

Terri

Frames Tutor
Lesson 10

That kind of linking is great when you want to link together pages in your site. But what if you want to link to something outside your site? Let's add another link to Beth's page. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth <P>You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW1">Shannon</A> <P>And of course you have to visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="WINDOW1">Professional Web Design</A> </BODY> </HTML> VIEW IT As you can see, this causes someone elses page to load into your window.

How can you make an outside link load into the full browser window? Easy, change the TARGET to _top. (Note that was in lower case... very important.)

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth <P>You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW1">Shannon</A> <P>And of course you have to visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</A> </BODY> </HTML> VIEW IT Always use this method when linking to an outside page. Believe me, your viewers will appreciate it! _top is one of 4 so-called 'magic targets'. They are _top, _blank, _self and _parent. These are the only targets that can begin with something other than an alpha-numeric character. In addition, any target beginning with an underscore_ that is not one of the 'magic targets' may behave unpredictably. What exactly do those 4 magic targets do? _top opens a link in the full browser window. _blank opens a link in a new browser window. _self opens a link in the same browser window or frame. (Same as doing nothing) _parent opens a link in the immediate frameset parent. It is commonly thought that _new will open a link in a new window. With most browsers it will. So will _tom, _dick or _harry. For that matter so will bonnie and clyde. Any TARGET that is not defined somewhere will simply result in a new window opening up (usually). Once again, remember, when using one of the four magic targets, _top, _blank, _self or _parent, make sure they are lower case. UPPER case won't be understood and the end result will probably be the link opening in a new window. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Beth You have to visit my friend Shannon And of course you have to visit Joe at Professional Web Design

Terri

Beth You have to visit my friend Shannon And of course you have to visit Joe at Professional Web Design

Terri

Frames Tutor
Lesson 11

I think what we'll do now is make a Framed Page from scratch. Nothing fancy, just something like this. Before we start, let me stress... keep it simple! A site with a bunch of frames and links pointing all over the place is going to be confusing to build and even more confusing to navigate. That said, let's go to it! First we must think about what we want the end result to be. I think a good simple design would be a banner across the top, a directory window on the left, and the main window on the right. Let's make the Master Page first. <HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML> Make another new folder and save this as index.html. Also the image we will be using for the banner is the "MY FRAMZ PAGE" image. Grab it from below and save it as framz1.gif in your working folder.

Divide the screen horizontally. <HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> </FRAMESET> </HTML> Note we get 83 by adding 8 to the height of the image (75+8=83). Also note that since we are using an absolute dimension we are including an elastic frame.

Next specify banner.html to go in the top frame (we will make that document in a couple minutes). Also throw in a <FRAMESET> tag pair because we are going to divide that bottom portion further. <HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> <FRAME SRC="banner.html"> <FRAMESET> </FRAMESET> </FRAMESET> </HTML> VIEW IT You can run this now but you'll get error messages because it's incomplete.

We will divide the bottom window into two sections. We will also specify that the left window contain directory.html and the right window contain home.html. Once again, we have not made these documents so you will still get an error message (or two) (or three). <HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> <FRAME SRC="banner.html"> <FRAMESET COLS="20%,80%"> <FRAME SRC="directory.html"> <FRAME SRC="home.html"> </FRAMESET> </FRAMESET> </HTML> VIEW IT

Since we will have our directory on the left and pages will load into the righthand frame, we should name that frame. Its the only one that will have stuff loaded into it so its the only one we really need to name. <HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> <FRAME SRC="banner.html"> <FRAMESET COLS="20%,80%"> <FRAME SRC="directory.html"> <FRAME SRC="home.html" NAME="MAIN-WINDOW"> </FRAMESET> </FRAMESET> </HTML>

VIEW IT OK. We are done with this one... for now. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Directory
Home Go here or there or visit Yahoo Netscape

You are home.
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! Enjoy your stay! Visit Joe at Professional Web Design.

You are home.
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! Enjoy your stay! Visit Joe at Professional Web Design.

Here
Welcome to here. Here is where everything happens. Here you'll find more neat stuff than you can shake a stick at. Have you ever seen anyone shake a stick at something? I never have.

This is There
I would like to make a proposal. We have all seen that little arrow on signs that say "You are here". Wouldn't it be better if there were also another arrow that says "You should be there". It would make things so much easier.

Frames Tutor
Lesson 12

Lets make banner.html. Start with the following and save it. <HTML> <HEAD> <TITLE>Practice Page- Banner</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> </BODY> </HTML> Notice we have specified a background color of blue. VIEW banner.html VIEW Master Page

Pop in the image and <CENTER> it. <HTML> <HEAD> <TITLE>Practice Page- Banner</TITLE> </HEAD> <BODY BGCOLOR="#0000FF">

<CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER> </BODY> </HTML> VIEW banner.html VIEW Master Page

While I'm thinking about it, I just wanted to mention that if you look at the source of my documents to assist you in creating your documents you may find a few things that don't make sense or that may contradict what I say. That is because I have to make my pages jump through a few hoops so that the lessons work right when viewed. Make sense? If not, just don't look at the source of these pages unless you want to confuse yourself.

Alright... as you can see we have a problem. We have a scrollbar getting in the way and the image is not positioned in the window very well. Open your Master Page. Turn off the scroll bars and get rid of the margins. <HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> <FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAMESET COLS="20%,80%"> <FRAME SRC="directory.html"> <FRAME SRC="home.html" NAME="MAIN-WINDOW"> </FRAMESET> </FRAMESET> </HTML> VIEW IT << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Frames Tutor
Lesson 13

Now let's make our Directory page. Start with the following and save it as directory.html. <HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> VIEW directory.html VIEW Master Page

Give it a heading and write in the text of all the links. We'll add the link info in a minute. <HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>Directory</H3>

Home <P>Go here <BR>or there <P>or visit <BR>Yahoo <BR>Netscape </BODY> </HTML> VIEW directory.html VIEW Master Page

Now add the link information. <HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>Directory</H3> <A HREF="home.html">Home</A> <P><A HREF="here.html">Go here</A> <BR>or <A HREF="there.html">there</A> <P>or visit <BR><A HREF="http://www.yahoo.com/">Yahoo</A> <BR><A HREF="http://home.netscape.com/">Netscape</A> </BODY> </HTML> VIEW directory.html VIEW Master Page

Wasn't THAT fun! No I suppose it wasn't. Take 5. Stretch, go pee, get cup of coffee, scratch yer butt,

whatever. Take a break. I am. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Directory
Home Go here or there or visit Yahoo Netscape

Directory
Home Go here or there or visit Yahoo Netscape

Directory
Home Go here or there or visit Yahoo Netscape

Directory
Home Go here or there or visit Yahoo Netscape

Frames Tutor
Lesson 14

OK, let's make home.html, here.html and there.html. Since you've been working very hard (and I'm sick of typing), just go ahead and copy the following into Notepad and save them. Save the following as home.html <HTML> <HEAD> <TITLE>A Practice Page- Home</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>You are home.</H1> Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! <P><CENTER>Enjoy your stay!</CENTER> </BODY> </HTML> VIEW home.html

Save this as here.html <HTML> <HEAD> <TITLE>A Practice Page- Here</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>Here</H1> Welcome to here. Here is where everything happens. Here you'll find more neat stuff than you can shake a stick at. Have you ever seen anyone shake a stick at something?? I never have. </BODY> </HTML> VIEW here.html

And of course this one as there.html. <HTML> <HEAD> <TITLE>A Practice Page- There</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>This is There</H1> I would like to make a proposal. We have all seen that little arrow on signs that say "You are here". Wouldn't it be better if there were also another arrow that says "You should be there". It would make things so much easier. </BODY> </HTML> VIEW there.html Now view your Master Page.

Oops, we forgot something. If you caught the problem back when you were making the directory page... good for you! So open up directory.html and add the necessary TARGETs. <HTML> <HEAD> <TITLE>Practice Page- Directory</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>Directory</H3> <A HREF="home.html" TARGET="MAIN-WINDOW">Home</A> <P><A HREF="here.html" TARGET="MAIN-WINDOW">Go here</A> <BR><A HREF="there.html" TARGET="MAIN-WINDOW">or there</A> <P>or visit <BR><A HREF="http://www.yahoo.com/" TARGET="_top">Yahoo</A> <BR><A HREF="http://home.netscape.com/" TARGET="_top">Netscape</A> </BODY> </HTML> Now try your Master Page. << BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

You are home.
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! Enjoy your stay!

Directory
Home Go here or there or visit Yahoo Netscape

You are home.
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! Enjoy your stay!

Directory
Home Go here or there or visit Yahoo Netscape

You are home.
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! Enjoy your stay!

Frames Tutor
Lesson 15

Works pretty good, doesn't it! Now just for giggles, let's add a link from your home page to me at Professional Web Design. Open up home.html and plug it in. Make sure you add the proper TARGET because although I really like you, I don't want to show up in your window. <HTML> <HEAD> <TITLE>A Practice Page- Home</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>You are home.</H1> Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames! <P><CENTER>Enjoy your stay!</CENTER> <P>Visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</A>. </BODY> </HTML>

View the finished product.

Since first writing Frames Tutor, I have gotten many letters from people asking how to load two (or more) frames with one mouse click. This is reasonably easy to do. Since it's a "special occasion" kind of thing, and not normally used to develop framed pages, I'm keeping it kinda sorta separate. Unless you are specifically looking to add this feature to your pages, feel free to skip it. How to load two (or more) frames with one click.

<< BACK
Lessons:

NEXT >>
Templates

Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Load 2 (or more) frames with one click - HTML method
There are two ways to do this... the HTML method, and the javascript method. Each has it's advantages and each has it's drawbacks. The HTML method does not require that javascript be enabled for it to work. It doesn't require that you learn anything new (If you can make frames, you can do this.) The javascript method is better if you're going to get into some fancy frame manipulation. It's often less work, it's more or less "reusable", it's more flexible and it can be easier to add on to. The only real drawback is if someone comes to your site with their JS disabled, they're not going to get very far. If at all possible, use the HTML method. We will get into that HTML method first.

Change 2 (or more) frames - the HTML method
The idea here is simple... the two frames that will be changed have been defined with a FRAMESET doc. To change them, just load a new FRAMESET doc. Click the link below. Follow me step by step. I'll explain what's happening. Here is an example. The link first loads a directory page in the left frame and a frameset page in the right. The frameset page immediately loads 2 documents in that right frame: Joe's friend Bill and Joe's friend Ed. Click the link to Jackie's friends. This loads a whole new frameset doc (split2_jackie.html) into the right frame which immediately loads Jackie's friend Amy and Jackie's friend Joan into the frames. You see, all you're doing is loading a new frameset doc when you click on a link. The framesets can be as complex as you wish. Click back and forth between Joe's friends and Jackie's friends. Now click on More friends.

Oh my! What the heck happened? Well... more of the same. Clicking on that link loaded an entirely new master page with the TARGET being set as "_top". This loaded a new directory page in the left frame and a new frameset page in the right which in turn spilled 4 documents into those 4 right frames. Click on John's friends. This loads a new frameset doc (split4_john.html) into the right frame which in turn loads John's friends. Clicking back and forth between Joe, Jackie, John and Jenny simply loads different framesets into the right frame. Clicking on the Less frames link re-loads the first master page. Pretty neat eh? The following documents were used in the above examples. View directory Master pages master_html_2.html master_html_4.html Directory pages dir_html_2.html dir_html_4.html Frameset pages split2_joe.html split2_jackie.html split4_joe.html split4_jackie.html split4_john.html split4_jenny.html Friends pages zjoe_bill.html zjoe_ed.html zjoe_frank.html zjoe_tom.html zjackie_amy.html zjackie_joan.html zjackie_lisa.html zjackie_toni.html

zjohn_al.html zjohn_dean.html zjohn_george.html zjohn_ralph.html zjenny_denise.html zjenny_marci.html zjenny_pam.html zjenny_shannon.html Thats about it for the HTML method. Remember, regardless of the method you choose, there's a lot of room for error here. Be meticulous and thorough. Test your setup completely before unleashing it on the world.

You want to tax yourself? Here's what you can do for some intense practice...

Put this little frames symphony together from scratch. Use the following outline... Mammals Farm Animals Cow | Pig | Horse Big Game Bear | Moose Small Critters Mouse | Gerbil | Squirrel | Mole

Plants Trees Maple | Oak | Fir | Cherry Flowers Daisy | Tulip | Rose Fruits Apple | Orange | Grapes | Peaches | Plums | Lemons Vegetables Cucumber | Green beans Fish Game fish Salmon | Bass | Walleye | Catfish Aquarium fish Goldfish | Guppies A solution is here if you need it.

Now off to the javascript method...
Lessons: Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Templates

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Joe's friends Jackie's friends

Joe's friend Bill Joe's friend Ed

More friends

Joe's friend Bill Joe's friend Ed

Jackie's friend Amy Jackie's friend Joan

Joe's friends Jackie's friends John's friends Jenny's friends

Joe's friend Bill Joe's friend Ed Joe's friend Frank Joe's friend Tom

Less friends

Joe's friend Bill Joe's friend Ed Joe's friend Frank Joe's friend Tom

Jackie's friend Amy Jackie's friend Joan Jackie's friend Lisa Jackie's friend Toni

John's friend Al John's friend Dean John's friend George John's friend Ralph

Jenny's friend Denise Jenny's friend Marci Jenny's friend Pam Jenny's friend Shannon

Joe's friends Jackie's friends

More friends

Joe's friends Jackie's friends John's friends Jenny's friends

Less friends

Joe's friend Bill

Joe's friend Ed

Joe's friend Frank

Joe's friend Tom

Jackie's friend Amy

Jackie's friend Joan

Jackie's friend Lisa

Jackie's friend Toni

John's friend Al

John's friend Dean

John's friend George

John's friend Ralph

Jenny's friend Denise

Jenny's friend Marci

Jenny's friend Pam

Jenny's friend Shannon

Mammals - Plants - Fish

Mammals

Cow Pig

Farm Animals Big Game Small Critters

Horse

Mammals

Cow Pig

Farm Animals Big Game Small Critters

Horse

Cow Pig Horse

Bear Moose

Mouse Gerbil Squirrel Mole

Plants

Maple Oak

Trees Flowers

Fir Cherry

Fruits Vegetables

Maple Oak Fir Cherry

Daisy Tulip Rose

Apple Orange Grapes Peaches Plums Lemons

Cucumber Green beans

Fish

Salmon Bass

Game fish Aquarium fish

Walleye Catfish

Salmon Bass Walleye Catfish

Goldfish Guppies

Load 2 (or more) frames with one click - javascript method
Here is an example. First we need a few target documents. grab the following and save them in your working folder.

zjoe_bill.html zjoe_ed.html zjoe_frank.html zjoe_tom.html zjohn_al.html zjohn_dean.html zjohn_george.html zjohn_ralph.html

zjackie_amy.html zjackie_joan.html zjackie_lisa.html zjackie_toni.html zjenny_denise.html zjenny_marci.html zjenny_pam.html zjenny_shannon.html

By the way, these all begin with z so they all stay together in the directory and are easy to grab all at once. First we'll build the smaller example. You need a master page that specifies what goes where to begin with. Save the following as master.html... <HTML> <HEAD> <TITLE>Joe and Jackie's friends</TITLE> </HEAD> <FRAMESET COLS="25%,75%"> <FRAME SRC="dir.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="zjoe_bill.html" NAME="right_top"> <FRAME SRC="zjoe_ed.html" NAME="right_bottom"> </FRAMESET> </FRAMESET>

</HTML> This is just simple HTML frame stuff so far. Notice the frame names. (We haven't made dir.html yet). Save the following as dir.html.... <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> Add some scripting to the HEAD... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Hiding function multiLoad2(doc1,doc2) { parent.right_top.location.href=doc1; parent.right_bottom.location.href=doc2; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> No need to worry about what it does just yet. Add the text of the links and the anchor tags. Just don't fill in the HREF part just yet. <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Hiding

function multiLoad2(doc1,doc2) { parent.right_top.location.href=doc1; parent.right_bottom.location.href=doc2; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><A HREF="">Joe's friends</A> <P><A HREF="">Jackie's friends</A> </BODY> </HTML> Now add the HREF part. <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Hiding function multiLoad2(doc1,doc2) { parent.right_top.location.href=doc1; parent.right_bottom.location.href=doc2; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><A HREF="javascript:multiLoad2('zjoe_bill.html', 'zjoe_ed. html')">Joe's friends</A> <P><A HREF="javascript:multiLoad2('zjackie_amy.html', 'zjackie_joan. html')">Jackie's friends</A> </BODY> </HTML> Now load master.html and your example should be functional. Alright, what have we done? How does it work? In a nutshell, we have a function - multiLoad2(). We pass arguments to the function - zjoe_bill. html and zjoe_ed.html. The function then processes those arguments. function multiLoad2(doc1,doc2) {

Here two arguments get passed to the function. As soon as the arguments hit the function, they become variables doc1 & doc2 so they can be manipulated. parent.right_top.location.href=doc1; Place whatever is in variable doc1 in the right top frame. parent.right_bottom.location.href=doc2; Place whatever is in variable doc2 in the right bottom frame. You could easily expand on this to change more frames. Add to master.html and save it as master2. html... <HTML> <HEAD> <TITLE>Joe and Jackie's friends</TITLE> </HEAD> <FRAMESET COLS="25%,75%"> <FRAME SRC="dir2.html"> <FRAMESET ROWS="25%,25%,25%,25%"> <FRAME SRC="zjoe_bill.html" NAME="right1"> <FRAME SRC="zjoe_ed.html" NAME="right2"> <FRAME SRC="zjoe_frank.html" NAME="right3"> <FRAME SRC="zjoe_tom.html" NAME="right4"> </FRAMESET> </FRAMESET> </HTML> (Don't forget the the change from dir.html to dir2.html. We're going to use a different directory page.) Now add to your original dir.html and save as dir2.html... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Hiding function multiLoad4(doc1,doc2,doc3,doc4) { parent.right1.location.href=doc1; parent.right2.location.href=doc2; parent.right3.location.href=doc3;

parent.right4.location.href=doc4; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><A HREF="javascript:multiLoad4('zjoe_bill.html', 'zjoe_ed. html', 'zjoe_frank.html', 'zjoe_tom.html' )">Joe's friends</A> <P><A HREF="javascript:multiLoad4('zjackie_amy.html', 'zjackie_joan. html', 'zjackie_lisa.html', 'zjackie_toni.html' )">Jackie's friends</ A> <P><A HREF="javascript:multiLoad4('zjohn_al.html', 'zjohn_dean. html', 'zjohn_george.html', 'zjohn_ralph.html' )">John's friends</ A> <P><A HREF="javascript:multiLoad4('zjenny_denise.html', 'zjenny_marci. html', 'zjenny_pam.html', 'zjenny_shannon.html')">Jenny's friends</A> </BODY> </HTML> Now load master2.html to test your creation. A little fiddling with this setup and you'll see how it could be very powerful. The tying together of the 2frame JS version and the 4-frame JS version I'll leave up to you. As far as the random load thing, that's a little beyond the scope of this piece. I just added it in so you could see the potential of javascript based frame manipulation. And so we wrap up the second method for changing multiple frames with one click. As I've said before, if at all possible, use the HTML method for this.
Lessons: Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Templates

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Joe's friends Jackie's friends

Joe's friend Bill Joe's friend Ed

More friends

Joe's friends Jackie's friends John's friends Jenny's friends Random friends

Joe's friend Bill Joe's friend Ed Joe's friend Frank Joe's friend Tom

Less friends

Joe's friends Jackie's friends

Joe's friend Bill Joe's friend Ed

Joe's friends Jackie's friends John's friends Jenny's friends

Joe's friend Bill Joe's friend Ed Joe's friend Frank Joe's friend Tom

Frames Tutor - Lesson 16 (last one!)
Well folks, that's it! For this tutorial that is. You have learned everything you need to create Framed pages. There is a little more, but 95% of what you'll need to do can be done with what was covered in this tutorial. Be sure to check out Table Tutor and Form Tutor!

Here are some excellent materials that you may want to have a look at. Table Tutor, Form Tutorand Frames Tutor When you're past the basics and are ready to add a few high octane components to your web page, these three tutorials will take you step by step through the tags. The HTML Reference Library An outstanding html guide and reference source in windows HELP format. (Note that you must have Internet Explorer 4 installed for this latest version of the HTML Library to work.) Beginner's Guide to HTML A good concise guide that explains the basics very well. I keep a copy and still refer to it on occasion. Other outstanding HTML & web authoring sites: The Web Developer's Virtual Library irt.org HTML Goodies Webmonkey CNET Builder.com The World Wide Web Consortium

If you need stuff for your pages... - like backgrounds, bullets, images, sounds, JavaScript or whatever, come by our Web Page Resources section. Help yourself to armloads of stuff!

Got a question? "How do I fit a thigamajig around a whatchamacallit and put in one of those doohickeys?" Almost without exception your question has already been asked... and already been answered. Look here for FAQs (Frequently Asked Questions) from this tutorial, and links to other excellent HTML FAQ lists. Got any suggestions? Let's hear 'em. Want to get on the WebTutor mailing list? Sign-up. If you would like to add a link to the Professional Web Design site, you are welcome to use one of the following. Just copy the code, paste it into your page and you're all set.
<A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_proweb_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="Professional Web Design"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_a.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_white_b.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/88x31_webtutor_teal.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="I did it myself with WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_white.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/130x28_webtutor_teal.gif" WIDTH="130" HEIGHT="28" BORDER="0" ALT="Get WebTutor!"></A> <A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/158x60_webtutor_white.gif" WIDTH="158" HEIGHT="60" BORDER="0" ALT="Get WebTutor!"></A>

<A HREF="http://junior.apk.net/~jbarta/"><IMG SRC="http://junior.apk.net/~jbarta/tutor/other/buttons/160x50_webtutor_teal.gif" WIDTH="160" HEIGHT="50" BORDER="0" ALT="Get WebTutor!"></A>

<< BACK
Lessons: Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Templates

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Frames Tutor - Templates
Click on a template and view source* to see how it was done. Contents of directory here.

Template 1

Template 2

Template 3

Template 4

Template 5

Template 6

Alter the frame dimensions as needed. *View source: Most, if not all browsers allow you to view the source of any HTML document. It's a menu item, usually something like View/Source. Do this and the innards of any web page is there for you to inspect. Once you learn this little trick, you'll never again have to say... "I saw (insert neat effect here) on a page and I wondered how they did that."
Frames Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Lessons:

Templates

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Doc 1

Doc 2

Doc 1

Doc 2

Doc 1

Doc 2 Doc 3

Doc 1

Doc 2

Doc 3

Doc 1

Doc 2

Doc 3

Doc 1

Doc 2

Doc 3

Terri

Lisa

Mailing List
Get on the mailing list and be notified of tutorial updates, new additions, interesting stuff, UFO sightings, multiple births and the like.

Sign Up

General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

====================================================================== WebTutor v4.1a Professional Web Design HTML Authoring Tutorials Joe Barta ====================================================================== Latest version always available from http://junior.apk.net/~jbarta/ Info for shareware sites below. DESCRIPTION: Easy to use web page authoring tutorials covering basic and advanced web page design. The tutorials are in HTML format so you can go through them with your web browser. If you've never created a web page before, the basic tutorial will guide you gently though basics of HTML. And, if you know the basics, the advanced tutorials will show you how to add additional features to your page. THESE TUTORIALS ARE DONATIONWARE: Go to http://junior.apk.net/~jbarta/donationware.html for details. A PRINTED VERSION IS AVAILABLE: For $29 you can get the entire WebTutor series in a neatly bound printed manual. The manual comes with a companion CD containing the tutorials, tons of free clipart, generous discount offers on selected software titles, and extra tutorial lessons not available anywhere else. I can ship internationally and quantity discounts are available. As a nice little bonus, I'm ALSO including what's completed thus far with JavaScript tutor. JavaScript Tutor is still a work in progress so don't expect anything fancy... It's just several pages of text, examples and exercises. Still, even in it's rough draft state, it will give you a real workout and a jump on everybody else. Go to http://junior.apk.net/~jbarta/printversion/index.html for details. DISTRIBUTION GUIDELINES: You may use and/or distribute them to your hearts content according to the guidelines below.

- If you wish to translate them into another language, you can. - If you are a teacher and you want to use them for teaching purposes, you can. If you want to print out copies for your classes, you can. (FYI: there is a printed version available) - If you want to include them on a CD with other shareware/freeware titles, you can. (I ask that you don't simply sell it outright) - If you are a business and you wish to offer copies of WebTutor as a free bonus with your regular products, you may. - If you wish to offer the WebTutor download from your site, you are welcome to. - If you wish to re-post the tutorials on your own web site, you may. Guidelines are detailed below. - If, for some lame reason, you copy them verbatim and call them your own, I will have no choice but to tell Mom, and boy will you be in trouble!

RE-POSTING ON THE INTERNET: If you wish to post the tutorials unaltered on your public or private server, you are welcome to. As they are, the tutorials contain advertising. Please leave those ads in place. If you must ad your own advertising, add yours in addition to what's already there. When you put the files on your server, do not make changes to the directory structure. Links within the tutorials are relative and many are generated dynamically with javascript. If you mess with the directory structure, links may not work properly. You'll notice that since v4.1 there is another directory layer - "tutor". This makes things easier for me. If you try to eliminate that extra layer, things will get messed up. Also, this repostable version has active Joke Break links. If you've seen any of the jokes, then you know that many are on the raunchy side. If you run a "clean" site and would rather these links not be there then you can change that easily: In the root level of the WebTutor directory there is a sub-directory named "other". Within this directory is a file named "common.js". Open it with a text editor (DO NOT USE FRONT PAGE OR THE LIKE) and change "jokebreak = 1" to "jokebreak = 0". This will turn off the jokebreak links. REQUIREMENTS: 1) Windows95/98. I've abandoned the 8.3 file naming convention. Win3x users may have some trouble. They should however be able to access everything online though. I'm not that familiar with other operating systems, but I'm guesing the tutorials are still plenty

useable. 2) A graphical web browser with JAVASCRIPT ENABLED (it should be enabled unless you dis-abled it ;-). Preferably Netscape Navigator 4.0 or later. MS Internet Explorer 4.0 or later will do also. If you use something other than the big two everything should still be more or less OK. Very old browsers will hit a few potholes. 3) A text editor. Notepad will do nicely for now. Windows9x users will find Notepad by clicking Start/Accessories and clicking the little blue Notepad icon. 4) A comfortable chair and an attractive member of the opposite sex to tell you how computer geeks are sexy and to rub your neck if it gets stiff. INSTRUCTIONS: Unzip and start with index.html. By default your system will probably crank up your default browser when you double click on index.html. If not, start up whatever you use for a web browser and open that file via File/Open. Alternatively you can drag & drop index.html onto your browser. Understand that sometimes getting started with a new thing is the hardest part. If you are new to computers or new to the Internet and web browsers in general, you'll just have to be patient, persistant and maybe fumble around a little at first. Everybody goes through it... you'll be fine. No files are copied, moved, modified or otherwise scattered about your computer. To "uninstall" these tutorials, simply delete the contents of the webtutor directory. EMAIL: I get a lot of email asking for help on this problem or that, and I'm afraid there isn't enough time to answer them all. I do answer a few occasionally however, and they all at least hit my eyes. If you have a HTML problem, I STRONGLY reccommend you see the various FAQs (Frequently Asked Questions). As sure as a bear dumps in the woods, your question has been axed and answered before. Look in the Table of Contents for "Frequently Asked Questions". Have fun & good luck! Joe Barta jbarta@apk.net Professional Web Design http://junior.apk.net/~jbarta/ =====================================================================

VERSION HISTORY:

v4.1 (Mar/00) - Streamlined navigation. - Advertisements are now a part of the download. Hey, gotta make a couple bucks here and there. - A few changes. - Expanded the readme file a little. - Changed the download file structure to more closely match the online file structure. (makes putting together the downloadable version easier) v4.0 (Mar/00) - After many requests a printed version is available (see printversion.html) - A few minor additions/alterations. v3.9 (Feb/00) - Status changed back to donationware. Call me fickle. Hopefully the tutorials are still one of the best things in life :-) - Broke up the lessons a little more after several requests. - Added a FAQ or two. - A few modest additions/alterations. - Completely revamped navigation. VERY dependant on javascript. Actually, if you don't have JS enabled, it will be next to impossible to navigate. Also highly suggested is an up-to-date browser... Netscape Navigator v4 or greater, Internet Explorer v4 or greater. - There is now only one downloadble version. It contains a switch to enable advertising if you wish to re-post it. (instructions above) - Added a bunch of new buttons for linking back. People kept saying the old ones were junky. I hope these are a little better. v3.8 (Nov/99) - Minor changes, corrections and improvements. - Created an ad supported version for those that wish to re-post the tutorials on the Internet. This second downloadable version can be found at: http://members.xoom.com/jbarta/webtutor_repost.zip It is exactly the same, except it runs advertisements to help pay pay the bills. v3.7 (Oct/99) - Status changed back to Freeware. (They say the best things in life are free, and I wanted to make sure that the tutorials remained one of the best things in life :) My sincerest thanks to those

-

that have sent in payments. Numerous little additions and changes. Moved all the furniture and cleaned out a few virtual cobwebs. Added a FAQ or two Revamped the basic tutorial's Quick Index Revamped the Table Tutor's Quick Index Changed the look of a few things Added a Suggestion Box Added a Mailing List Improved Color Picker a little Added a few things to the basic tutorial and broke it up into 10 lessons

v3.6 (July/99) - Status changed from freeware to donationware. - Minor corrections v3.5 (April/99) - Got "back to basics" all the way around. Long overdue updates. Dumped some fluff. - Removed the various smaller tutorial-ettes. (These will still be available and downloadble from the web site.) - Slightly beefed up the 4 main tutorials. - Added an updated barebones guide to HTML. - Sprinkled in a few FAQs. - Handy Dandy Font Viewer streamlined and doesn't kill IE any more. - Color Picker slightly improved and IE friendly. - Form Tutor contains more info regarding the notorious mailto action along with links to CGI resources. - Added Mailto Converter to the distribution because links to mailto formatter kept disappearing. - Dumped the JS menu in favor of a main Table of Contents. (A new, improved and reusable SiteMap is in the works... stay tuned.) - Improved navigation through the pages. - Dumped the self-extracting exe distribution for a simple zip file. Abandoned the idea for a "professional" installation. Why use a hammer to kill a fly? - Numerous additions/corrections,improvements. What this 3.5 version is NOT: - It's not a tutorial based on HTML 4.0 (it loosely follows 3.2) - It doesn't get into Style Sheets - There's no mention of DHTML (Not specifically at least) - It does not concentrate on authoring documents that validate

against any published HTML recommendation. v3.0 (July/97) Bundled all four main tutorials into one biggun. Added Color Picker Threw in as a bonus a few other tutorial-ettes. (oh boy!) Included a remote Table of Contents for JavaScript Enabled browsers. Included a copy of Kevin Werbach's Bare Bones Guide to HTML.

these versions were 4 separate tutorials ----------------------------------------------------------v2.02 Minor additions & corrections. v2.01 Added link to Web Resources. Minor typo corrections. Minor additions. v2.0 Changed all html file extensions to htm. Numerous alterations, additions, corrections. v1.0 (Sept/96) Original release. =====================================================================

INFO FOR SHAREWARE SITES: NAME: STATUS: VERSION: SIZE: WebTutor Freeware 4.1 1.5 MB

RELEASE DATE: April 28, 2000 APPLICATION HOMEPAGE: http://junior.apk.net/~jbarta/tutor/makapage/ DOWNLOAD: http://junior.apk.net/~jbarta/webtutor.zip ftp://ftp.simtel.net/pub/simtelnet/win95/html/webtut40.zip DESCRIPTION: (short)

WebTutor: easy to use HTML authoring tutorials DESCRIPTION: (longer) Easy to use web page authoring tutorials covering basic and advanced web page design. The tutorials are in HTML format so you can go through them with your web browser. If you've never created a web page before, the basic tutorial will guide you gently though basics of HTML. And, if you know the basics, the advanced tutorials (tables, forms & frames) will show you how to add additional features to your page. SCREEN CAPTURE: http://junior.apk.net/~jbarta/webtutor_cap.gif ICON (32x32): http://junior.apk.net/~jbarta/webtutor_icon.gif CHANGES: AUTHOR: HOMEPAGE: EMAIL: Minor changes, corrections and improvements. Professional Web Design - Joe Barta http://junior.apk.net/~jbarta/ jbarta@apk.net

SPECIAL REQUIREMENTS: None DISTRIBUTION: This file is freely distributable. =====================================================================
General Table Bare Bones So, you want to make Table Form Frames Magic Gate of Contents HTML Guide a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Form Tutor - Presidential Quiz Answers
A Presidential Quiz

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem
Lessons:

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Rep

Dem

Form Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table 2

Lessons:

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table 3

Lessons:

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Table 4

Lessons:

Table Tutor Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Quick Reference

General Table Bare Bones So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

Target

In CONGRESS, July 4, 1776, The Unanimous Declaration Of The Thirteen United States Of America
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the Powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation. We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shown, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object, evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security. Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world. He has refused his Assent to Laws, the most wholesome and necessary for the public good. He has forbidden his Governors to pass Laws of immediate and pressing importance, unless suspended in their operation till his Assent should be obtained; and when so suspended, he has utterly neglected to attend to them. He has refused to pass other Laws for the accommodation of large districts of people, unless those people would relinquish the right of Representation in the Legislature, a right inestimable to them and formidable to tyrants only. He has called together legislative bodies at places unusual, uncomfortable, and distant from the depository of their public Records, for the sole purpose of fatiguing them into compliance with his measures. He has dissolved Representative Houses repeatedly, for opposing with manly firmness his invasions on the rights of the people. He has refused for a long time, after such dissolutions, to cause others to be elected; whereby the Legislative powers, incapable of Annihilation, have returned to the People at large for their exercise; the State remaining in the mean time exposed to all the dangers of invasion from without, and convulsions within. He has endeavoured to prevent the population of these States; for that purpose obstructing the Laws of Naturalization of Foreigners; refusing to pass others to encourage their migrations hither, and raising the conditions of new Appropriations of Lands. He has obstructed the Administration of Justice, by refusing his Assent to Laws for establishing Judiciary powers. He has made Judges dependent on his Will alone, for the tenure of their offices, and the amount and payment of their salaries.

He has erected a multitude of New Offices, and sent hither swarms of Officers to harass our People, and eat out their substance. He has kept among us, in times of peace, Standing Armies without the Consent of our legislatures. He has affected to render the Military independent of and superior to the Civil power. He has combined with others to subject us to a jurisdiction foreign to our constitution, and unacknowledged by our laws; giving his Assent to their Acts of pretended Legislation: For quartering large bodies of armed troops among us: For protecting them, by a mock Trial, from Punishment for any Murders which they should commit on the Inhabitants of these States: For cutting off our Trade with all parts of the world: For imposing Taxes on us without our Consent: For depriving us in many cases, of the benefits of Trial by Jury: For transporting us beyond Seas to be tried for pretended offences: For abolishing the free System of English Laws in a neighbouring Province, establishing therein an Arbitrary government, and enlarging its Boundaries so as to render it at once an example and fit instrument for introducing the same absolute rule into these Colonies: For taking away our Charters, abolishing our most valuable Laws, and altering fundamentally the Forms of our Governments: For suspending our own Legislatures, and declaring themselves invested with power to legislate for us in all cases whatsoever. He has abdicated Government here, by declaring us out of his Protection and waging War against us. He has plundered our seas, ravaged our Coasts, burnt our towns, and destroyed the Lives of our people. He is at this time transporting large armies of foreign mercenaries to compleat the works of death, desolation and tyranny, already begun with circumstances of Cruelty & perfidy scarcely paralleled in the most barbarous ages, and totally unworthy the Head of a civilized nation. He has constrained our fellow Citizens taken Captive on the high Seas to bear Arms against their Country, to become the executioners of their friends and Brethren, or to fall themselves by their Hands. He has excited domestic insurrections amongst us, and has endeavoured to bring on the inhabitants of our frontiers, the merciless Indian Savages, whose known rule of warfare, is an undistinguished destruction of all ages, sexes and conditions. In every stage of these Oppressions We have Petitioned for Redress in the most humble terms: Our repeated Petitions have been answered only by repeated injury. A Prince, whose character is thus marked by every act which may define a Tyrant, is unfit to be the ruler of a free people. Nor have We been wanting in attention to our British brethren. We have warned them from time to time of attempts by their legislature to extend an unwarrantable jurisdiction over us. We have reminded them of the circumstances of our emigration and settlement here. We have appealed to their native justice and magnanimity, and we have conjured them by the ties of our common kindred to disavow these usurpations, which would inevitably interrupt our connections and correspondence. They too have been deaf to the voice of justice and of consanguinity. We must, therefore, acquiesce in the necessity, which denounces our Separation, and hold them, as we hold the rest of mankind, Enemies in War, in Peace Friends. We, therefore, the Representatives of the united States of America, in General Congress, Assembled, appealing to the Supreme Judge of the world for the rectitude of our intentions, do, in the Name, and by Authority of the good People of these Colonies, solemnly publish and declare, That these United Colonies are, and of Right ought to be Free and Independent States; that they are Absolved from all Allegiance to the British Crown, and that all political connection between them and the State of Great Britain, is and ought to be totally dissolved; and that as Free and Independent States, they have full Power to levy War, conclude Peace, contract Alliances, establish Commerce, and to do all other Acts and

Things which Independent States may of right do. And for the support of this Declaration, with a firm reliance on the Protection of Divine Providence, we mutually pledge to each other our Lives, our Fortunes and our sacred Honor.

John Hancock
New Hampshire Josiah Bartlett William Whipple Mathew W. Thornton Massachusetts-Bay Samule Adams John Adams Robert Treat Paine Elbridge Gerry Rhode Island Stephen Hopkins William Ellery Connecticut Roger Sherman Samuel Huntington William Williams Oliver Wolcott Georgia Button Gwinnett Lyman Hall Geo. Walton Maryland Samuel Chase William Paca Thomas Stone Charles Carroll Of Carrollton Virginia George Wythe Richard Henry Lee Thomas Jefferson Benjamin Harrison Thomas Nelson, Jr. Francis Lightfoot Lee Carter Braxton New York William Floyd Philip Livingston Francis Lewis Lewis Morris Pennsylvania Robert Morris Benjamin Rush Benjamin Franklin John Morton George Clymer James Smith George Taylor James Wilson George Ross Delaware Caesar Rodney George Read Thomas M'Kean North Carolina William Hooper Joseph Hewes John Penn South Carolina Edward Rutledge Thomas Heyward, Jr. Thomas Lynch, Jr. Arthur Middleton New Jersey Richard Stockton John Witherspoon Francis Hopkins John Hart Abraham Clark

So, you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Index & Quick Reference Upload Your Pages 216 Color Chart Color Picker Bare Bones General Table So, you want to make Table Form Frames Magic Gate HTML Guide of Contents a Web Page! Tutor Tutor Tutor Buttons Keeper RESOURCES FOR WEB AUTHORS: Images - Javascripts - Backgrounds - Sounds - HTML - Misc Print version available - Get the WebTutor book! WebTutor is Donationware

PROFESSIONAL WEB DESIGN

Joke Break

How to keep an idiot busy

This is a table...duh Stuff Row 2 stuff More Stuff Aunt Fanny's flapjack recipie Even More Stuff And Even More Stuff

Friday, August 16, 1996

Don't miss this week's special focus on campaign '96 and join in our discussion forum.
----ZD Net

Will you use the Web to follow this year's elections?
Yea! There's nothing like the Web for breaking news on Bill & Bob's Excellent Presidential Adventure. Nay! No thanks, I'll wait for the made-for-TV mini-series.

Copyright (c) 1996 ZD Net. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of ZD Net is prohibited. ZD Net and the ZD Net logo are trademarks of Ziff-Davis Publishing Company.

webmaster@zd.com

Friday, August 16, 1996

Don't miss this week's special focus on campaign '96 and join in our discussion forum.
----ZD Net

Will you use the Web to follow this year's elections?
Yea! There's nothing like the Web for breaking news on Bill & Bob's Excellent Presidential Adventure. Nay! No thanks, I'll wait for the made-for-TV mini-series.

Copyright (c) 1996 ZD Net. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of ZD Net is prohibited. ZD Net and the ZD Net logo are trademarks of Ziff-Davis Publishing Company.

webmaster@zd.com


				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1428
posted:9/23/2008
language:English
pages:483