TABLE OF CONTENTS float
GROUND RULES
WHAT IS A WEB PAGE
CREATING A WEB PAGE
UNDERSTANDING HTML
SOFTWARE
BEST PRACTICES
PUBLISHING
GETTING STARTED
COLORS
PICTURES
LINKS
LAYOUT - TABLES
LAYOUT - FRAMES
LAYOUT - LAYERS
SOUND
SCRIPTS
FEEDBACK - FORMS
STYLE
REFERENCES
TABLE OF CONTENTS  fix 
GROUND RULES
WHAT IS A WEB PAGE
CREATING A WEB PAGE
UNDERSTANDING HTML
SOFTWARE
BEST PRACTICES
PUBLISHING
GETTING STARTED
COLORS
PICTURES
LINKS
LAYOUT - TABLES
LAYOUT - FRAMES
LAYOUT - LAYERS
SOUND
SCRIPTS
FEEDBACK - FORMS
STYLE
REFERENCES



HTML Help
Build Your Own Web Site

Like lots of other things, computers and the internet seem pretty complex to those who don't know much about them. And, truly, these things can get pretty complex. *BUT*, they can also be reduced to something pretty simple.

Web pages are just created out of instructions written down in a file which are processed by a program on a computer called a "browser". These days, browsers can get pretty fancy, but the basic language they all understand is "HTML", which stands for "hyper-text markup language". Originally, the idea was just to allow authors to put jumps to reference materials right in the text and make them automatic, instead of making the reader find them in a footnote and then search for them separately. HTML still works the same way. The author types what he wants, and adds references to things he'd like to add. Its just that the types of references and how you can include them are greatly expanded.

To a computer, HTML is what's called software. Its just a set of instructions The great thing about "software" is that if you make a mistake, nothing gets broken and no one gets hurt. It just doesn't work right, and you get to try again. There's nothing to be afraid of.

ABOUT THIS PAGE: I don't count myself as an expert in HTML. There are lots of other pages and lots of people more expert than myself in all of this. There is one big advantage to this site over others I have seen, however: It's free and I don't pepper you with ads. I'm doing it for the fun of it.




GROUND RULES

I'm going to make a few assumptions, just to make the text easier. I'm going to assume you are working on a PC and using Internet Explorer as your browser. That fits 99% of the people on the internet. The other 1% will need to make some adjustments. Also, I'm going to discuss basic HTML in its simplest form. Over time, there have been additions, extensions, and conventions to help make major projects easier to put together, but I'm assuming you don't need any of that and just want to create a web page that looks nice. *Later* we can discuss improvements.

We're going to build the web site first, then worry about putting it on the internet for others. We are NOT going to use an automated "page builder" or service provided by an online service provider. What you build can be put anywhere, moved anywhere, and include anything you want. It will not be dependent on anyone or anything in particular - not even the tools you use to create it.

These instructions are far from complete. There is much more than CAN be done. But you will see very quickly the you can create your own page pretty easily. The techniques get more complex as we go, and less space is given to them. That's because you are less likely to need them and they require even more detail to fully explain. Stop any time you think you have enough - you can always come back when you're ready for more! :-)




WHAT IS A WEB PAGE?

Although we think about a "web page" as being something we see on the internet, the fact of the matter is that it must be stored on the computer where it is being viewed. What really happens when you "access" a web site is that you download all the pieces to your PC from something called a "server", and then your PC follows instructions to display it. The pieces and references are all the files that make up the web site. And the server is just another PC.

The web page you see is just a collection of files that include at least one text document which is the starting point for it all. By convention, the text files are given names ending in ".htm" or ".html", and most servers presume that "index.htm" or "home.htm" is the starting point. But this depends on how the server is set up. A "server" decides how to send things to your PC. A "browser" decides how to interpret HTML instructions. Browsers will attempt to fix any errors they find, and most pages contain lots of "errors" - in part because the browsers themselves keep changing. What is correct one day is an "error" the next. We'll try to minimize errors, because it is more likely that the browser will display what you expect.

We're going to start by building the web page on your PC. Its easier and faster that way. You can adjust it until you like it, and *then* transfer it to the internet (upload) so that others can transfer it to their PC (download) and run the instructions. That's called "publishing" it. We can worry about publishing your web page later, when it makes a lot more sense to you.

The instructions that will be your web page are written *mostly* in ordinary text, with HTML instructions only when needed Everything is just text you can type using any word processor. Let's start right now.

Open any word processor that you are comfortable with and create a text document. Type anything you want - "This is my Web Page." will work. Save the file as a text file, but make sure to name it "index.htm" and put it in a new folder you create that you will use to store you web page. Call the folder "homepage" just for easy reference. All browsers know that a file ending in ".htm" or ".html" means it is a file full of instructions. Now execute your browser (if you dont want to leave this page, open another copy of it), and under the "files" menu, find "open", then "browse", and find the file you just created. Open it. Viola!! There is your very first web page. Not very elegant, but we'll make it better, bit by bit.

What you have just learned is that the most basic instruction to any browser is to display the text that it is given. That makes sense, doesn't it, since HTML is just text with fancy features added?




CREATING A WEB PAGE

Its not necessary, but usually helpful, if you start by deciding what you want to include and deciding how to organize your work. It will save you from having to change things later.

HTML can "grab" things from anywhere on the internet. But, as long as the things you are "grabbing" are your own, its lots easier it you keep them all together, or maybe divide them into logical sections and put each section in its own folder. Some people like putting all pictures in the same folder, but dividing the rest of their work into sections. It doesnt really matter, and you can move them later. The most straightforward approach for a small web site is to put everything in ONE folder.

Because it will impact your design, you might want to think about the kinds of things you want to include, and how you would like to organize the presentation into sections. We speak of a "page", but most web sites are really many pages, each page being a separate HTML instruciton file. These can all be linked together in various ways, and its easier to create and easier to view when the "sections" are divided into separate files.

We're going to create your web page in the "homepage" folder you created above. So, if you know you want to include certain things - photos, text, files, etc - you can put copies of them in that folder any time you want. Make sure you save the originals someplace else, however, because we might want to make changes to the things as they are seen on the web page, but we dont want to destroy the original versions.

There is only one other thing you might want to do, and that's create another folder called "homepage backup". All too often, people lose their work because they make mistakes and then can't get back to where they were before they made the mistake. Make a habit of saving backup copies of *anything* worthwhile, and don't be afraid to create several backups - you never know when you might decide you liked something before you changed it.




UNDERSTANDING HTML

Chances are, your word processor already includes some special provisions to save text in HTML format. But, trust me, they do a poor job of it. You could just type everything in yourself, but that means you have to remember the rules and and type everything correctly. It's much easier to use a special editor, designed to edit HTML instructions.

Now, even though you're going to use an HTML editor that will apply the rules for you, let's review the essentials of HTML so you can see how it all works. All the details and specifics are provided in the HTML editor, so dont worry about them right now. But if you want a handy reference, here's the list:

First, as we noted, HTML will reproduce any text you type, just as you typed it. Ah.. but there is one little expection. It ignores all carriage returns and multiple blanks. Instead, it will automatically fit whatever you type to the space provided. To force a carriage return, you have to tell HTML explicitly that you want a new line. As you can imagine, that means the "new line" instruction is one of the most commonly used.

Which brings us to the general format of HTML instructions. They are called "tags", and they ALWAYS begin with "<" and end with ">". Everything within a tag is interpretted as an instruction, and NOT printed as text. The "tag" for a new line is "<br>", or "break". You will find that most HTML commands have an English heritage. If the instruction is not understood, it is usually ignored.

The "break" tag is unique. All the rest come in two parts - the part where they start, and a part where they end. The instruction is applied to whatever is in the middle. Most of the time, this begin/end pairing is *required*, but often the browser will understand what is meant and correct the error itself. The beginning tag may include lots of options. The end tag looks exactly like the start command with no options and preceded with "/". Thus, I can make text appear bold by typing the tags <b>my text</b> to get this: my text. Throughout this page, it you see the tags, you know I'm just illustrating the example with special characters - the real code follows

Since this very page is coded in HTML, you may wonder how I managed to display the "<" and the ">", since their presence should indicate a tag which the browser would not display. The answer is that I did NOT type those characters directly, but used special codes to display characters that would confuse HTML. There are a few of them, and they always begin with a "&" and end with a ";". To the right is the complete list of special characters.

That's all there is to the format of HTML. You'll quickly learn the common tags that you use often, and can use the HTML editor to remind you of the rest. Capitalization does not matter, by the way. Do whatever you want to make it easier for you to read. Many people type the tags in upper case to make them easier to find. I like them in lower case for reasons I'll get to later.

There is a structure to HTML files that you should follow. It isn't actually a requirement, but it makes things easier if you follow the standard form. There are a few tags that only apply in specific circumstances. Mostly, the structure makes it easier for the browser, which means it can process your instructions better and faster.

HTML files begin and end with the tags "<HTML>" and "</HTML>". Within that are two sections, the "header" and the "body". The header generally contains things to tell the server and/or the browser about how to download and process the instructions. The body contains nearly everything you care about right now. The only thing worth noting at this point is that you can put a "title" in the header which is what will show up in the "history" on someone's browser. It's optional.
<HTML>
  <HEAD>
    <TITLE>
    Put a title here that will be seen in "history"
    </TITLE>
    Other things that might go here are instructions on how to process this file.
  </HEAD>
  <BODY>
    All of the stuff you want displayed goes here
  </BODY>
</HTML>

There's more, of course, - exceptions, special cases, tricks, etc., etc. - but nothing you need to know right now. If you use an HTML editor, it will provide all the basic commands in a menu format for you to select from




SOFTWARE

Here are the software tools (programs) that will do everything you need to create a web site, and more. I've even included some that I don't particularly like, but you might. They are all free, and they are all hosted on this website so I know that they are not broken links or modified verisons. They are certainly NOT mandatory. If you have something you like better, fine by me. Many have updated versions, but these are the versions I prefer. In each case, I have made sure there is an executable file to install the program for you. Most will put a link on your start menu or desktop. If not, you'll need to add your own link someplace.

I recommend that you create a folder called "web page tools" or something like that, create a folder under that for each program, and download each program into its own folder. Then when you install them, install them into the same folder. That way, they will be all together and the ones that dont add a menu item or desktop icon can easily be found.

  • Arachnophilia This is my favorite program for editing HTML (and other web languages). It shows you the code as you build it, with menus to select commands you want inserted, and tools to help you fix errors and make it more readable. Its very complete, and very user friendly. Use it just like you would any word processor.
  • Firstpage This is a free program that looks like "Frontpage". Frontpage is an HTML editor that shows you what your browser will display as you create you page - "What you see is what you get" or "WYSIWYG" style. For a beginner, that makes it easier because you dont have to "visualize" what your code will do - its right there. But, you will never learn HTML this way. But the bigger problem is that in order to do what it does, it adds all sorts of unnecessary code which it never takes away, and after a while you end up with a mess. Please *don't* use any of these "WYSIWYG" programs, but if you must, at least use a free one.
  • WS_FTP When you access a web page, you're using a protocol designed to deliver content to your browser. But, if you just want to transfer files, its easier to use a protocol designed to transfer files. Mind you, you don't see the difference - its easier *for the computers*. But, in most cases, you web page will be uploaded to the server using something called "File transfer Protocol", or FTP. This is a program to do that quickly and easily.
  • ACDSee Strictly speaking, this has very little to do with your web page. It's just very very handy. It works just like Windows Explorer, except that every image file will be displayed when you get to it. That makes it much easier to find and organize images for your web page.
  • LView This, or something like it, IS essential. It is a simple but very effective picture editor and converter. Web pages use images in "gif" or "jpg" format, and anything else should be converted. Big files take time to download, so images should be cropped or shrunk to fit - not left to be scaled by the browser. This is a program to do those things, as well as make other adjustments to make the images better for your web site.
  • RGB Grabber This is a nice little tool to find an exact match for any color on your screen. Very handy little tool to give your pages a nice coordinated appearance.
  • Gif Animator Although probably best saved for later, this will let you create your own animations.
  • Email Obfuscator Once you post your email address, "bots" that scour the net will add you to spam lists. This program converts your email address into codes the bots can't handle.
  • Spell Checker One thing absent from Arachnophia is a spell checker. This is a spell checker you can invoke anytime, anyplace. Just highlight the text and invoke the spellchecker.
  • Quick Zip You will often find things "archived". A common format is "zip", but there are many others. This program handles nearly all of them, and has some other nice features like being able to split your archives into multiple parts so they fit on diskettes.




BEST PRACTICES

As we go, I'm going to introduce some "good practices" to you that may seem a little unnecessary, but one day you may be very glad you followed them.

  1. Neatness. Spaces and line feeds will be ignored when you web page is displayed, so you can run everything together in one line and it will work just fine. But, you will have a horrible time reading it and figuring out where you are. So use lots of spaces, indents, new lines, etc. when you code your page so its easy FOR YOU to read.
  2. Along the same lines, HTML doesn't care if the tags are upper case lower case or a mix. But they sure are easier to find if they are consistnetly one or the other. And while HTML and Windows doesnt care about the case or your file names, many servers *do*, so if you name something "Lamb.jpg" but reference it as "lamb.jpg", chances are it won't be found. Many FTP programs will automatically change the case of all file names when they are uploaded. If you make a habit of typing all commands and all references in lower case, you are less likely to have problems.
  3. Comments. Comments are free, ingored by the browser. Put in lots of comments to remind you what you did and why. Comments begin with <!-- and end with -->. Everything in the middle is ignored by the browser.
  4. Backups. If you create anything at all worthwhile, save it under a new name so you can keep it and find it later. Maybe just add the date to the end of the name. If anything happens to your "working" file, you won't have lost too much.
  5. Save originals, work with copies. Say you have a great picture, but need to shrink it to fit a certain space. So you crop it and shrink it and use the new version on your web page. But someday you may want to fill a different space, and may want that original back. Can't do it if you edited your only copy!!
  6. Keep anything not part of your finished web page OUT of the directory with the materials that are part of your web page. This will make it easier to determine how much space it is talking up, which files you are actually using, and what needs to be uploaded when updating your page.

The tags, labels, and options are not entirely consistent in HTML. Not only do they change from one tag to another, but between browsers and versions of browsers Check the detailed description of any tag to see exactly what options are allowed for each one. Also, poeple use different monitors and screen sizes. It is best to try to make your web page viewable by everyone, but that can be VERY difficult if your page is very complex. The good news is that nearly everyone now uses a recent version of Internet Explorer. If you code for that, people using other browsers may see things a little differently, but they will still see your page. At this stage, it isn't worth worrying about them.




PUBLISHING YOUR PAGE

After you have designed something you like and can open it in your browser from files on your PC, it is a simple matter to "publish" your web page.

You need a web host. Most ISPs will allow you a certain amount of web space, so if you have an account to access the web, chances are you already have a host you can use. There are also "free" web hosting services - but they extract payment in the form of advertsing. And there are firms that specialize only in hosting. The advantage of them is that they generally provide better service and capabilities - which means your web page will load faster, be available most of the time, and may be able to include extra features supported by the host. one very nice feature is the ability to give you your own domain name. You can register a domain name yourself, but it can be a nuisance to maintain. Most web hosts will do it for you, and for free.

It is doubtful that your first web page will be so big that size will be a problem, but web pages can become very large if they include a lot of images. Hard drives are now pretty cheap, and most places will give you more than enough space for your web page.

Wherever you have space, all you need to do to publish your web page is copy everything from the folder in which you created it to the your "home" directory on your host. In some cases, the host provides a browser based utility to upload and maintain your web page. This is simple and easy enough for very small pages, but can become very cumbersome for large pages. The preferred alternative is a program designed to communication with the host in "file transfer protocol". The software section includes two such programs: One is WS_FTP which is dedicated to FTP communications, and the other is the HTML editor Arachnophilia, which includes a feature to automatically transfer files to your host whenever you change them.

In either case, you need to tell the program how to connect to your web host. You'll need to know only four things, which your web host can tell you: the name the web host uses for its server, the name of the folder into which your home page will go, your userid, and your password. . If you save the directory in which you store your homepage on your PC, it wll become very easy to make the connection in the future and immediately compare files.

Once you have uploaded your files, you web page is available for you and everyone else in the world to view. You web host will aslo tell you the URL of your page. If you have your own domain name, then that is all you need.

The big search engines all have special program which scan the entire web all the time looking for sites to add to their index. Your site will eventually be found. You can speed the process, if your wish, by "submitting" your site to the search engines. Short of paying them, there is little you can do to get your site listed at the top, however, so don't water time or money trying for that. When your site is listed, it will include the first few lines of text, and/or a description you put in an HTML "meta" tag. You might want to add those things to be sure your page is listed the way you want.

Unlike when it is on your PC, your web host server will automatically send the "index.htm" or "index.html" or "home.htm" or "home.html" file when someone accesses the *folder* it is in. However, there are variations, and you should find out which name(s) are "automatic".




GETTING STARTED

OK. Time to get started for real. If you have installed the software I listed above, great. If not, you can use "Notepad" for the time being. We're not going to do anything eleborate - just get you on your way.

Use whatever editor you wish and open that "index.htm" file you created earlier. Erase what's there and fill in the basic outline of a web page I gave above:
<html>
  <head>
    <title>
    </title>
  </head>
  <body>
  </body>
</html>

In between the "title" tags, enter something appropriate as the reference name to your Web Site. This will *not* appear on your web page, but in the drop down menu (VIEW > GO TO >) when you tell the browser to go to a specific place you went once before. Its a reference.

Now, add a couple dozen line feeds between the "body" tags. This is just to give yourself a little room.

On one of the line after the opening "body" tag, type in a title such as you'd like to see at the top of your web page.

On a new line somewhere after that, type in some text you might want to include. Make it several lines long, and at least two paragraphs. You can cut and paste from another document if you wish.

Now, click here to open a window and tell your browser it to open your file (FILE > OPEN > BROWSE ).

Your page should look pretty ugly. But notice that if you change window size, your text will wrap around to fit. And if you make the window small enough, you'll get scroll bars to see what runs off screen. Now, lets make some improvements.

First of all, you noticed that everything ran together. HTML ignores spaces and line feeds, remember? Easy to fix. After your title, and each paragraph, add "<p>". Thats stands for "paragraph", and will add not just a line feed, but a separation space. If you just wanted a new line, you could add "<br>" instead.

You can save the file and peek at it again if you wish. You can just refresh the window if you didnt close it the first time. Much better, uh? Lets make some more improvements....

Pick some words in your text and have a little fun: surround one with "<b>" and "</b>" and another with "<i>" and "</i>". Those are very basic - you can do much more.

Before and after your title, add "<center>" and "</center>". If you didn't add the closing tag, everything from then on would be centered, and you don't want that. But maybe you'd like the title to stand out even more. Before the title, enter "<font size=+2>" and after the title enter "</font>".

Now take another peek at your page. Now its beginning to look like a web page!




COLORS

Colors are displayed combining RED, GREEN, and BLUE light sources. These are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

In that opening body tag, there are some options we haven't used. By default, there are certain colors styles used. But you can change all them. For example, immediately after "body", add a space and then "bgcolor='#######' text='#######'", but instead of "#######", use the color picker on the right to choose colors for the background and text on your page. There should be a "#" followed by 6 hexidecimal digits (0123456789abcdef) in quotes. Its always best to include the "#" and the quotes, but most of the time, the browser will correct for these errors along with many more.

This means of selecting colors works in lots of places. You can add "color='#######'" to the "font" tag you used in the title, for example. What you are doing is telling the browser to use a color defined by how much each of red+green+blue to use, two hexidecimal digits per color. #000000 is black, #ffffff is white.

You can also use names, but there are 140 valid color names, and while you may get "red" and "green" correct, darned if I know what result other names will give. Only 16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value. I suggest you stick to the hex values in all cases.

This is a good time to check your page again, if you haven't already. :-)




PICTURES

The next thing to add are pictures. While there are other options, you should stick to two files types for the pictures you include:

  1. JPG - This is the most common, because it gives you full color, and it is a complessed format can be adjusted for limited pallettes and various "quality levels" to shrink the size fo the file. Big files take a long time to download. Even a small picture may be 1000 times larger than a full page of text. Convert your images to JPG and adjust them so they display well but take up the least amount of space.
  2. GIF - This is the only alternative format you should be considering right now, and only in three special cases.
    1. ANIMATIONS - when you see something that is moving or changing, chances are its a GIF image. GIFs have a mechanism built in to permit automatic cycling through many images to create a "movie". Mostlikely, you will find some GIF images on the net you would like to use, but you can also make your own. Beware, however, that a "movie" of ten pictures means it will take 10 times the size of one picture.
    2. SMALL IMAGES - because its takes some overhead to set up a JPG file, very small images might be even smaller as a GIF, which is also a compressed format. If the image is very small and has very few colors, it might be better as a GIF.
    3. TRANSPARENCY - GIFs have another attribute that JPG files do not: You can define any one color as "transparent". that color will not actually be displayed. Instead, it will allow whatever color is below it to shor through. The can create some very interestng effects.
In either case, your include the image by creating a link to it with an "image" tag. The image file can be anywhere, but if you put the file in the same folder with your HTML file, it gets very easy: <img src="tile.jpg">

If you haven't got an image to test with, steal mine. That's real easy - just right click on it a save it to your webpage folder. I named it "tile.jpg", but you can rename it if you wish. It doesn't matter what its called: your browser will know its an image. Be careful, however, because if you get too creative, the server may not know enough to send it when someone accesses your web page. This will work for any nearly any image you see on the internet - even a "protected" image is already stored on your computer in cache associated with your browser. Thats because of what we said at the beginning: a "web" page is really stored on your PC when you see it.

Go ahead and add a line to your web page just like my example. Voila! A picture! Notice that the picture will appear wherever you put the tag. But there are options on the image tag to help you out. I used one. I added "align='left' " to my image tag so that the image would stick itself to the left side and the text would wrap aroud it on the right. With options like "align" and others, you can place images all over the place.

There is another use for images, and that is as the background in place of, or rather, on top of, whatever color you have chosen. The option is "backround='filename' ", and it can be used in the >body< tag among other places. When used as a background, the image will be used exactly as is by the browser without scaling, but it will be repeated over and over in all direction to fill the space.

This is a good time to mention picture cropping and editing. One of the programs provided for downloading is LView. This is a small but very effective program to do most of what you need. The "img" tag provides options that allow you to re-size images, and that's OK for test purposes. But, an image that is too big and rescaled by the browser will take much longer to download, and quite frankly the browser do a lousy job of it. It is much better to crop and scale your image to exactly the size you want and use that in the web page. While you're at it, you can adjust other features of the image to get the effect you want. Consider the image above. Look at what LView can do to it, and notice that the last one has been converted to a GIF with a transparent color defined:

Just remember : work on a COPY. If you get something that looks good , SAVE IT. Make another copy to keep working. *Don't* muck up your originals.




LINKS

The concept of linking is simply that we reference material that is not part of the main body of our document. This was the original reason for the birth of HTML, and "links" appear in many many situations, always with the same rules applied.

The piece of material you want to reference and include in your web page with a link can be anywhere your PC has access - on your hard drive, on another computer in your network, somewhere on the internet anywhere in the world. There are two ways to specify a link in any HTML tag: relative and absolute.

We have already used the "relative" reference when linking to the images. We put the images in the same folder as the HTML file, so the relative location was very simple: the same place. But if the image (or other reference) was in a subdirectory, we would need to include that path in the argument, i.e, if all your image were stored in a sub-folder of "webpage" called "images", then <img src="tile.jpg"> would become <img src="images/tile.jpg">. If "webpage" were in fact a subfolder of "images", you could refence the parent directory by typing <img src="../tile.jpg">. By combining multiple parent and subfolder references, you could get anywhere on your PC.

This is very handy, presuming you don't overdo it. Since all the references are relative, they will apply just as well no matter where you move your web page, as long as the hierarchy of the folders also stay the same. This lets you upload a very complex web page to a server, and everything still works just as well as when it was on your PC.

The alternative is "absolute", which means we tell the browser exactly where the reference is. This is most useful when the link is somewhere on the the internet. It would be VERY difficult to idenitfy its "relative" position from your web page. And there is no confusion as to where the reference is - to tell it exactly the proper URL. In this case, the image tage might look something like <img src="http://www.usda.gov/sheepstuff/bogus/bogus/tile.jpg">. While sometimes necessary, there are two problems with these links:

  1. The location must be available to the web page when it is accessed. If viewing your page on your PC, this link might work only if you are connect to the internet. And, if the reference is to somplace on your PC, it will only work if the person viewing your web page has direct access to your PC (which we hope is very unlikely!).
  2. The other problem is that these links might change. If its your own reference, at least you have control But if you are linking to someone else's materials, they could change at any time, and your link won't work. That's what we call a "broken link",and I'm sure you've encountered lots of them.

Because of the second problem, we almost never use absolute addressing unless we are linking to someone else's web page. In that case, we have little choice. Indeed, the whole purpose is probably to provide a "jump" to that other web page. In all other cases, we prefer to use relative addressing.

As noted, we have already used links to display the images in this page. The color selection tool above is also a link - not to an image, but to a whole program that is actually bigger than this HTML file. But the type of link most people think of is one you click on to jump to someplace else. Oddly enough, it's called an "anchor", and the tag is <a href="link_reference">CLICK ON ME</a> The "CLICK ON ME" is what you click on to jump to the link. It is often just a word or two of text, but it could be anything. *Everything* between <a> and </a> can be clicked on to jump to the link_reference.

One special case of the anchor tag is a link within the same file. I used it in this page for the Table of Contents. In this special case, the link_reference is not to another file, but to a location within the same file, signified by the "#" sign. To identify that location, one uses the anchor tag with a different option: <a name="label">. For example, this code will take you back to the top of this section: <a href="#toc">Click on this line to jump to LINKS.</a>

Click on this line to jump to LINKS.




LAYOUT - TABLES

BIG CELL

This is some text I want to include.

Although you can create quite a page with just the tools above, you may wish to specify more control over the layout of your page. Among other things, you can avoid problems with image placement because the size of the text and the size of the screen varies from one user to another. One solution is the use of "tables" to better specify locations of the elements on your page. Tables create "cells" into which content will be fitted by the same rules used to fit a full page.

The basic tags are:
<table>
    <tr>
        <td>
*content goes here*
        </td>
    </tr>
<table>

Note the open-close pairs. That is important, because an "incomplete" table will cause the page to display improperly, if at all. The table must begin and end with the "table" tag. The "tr" tag defines a row, and the "td" tag defines a division (column) within a row. You can have as many columns and rows as you wish, but you must have the same number of columns in each row of the same table, and they will be forced to the same size in each row. However, you can specify that one division spans two or more columns.

BIG CELL

This is some text I want to include.

Each element in a table has most of the same options that you can use in a "body" tag. You should think of each cell of the table as a mini-page. If you dont specify heights and widths of the elements, the browser will automatically determine what it thinks are appropriate. Often, you need only specify a couple to get the effect you want. Also, you can nest tables, creating a table inside the cell of another table.

For example, here is a table created to force an unusual layout of the elements being diplayed. When creating tables, it is often handy to define a "border" just to eliminate errors, even if later it is removed.




LAYOUT - FRAMES

Another option that allows you more control over placement is called "frames". It is like a table in many respects, but each cell is a separate file, can have all of the features of a web page (including scroll bars), and must be coded as a web page.

The most common use of frames is the one that looks just like a table. Although the tags are different, the format is pretty much the same:
<frameset cols="1">
    <frameset rows="1">
        <frame src="link reference" name="main">
    </frameset>
</frameset>

Normally, of course, one would have more than one row or more than one column. Each "cell" will be its own complete HTML file. One cell might contain a file that is just the menu for your page, while another cell is where most of the content lies. The links in the menu could cause the content cell to more or change any way you wish. The link references get a little more complex, however, because you must refer to another frame within your parent frameset. This can be done by name or number. The reference would look like this: "parent.frame1" or "parent.main".

Less common is use of an internal frame. The internal frame allows you to imbed an external file, with scroll bars, etc, anywhere on the page in any size you wish.
<iframe src="link reference" width="100" height="100">
That is how the list of special characters was added to this page.

If you would like to see an example of how frames are commonly used, take a look a web page I was creating for a friend. It uses a frameset with three rows. The top is a header, the middle is the content which changes, and the bottom is the menu. Turn on your sound - I included sounds. Click here to open a new window with this web page on it.




LAYOUT - LAYERS

Well, its still called "layers", but the original tags have been replaced with "divisions", and the tags to use are <div> and <span>. The "div" tag creates a rectangular space, whereas "span" affects what you type in a linear fashion.

The introduction of layers - or divisions - was a major advance in the HTML language, and is now preferred for *most* of the descriptive elements. The reason is that it is so powerful. You can specify the *exact* size and position of any element on your page and apply a whole bunch of display parameters in one step. They are called "layers", because they can overlap, and the position is given in three dimensions. What's more, all of the parameters can be *changed* dynamically.

OK.. well, that sure is a lot to do with one tag. The basic tag looks like this, with a few of the many options:
<div id="label" class="stylename" style="position:absolute; height:##; width:##; top:##; left:##; z-index:##">
content
</div>

The "division" tag creates a block or "element" within your page. I can be as large or small as your wish. If the content exceeds the size defined by height and width, the content will run outside the size of the division. This generally has little impact, but could have unexpected results because some characteristics of the division only apply to the defined size. It can be a little tricky to make them match exactly. But notice that the other parameters include "top", "left" and "z-index". These specify the exact location at with to place the division. Positions are measured from upper left to lower right on your screen, and are normally measured in pixels. Most people set the monitors to display 800x600, but remember that the viewing window is somewhat smaller even when in "full screen" mode. If the divisions overlap, a division with a higher "z-index" will be on top.

What this means, of course, is that you could build a page with all the pieces in individual divisions, and you could arrange them any way you wish - no matter what order they appear in your HTML file.

ALL of the options are exactly that - options. So, you can create a division and only include paramters you wish to explicitly set. For example, <div id="test" style="position:absolute; left:20"><img src="tile4.jpg" width="50"></div> creates a division that contains just an image. No parameter is specified *except* that it will be placed 100 pixels from the left edge of the window. This is the result:








In fact, that's exactly what I did. You can't tell, because the content of the divisions does not overlap. BUT, we can change that right now, with a little extra magic. Back in the division tag, you will notice another option: id="test". That gives the division a name I can refer to in a "javascript" in which I can move the division around.
Click here, and you'll see what can be done with a division.




SOUND

Sound and music files can be included in various ways on the web page. There are several formats of sound files supported by most browsers. Additional formats might be supported by "plugins" The commonly supported foremates are as follows:

The code for including a sound file is simple enough for a "foreground" link. In this case, its just another HREF, and the surfer clicks on it to jump to the sound file:
<a href="sound_file_name" target="_new">trigger text</a>
By specifying "target=_new", a new window will open, so at least it doesn replace the crurent web page. Still, this is usually *not* what you want to do. This is the effect of this code:
salsa

An alternate method is to specific the sound file as a "background" sound, to play while the current page is being viewed. Netscape chose differnet methods for implementing this, then changed, so you need to include both codes to work in both, but also block duplication. Options allow you to set initial volume and start the sound as soon as the page loads, among other things.
<embed src="sound_file_name" AUTOSTART="false" LOOP="2" WIDTH="200" HEIGHT="16">
<noembed><bgsound src="sound_file_name" AUTOSTART="false" LOOP="2"></noembed>
In this case, by giving a height and width to the tag, you will provide a "console" on screen for the user to control the sound.
<bgsound src="salsa.mid" AUTOSTART="false" LOOP="2">




SCRIPTS - Javascripts & Applets

When you see something interactive or with complex movement on the page, chances are its done with a script. A script allows someone with programming skills to tell the browser to perform logic based on various parameters which include date, time, computer configuration, user inputs, and more. You may not be ready to program scripts yourself, but there are many places where you can obtain scripts to put on your page. Just search the web for "free javascripts".

In fact, many javascripts are so small, they look like they are options in an HTML tag. These "snippets" of javascript can be VERY useful, and small enough that you CAN do them yourself. Although a separate language, Javascript is highly integrated with HTML, and designed to work with HTML.

Javascripts and Java Applets are actually executed by the browser, and therefore harmless to the web host. For that reason, it is certain that you can include these types of scripts on your web page. Other types are even more powerful, but execute on the server, and a badly coded script can cause the server to crash. For that reason, it is less likely that you will be allowed to include any in your web page BUT your web host may provide some that are pre-installed and to which you can link. The one hazard is that all PCs and all browsers are not equal, and javascript should not be used when somehting is absolutely critical - i.e, don't rely on a javascript to pay your mortage.

Javascripts are interpreted and executed in real time. That is, the program instructions are written into the file and executed as written when the file is opened by the browser. That means you can easily "cut'n'paste" a javascript into your web page and make changes if necessary to make it work the away you want. While this may sound impossibly difficult, there are thousands of javascripts freely available designed for exactly that, and which contain all the instructions needed.

Javascripts may be placed in either the header or the body, some must be placed in either, and some have parts which must be placed in both. In all cases, they must be inside <script%gt; tags, but you can include all javascripts within the same tags, or separate them - it does not matter. Here's a small script to show the date the page was last updated, which would be placed in the body of your page:
<script language="JavaScript">
document.write("Last HTML Revision - " + document.lastModified);
</script>

Javascripts are often so short and simple that they are included as the value of options in an HTML tag, rather than coding them separately. There is a provision in HTLM to do this. Many tags will let you begin the option value with "javascript:", which tell the browser to execute the javascript to get the actual value. This allows you to use a "system variable" as the vlue of hte option, among other things. For example, if you want to include a link that just "goes back" to where the user came from, you can include this link:
<a href="javascript:history.go(-1)">GO BACK</a>
GO BACK
In this case, the link reference is generated by a tiny javascript that tells the browser to go back 1 in its history list.

Java Applets are also executed by your PC, but they are interpretted ahead of time and stored in a binary format. You can't edit or change them, so if they require customization, they must be coded to accept parameters. Applets are stored intact on the server with your web page and referenced in your page with the code to include the proper parameters. The parameters are whatever the programmer decided to call them, and each Applet can be different.

Java Applets are strictly "cut'n'paste" additions to your page. You can't modify them, so the best you can do is copy them and use them imaginatively in your home page as best you can. Many are contructed to provide special effects for images and text, and can add a bit of interest. As with javascripts, there are many published for your free usage, and they come with the necessary instructions to include them.

There is another form of "script" that *might* be available to you - depending on your web host. It is called "Server Side Includes" or SSI for short. SSI enable you to place information provided by the server in your web page. These would be things like the date & time, file information, user information, and parameters about the connection and/or web page known to the web host server. If enabled by your web host, they usually require your html file to end with ".shtm" or ".shtml" so that the server knows to check the file for SSI functions.




FEEDBACK - FORMS

Forms are primarily a means to obtain user input. There can be many forms on a web page. Each one begins and ends with the <form> and </form> tags. Forms may be named, but they don't have to be. Naming allows them to be referenced by other elements of the page. Within the form several types of "input" tags can be placed which are not valid anywhere else. For that reason, "forms" are sometimes used not to collect data, but to make use of the format of these "input" tags.

The opening form tag can includes options to specify how the form is processed. The option "action=URL" tells the processor to jump to the URL and pass it the content of all input tags as arguments. The URL is often a script, but it doesn't have to be - it may be another HTML file which reads the arguments. The input on one page can be used to control the display of the antoher. Another common alternative is a small javascript: "action=mailto:your_email_address". For most browsers, this will send you an email containing the data collected on the form.

As long as the page with the form is active, an input value can be used as a parameter by referencing a variable with a name following the general format "document.input.value". This would pick up the value of the input and could be used in other locations on the page. . The following code creates a small form:
<form name="myform1" action="javascript:xfer();">
<input name="one" type="text" value="Enter something here"
<input type="submit" value="copy input"> </form>

We can create another small form someplace else:
<form name="myform2" action="javascript:xfer();">
<input name="one" type="text" value="Enter something here"
<input name="two" type="text" size="20" value="This can have a value, too"
<input type="submit" value="copy input"> </form>
We need a small javascript to perform the "action" in this case
<script>
function xfer(){document.myform2.one.value=document.myform1.one.value;}
</script>

As noted, forms are sometime used just to use the appearance of their features. Here's a bit of code to create a neat "button" style link to another page:
<form>
<input type="button" name="anything" value='Your Label Here' onclick="location='new_URL' ">
</form>

In fact, the javascript we used earlier might have been written directly as an option. In this case, we'll go from this form to the first form. Instead of an "action", we use a button with an "onclick" option
<form name="myform3">
<input name="one" type="text" value="">
<input type="button" onclick="javascript:document.myform1.one.value=document.myform3.one.value;" value="copy input">
</form>

For a beginner, the best way to make use of the javascripts is to find examples and free scripts. For a full list of available "forms" tags and options, see below.





STYLE SHEETS

The full name is "Cascading Style Sheets", and you will see references to them as "CSS". In fact, they can get very complex, with a language as detailed as HTML and Javascript. They are an extension of HTML intended to enhance the capabilities and eliminate some of the inconsistencies in HTML. Often, you can use Style Sheets to replace other options in HTML tags, and have even more control.

They are called "cascading" style sheets because they can include their own hierarchy. They are called "sheets", because you can define a full set of "styles" which can then be referenced as a common "sheet" to be used across multiple pages to give a large web page a consistent appearance without have to include all the right options on every HTML tag.

All of that might interest you someday, but right now the important thing to note is that you can include the option "style=.." on many HTML tags and use any of the parameters of CSS. As noted, these are more extensive than the original HTML options.

Also, you can define a "sheet" for your page which does NOT have to be so complex, but which will be applied to every instance of the tag. You could change how a <p> tag operates, for example, to give two blank lines and indent the next line of text, for example. More likely, however, is that you will make use of CSS options to alter the appearance of text beyond what can be done in HTML. Consider this example:
<font style="font-family: Arial;font-size:200;color:#ff0000;background-color:#00ff00;background-image:url(tile5.gif)">
Fancy
</font>
Fancy

That may be pretty good for a title or header. But, if you want the style to apply generally, you can code it in a "style sheet" and then refer to it by name anywhere, redefine existing parameter, or apply to all elements of a certain type. In the following example, we refine the "tt" tag, which would normally give you a "typewriter" style of text:, and we create a "class" called "fancy"
<style>
tt={font-family: Times;font-size:16;color:#003300;background-color:#00ffff}
.small_fancy {font-family: Arial;font-size:16;color:#ff0000;background-color:#00ff00;background-image:url(tile5.gif)}
</style>
<tt>Now type the same line of text.</tt>
<span class="small_fancy">Or we can type it this way</span> Back to normal
Now type the same line of text.
Or we can type it this way Back to Normal



REFERENCES

These are links to other sources of material for you to use, and/or explanations and instruction on some detailed topics covered only lightly here.

Don't be afraid to search for material on the internet to use in your web page. There are hundreds of sites offering free images, music, scripts, etc. Also, *anything* you can see on your PC is *stored* on your PC and available to be copied and used by you. In most cases, a right click will birng up a popup window to save the item, which really means making a permanent copy from the one in the temporary files folder.

Also, feel free to view the source of this page and copy anything you like.



This page has been prepared by Jim Grupé, President, CEO, CIO, CFO, CIA, and EIEIO of Group A Systems, LLC, as a public service. If you happen to know of a need for a global network/application/systems guru to assist your corporation or government, by all means contact him.
He doesn't do web pages except for amusement.