Note: since this page was written, browsers have begun to render CSS (style sheets) quite well. I encourage you, if you already know the old-style HTML, to learn and use CSS instead (see Style Sheets for the Weary).

If you do not know HTML, then you might as well start out learning CSS in the first place. Most of the information on this page is still usable; however, "old" HTML code is included for reference purposes only and has been marked "(old)." These sections are all covered in Style Sheets for the Weary under "Quick Reference."

I am not a big adherent to the Web Standards religion if only because some elements of Web Standards do not render in my browser (Netscape 6.2). Upgrading to the newest browsers would, for me, mean buying a new computer and I don't like the idea of being forced to do so.

My solution is to integrate the old code with the new and to try to use as much of the new code as possible.

99% of websites allow you to view all of their HTML code. You just go to View/Page Source on your browser. (All browsers have this feature...you might have to look for it, but it's there.) A grey window pops up with all the code right there.

Most of HTML, you will learn from copying someone else's code.

You may copy the code inside the window by selecting it with your mouse and hitting Control+C. Now the code is ready to paste.

To view code from a frame, right-click inside the frame. You should get the option View Frame Source...it's the same thing.

View Page Info or View Frame Info...this gives you the name of the HTML page and a list of all the graphics, applets, etc. in it.

[ top ]

This is one of those things that no one seems to explain to you. The only real way to place a margin around your text, is to use tables.

Please see the Tables section.

[ top ]

You can use spaces, line breaks, paragraphs and blockquotes to control where your text and graphics appear on your page, some of the time.

But the only way to place these things exactly where you want them, all of the time, is to use tables.

Please see the Tables section.

[ top ]

I put this information in its own section, Style Sheets for the Weary.

[ top ]

Of course you will want add links to your pages. You can link to different places on the same page; to other pages in your site; to different places on those pages; to other websites entirely. All using the same basic "anchor"--the hypertext link.

The basic format of a link is:

The link text is what the user clicks on, to get to www.domain.com. Try it out!

To link to a particular page on a site, specify it in the URL:

This takes the user straight to a particular page, page.html, on www.domain.com.

To link to a particular section of a page, you'll need to do two things. One is to mark the beginning of the section you want to "jump to":

Place this code at the beginning of the section. (It doesn't show on the page itself.) Now here's how to use it in a link (when called from the same page that has the section on it):

When called from a different page:

If the user clicks the link, she'll jump right to the marked section of the page. You can name your sections whatever you please.

[ top ]

Now that you know how to make a basic link, it's important to know how absolute and relative links work.

An absolute link uses the full URL, including the http://:

You use absolute links on your pages to call remote pages (pages on a different server).

A relative link uses a URL that's relative to the page that has the link on it:

This calls the Arts & Leisure section, when linked to from the page you're reading now.

Before we go into how it works, keep in mind that you can use absolute links to link pages on the same server. It's just that you usually don't. For one thing, it's faster, shorter and easier to use relative links. For another, if you need to move or reuse parts of your site, using relative links will make it much easier to do.

Relative links work by using the Unix style of directory. If you've done DOS (creak) then it's similar. If you haven't, it's no big deal. You just need to know how to move up and down the directory levels.

To go up one level, use ../:

This steps you up out of the current, HTML for the Clueless directory. To go up two levels:

Just keep adding ../ to go up each additional level.

What about going down? You put the name of the directory in the URL:

This steps up two levels, then goes down one level, into the "fun" directory.

To go down two levels:

As you can see, it's not complicated. It's just a matter of getting used to stepping up and down.

[ top ]

To open a link into a full window:

This destroys all frames and opens the index page of www.thebroadroom.net into the full window.

To open a link into a new window:

This launches a new window and loads the index page of www.thebroadroom.net into it.

[ top ]

For this it helps to have to have some familiarity with frames (see Frames).

You'll need to know the name of the frame that you want to open the link into. All frames should have names. If you didn't name your frames, go back and do that first.

[ top ]

You can set the colors of links, visited links, and active links (the color the link turns when you click on it).

This code has been deprecated. See Style Sheets for the Weary, Setting the colors/effects of the links.

You can use either color names or hex codes for the colors (see Cheat Sheet of Colors and Fonts).

[ top ]

This code has been deprecated. See Style Sheets for the Weary, Setting the colors/effects of the links.

Place this code right under your opening BODY tag (not inside it, just under it):

This turns off the link underlines from that point on.

[ top ]

For this you will have to have some familiarity with using graphics (see Graphics):

Most browsers automatically place a border around an image used as a link. To turn off the border:

Especially if you're using link underlines, make sure you put the closing </A> tag right next to the end of the IMG tag. If you put the </A> on a new line, you'll get that annoying tiny line next to the image.

Using ALT is a good idea. ALT does two things. Before the image loads, it tells the user what the image is. After the image loads, if the user places her mouse over the image, the ALT pops up a little box (like a Tool Tip).

[ top ]

This code has been deprecated. See Style Sheets for the Weary, Changing the background/foreground colors of a page.

You can use either color names or hex codes for the colors (see Cheat Sheet of Colors and Fonts).

[ top ]

You can tile the background of your page with an image.

This code has been deprecated. See Style Sheets for the Weary, Using an image as a background.

[ top ]

This code has been deprecated. See Style Sheets for the Weary, Changing the background/foreground colors of a page.

All text, unless specified otherwise inside the body of the page, will be medium blue.

As always, you can use either color names or hex codes for the colors (see Cheat Sheet of Colors and Fonts).

[ top ]

This code has been deprecated. See Style Sheets for the Weary for examples of formatting page bodies using styles.

You can combine all of the body attributes inside a single set of BODY tags:

[ top ]

This code has been deprecated. See Style Sheets for the Weary, Setting the font for the page and Changing the font (inline).

There are several different fonts to choose from (see Cheat Sheet of Colors and Fonts).

[ top ]

This code has been deprecated. See Style Sheets for the Weary, Setting the font for the page and Changing the font (inline).

You may use either color names or hex codes (see Cheat Sheet of Colors and Fonts).

[ top ]

This code has been deprecated. See Style Sheets for the Weary, Setting the font for the page and Changing the font (inline).

You may also change the font size in a relative way:

This makes the font two sizes bigger. Bigger than what? If you've set the font size already, SIZE="+1" will make the text one size bigger than whatever you set.

If you didn't set your font size, then SIZE="+1" will make the text one size bigger than whatever default size the user has set in her browser.

Likewise:

[ top ]

Either produces bold text. What's the difference? Some old browsers did not recognize the <B> tags. Webmaster used <STRONG> so that the browser could figure out how it wanted to emphasize the text.

Similarly, either produces italicized text.

This is used to underline text, but you won't see it too often on the Web, because underlined text is typically reserved for hypertext links.

[ top ]

To right-align or left-align, use paragraph tags:

ALIGN="left" is the default value for paragraphs; you'll need to set it only if everything else is centered or right-aligned and you want the paragraph left-aligned.

[ top ]

One of the first things you'll notice when you do your first HTML page, is that HTML tends to get rid of all the whitespaces you put in.

For example, if you hit the space bar twice in your document, only one space will show on your page when viewed in a browser.

You can force the browser to create spaces like this:

Each &nbsp; makes one space. Put as many of them together as you need.

[ top ]

This forces the browser to start the next line of text, or place the graphic or table or what you have, on a new line. You can place as many <BR /> tags together as you need.

[ top ]

Paragraphs can have different attributes, but the only one I use much is the alignment:

ALIGN="left" is the default value for paragraphs, so you won't need to set it unless everything else is centered or right-aligned, and you want the paragraph left-aligned.

What about ALIGN="center"? You can use that. Since <CENTER> </CENTER> is basically the same thing, I tend to use that instead.

[ top ]

You get indented text...it stays indented until you turn BLOCKQUOTE off. Can be kind of handy, even though BLOCKQUOTE insists on adding a new line in front of the block of indented text and also one after it.

[ top ]

UL stands for Unordered List. The above code produces this:

• list item
• list item

You may format the bullets as follows:

• list item
• list item

• list item
• list item

• list item
• list item

You may also format bullets for individual list items:

• list item
• list item
• list item

You can insert a list into a list item:

• list item
• list item
• list item
• list item
• list item
• list item

[ top ]

OL stands for Ordered List. The above code produces this:

1. list item
2. list item

You can format the numbers in the list as follows:

You may also set the number at which the list starts:

9. list item
10. list item

[ top ]

I don't use this often. I think I've used it once. But then it'll depend on what you're using your lists for. Anyhow here it is:

Unordered List

A "bulleted" list of items.

Ordered List

A "numbered" list of items.

Definition List

A list where you don't use <LI> </LI> to put items in the list. You use <DL> </DL> tags to enclose the whole list. You use <DT> </DT> tags to enter the terms to be defined. You use <DD> </DD> tags to enclose the definitions of the terms.

[ top ]

Javascript is a scripting language, invented by Netscape.

Before we go on, let's clear up that Javascript has nothing to do with Java. It's confusing, but they are two entirely separate, different languages.

Javascript is actually a language. It's not worth studying, exactly, since it's a rather simplified language. You can pick it up and figure out how to use it without studying it one way or the other.

I have mixed feelings about Javascript. There was a time when I used a lot of it on my sites. You don't need a special cgi-bin directory to use Javascript; all of the code executes on the user's PC, the same way that HTML and applets do. Ergo you can use it with any host, including free hosts.

But the downside is this. Microsoft hates Javascript. (I did mention Netscape invented it?) Most people using my sites use Microsoft IE. I use Netscape, myself. :) But what works in my Netscape, may not work in IE. And, the weirdest, simplest Javascript things don't work in IE, particularly newer versions of IE.

That said, using a little Javascript in your pages shouldn't hurt anything. But be wary of depending on Javascript. If your site depends on fancy Javascript to work, then, it shouldn't.

[ top ]

The fastest way to get Javascript code, is to Google it. Look for free Javascript scripts. If you're looking for a script to do something in particular, include that in your search.

There are several sites that have lots and lots of free Javascript code. Along with the code, there are always instructions on how to copy and paste it into your page.

How about writing your own Javascript code? Most of the time, you won't need to reinvent the wheel. You can usually find a script that does at least some of what you want. If it doesn't do it all, feel free to play with it. If you know how to program, you'll recognize the familiar constructs. If you don't, make the changes slowly, testing it out with each change (no matter how small).

I've never even heard of a Javascript compiler. (A compiler is a program you need to write most programming languages.) I'm sure there is one, but it's not necessary to have one in order to write Javascript. If you want to test your Javascript code, it's the same as HTML. You open a browser window (you don't need to be connected to the Net) and open your page inside it, to compile and run the code.

If you make changes to the code, refresh the page. Sometimes the Javascript won't refresh that way; you'll have to go to a different page, then return to the page with the Javascript on it. (Don't ask me, I just work here???)

Like other programming languages, Javascript does require a certain level of precision. Leaving out a single comma or semi-colon can make the entire script fail. So, as I say, make the changes slowly.

If you're getting seriously into Javascript, it's well to buy a book. Javascript for Dummies, and reading the Javascript section that most Web and HTML books have in the back, is as good a way as any to pick it up (that's how I did it).

[ top ]

Java, as mentioned above, is an entirely different, separate language from Javascript. Only the name is similar.

Java is a complete programming language. You can write any application in it. It's vastly popular with programmers. In fact the next Java is...Java, as far as I know. :)

However, a word of warning. Java was invented by Sun Microsystems. Hence, Microsoft has been trying for years to kill it.

I found that out the hard way when some of my beautiful Java applets...an applet is a program written in Java that can be "embedded" in a Web page...crapped out in new versions of Microsoft IE. What the...?! What can be so hard about running three-year-old Java code?

It may be sheer spite, or cutthroat business practices, but the reality is, as of this writing, most people still use PC's that run on Microsoft operating systems. And therefore, most people still use IE. It sucks, but there you have it. Your applets may or may not work the way you want them to on IE.

[ top ]

You can use other people's Java applets or you can write your own.

You have to know how to program if you want to write your own. Java is a complete language, unlike Javascript or HTML. If you don't know how to program, you'll have to take a formal class. There is a lot to learn.

If you would like to use someone else's applet, Google it. Look for free applets.

What about security? Applets really cannot do any damage. Sun was very, very very careful about that. That's why programmers still search for ways to get an applet to write a file to the server. Technically, applets can write files to the server, but it's difficult, and it's not reliable.

Again I will remind you that Sun invented Java. Ergo, Microsoft has no motivation to make it easier for applets to do anything much of anything. They're trying to kill Java, remember?

[ top ]

Okay...you've found the applet that you want to use on your site. Download the class files for the applet. These are files with the extension .class. Sometimes there's only one class file. If there are more than one, sometimes they'll be zipped together in a zip file. Download and unzip.

Read the instructions carefully. You'll need to upload the class files to your server. Most FTP programs automatically switch to "binary" to do this, but if yours doesn't, set it manually to binary.

You can put the class files in the same directory as the HTML page from which you want the applet to run, or you can make a separate directory just for applet files and put them in there. It's up to you.

Now you will need to point to the main applet class file from your HTML page. If the applet has only one class file, point to that. If it has more than one, read the instructions to find out which one is the main file.

Here is how to point to it, if the class files and the HTML page are in the same directory:

You do need to specify the dimensions. Again, there should be an example of this where you got the applet.

Here's how to point to it if the applet files are in their own directory:

Of course you will use the correct URL to point to your own applet directory.

Some applets have parameters. That is just a way to configure the applet. Here's an example (from our front page):

If the applet requires you to use parameters, it'll say so in the instructions. RTFM! :) Put the parameters in carefully. Do it exactly the way it says in the instructions.

[ top ]

Okay. You installed the applet and it won't start or won't run.

Take a deep breath. Most of the time, the first time you try to run the applet, it won't. Even if you're running your own applet! Take your time and go through step by step.

1. Try closing your browser, emptying out the cache, opening it again, and running the applet again. Believe it or not, this works much of the time

2. Make sure you uploaded the class files in binary mode. Yes, I've used ASCII mode to upload class files and then sat around wondering what the hell was happening.

3. Make sure you pointed to the right class file (it's case sensitive), using the correct URL, and did the parameters exactly the way specified in the instructions (these can also be case sensitive so copy the case exactly).

4. Did you forget to specify the dimensions of the applet?

5. Some hosts, notoriously the free ones, will not run certain applets. If you have another server, try the applet on that.

   Other hosts will let you run the applet, but it won't work right away. I've installed applets and, hours later, they ran. Insane, but give it a shot if you've checked everything else.

[ top ]