Homebuilt Homepage

Getting Started

Page Index:
What Is HTML?
Index Files - index.html
Structure Of HTML Commands
HTML Command Options
The Most Common Problems
      Turn Off What You Turn On
      Don't Cross Commands


What Is HTML?
HTML files are just text files with codes/commands to tell the browser how things should look and be arranged. It's not difficult. All you need is a text editor and a web browser. A graphics program of some sort is a good idea as well. (For specific software recomendations go to the Software Recommendations page.)

HTML commands are simply a way of describing what a page should look like. If you opened a MS Word file with a text editor you would see pages of arcane code that represent the formatting of the document. HTML files may seem arcane, but they're really quite simple once you know what you're looking at.

The advantage is that all computers that have a web browser program, no matter what operating system or hardware they are based on, can use the same files. And you can link to anything else that is on the Internet. The disadvantage is that formatting options are somewhat limited in the interest of compatibility.

There are extensions, (add-ons to HTML,) that can format a document much like a word processor can do. But there will be problems with some systems. I don't recommend using them unless the target audience is small, like a club, and you know every computer configuration of everyone that is going to use to view it. Generally, these things are self-defeating. Most people use them to make a "better" looking page. The purpose of making it look good is so people will read it. But using these non-standard extension will ensure that about 25% or so of the viewers will have difficulty viewing the website. And for another 10% it will render completely wrong resulting in a very ugly, annoying and incomprehensible page. Most of the time they're completely unnecessary, unless you are trying to duplicate a printed document. In that case, the most compatible road is Adobe Acrobat.


Index Files - index.html
An Index file is the HTML file that is automatically loaded when the file name isn't specified. For example, instead of using the URL http://www.mywebsite.com/index.html, you can just use http://www.mywebsite.com/.

Most webservers will automatically send a file named index.html or index.htm if none is specified. But some will only send index.html. If you have a Windows computer this can be a problem. Many versions of Windows won't allow extensions with more than three characters. In this case you should upload the file then rename it to index.html.

This also works for subdirectories. For example, http://www.myserver.com/thisdirectory/ is the same as http://www.myserver.com/thisdirectory/index.html.

You should never have both an index.html and an index.htm file in the same directory. It can cause problems with access to your site. This also goes for file names other than index.


Structure Of HTML Commands
All commands are surrounded by < and > brackets. This is how your browser knows it's a command. For example, <b> turns on bold, and </b> turns off bold. So "<b>bold</b>" would be displayed as "bold".

Most commands come in pairs. One command turns on something, and another turns it off. They are usually identical except the stop command is preceded by a slash, /. For example, <i> turns on italics, and the stop command to turn it off is </i>.


HTML Command Options
Many HTML commands have optional modifiers that change the behavior of the command or the document. They are added within the < & > brackets. The first bracket is immediately followed by the basic command. If you don't use any options then it is immediately followed by the > bracket. But if you want to use an option, the basic command is followed by a space, then the option, which is immediately followed by the > bracket. If you use multiple options they just follow one another separated by spaces. The > bracket follows the last command, (without a space.)

For an example see the Body command's option section.


The Most Common Problems
You may get away with doing these things sometimes. But then, you may not. You don't know. It may look fine to you on your browser, but it may make a mess of your page to someone else on their computer and browser. Since you don't know what the results will be, you should avoid these simple mistakes.

Turn Off What You Turn On
When you use an HTML command, be sure you turn it off. With formatting commands, like bold <b>, the results of not turning bold off are obvious. With other commands it's not so obvious. But it can cause a lot of problems with your page if you forget to do this.

When your page isn't behaving like it was supposed to, this is the most likely cause.

Don't Cross Commands
The second most likely cause of unexplained behavior is crossed commands. You should turn off commands in the reverse order they were turned on.

The most common instance would be when you use multiple formatting commands. For example, a combination of italics and bold such as, "Watch out for this!". Say you start with the bold command first, then turn on the italics. You must then turn off the italics first, then the bold. As in, "<b><i>Watch out for this!</i></b>".

But the common mistake is to turn them off in the same order you turned them on. This would look like, "<b><i>Watch out for this!</b></i>". But this is crossing your commands. The results are unpredictable and can prevent browsers from rendering your page correctly.

Now let's look at a more complex example. Say you wanted to use a combination of italics and bold such as, "The quick brown fox jumped over the short fence." You might think the easiest way to do this is "The quick <i>brown fox <b>jumped over</i> the short</b> fence." Here italics is turned on, then bold is turned on. But italics is turned off before bold is. This crosses the commands and can cause problems with your page rendering correctly. So the correct way to format this would be "The quick <i>brown fox <b>jumped over</b></i> <b>the short</b> fence."


Questions? Email the address at the right.
HHWeb
@
Homebuilt
.Org

Return to Guide Index
Return to Homebuilt Homepage's HTML Guide
Return to Homebuilt Homepage