The first step in building a web page is learning HTML. Yes, you can buy a fancy web page editor that promises you never need to learn HTML. However, HTML is amazingly simple and flexible, and by using fancy web site software you give up lots of that flexibility, not to mention some hard-earned money.

HTML is not a programming language. It is merely a way of describing your document so it can be properly presented by a web browser. Each browser has default formatting it uses for the various items on a web page. By defining the elements of your page (such as a heading or a paragraph), you are indirectly causing the formatting of the page to change.
You can turn any existing text file on your hard drive into a web page in just a few minutes. You edit the file with Notepad and add some standard text at the top and bottom, put some characters called tags at the beginning and ending of the paragraphs, and you're done.

Granted, the web page will be dull, but it will load into a browser and display properly. The fun part is making it look good. That is really a matter for Cascading Style Sheets, which we will discuss later.
horizontal bar

The Basics

I won't write a full tutorial here because I've provided links to some really good ones in the Basics section below. To give you an idea of what we're talking about, I've provided the code for a simple web page on the right.

Copy that into Notepad, save it as a file with a ".htm" or ".html" extension, and then double-click on that file to bring it up in your browser. Poof: a web page! (If you want to cheat, just click here to see what the result would be.)

Most tags consist of an open/close pair. Required tags are <HTML></HTML> pair that define the start and end of the document and let the browser know that it is an HTML file. Within that are two sections, <HEAD></HEAD> and <BODY></BODY>. The former provides a place for information about the document, such as its title. The latter encloses what you actually want to display in the browser window.

The most common tag pair is <P></P> which enclose a paragraph. Others used in the sample are <H1></H1> (to enclose a top level headline) and <H2></H2> (to enclose a secondary headline). There are two more tags in use and they are some of the rare ones that do not have a closing partner. <HR> creates a horizontal rule (or line). Another single tag is <BR> which causes a line break.

Although there are HTML tags specifically for formatting, they are being phased out in favor of Styles, which I discuss in the next section.
Text for the browser's title bar</TITLE>

Heading One</H1>
Text under heading one.</P>
Heading Two</H2>
Text under<BR> heading two.</P>

Once you have these few basics down, it is just a matter of learning a few more tags and some options for them. The best way to do that is to check out the sites listed below, and to look at the source code of pages you find interesting. It isn't too hard to figure out what most tags do by looking at the code and then the page that results from it. You can usually see the code for any web page by right-clicking in an empty part of the page and selecting View Source in the context menu.
horizontal bar

Style Sheets

Styles are used to describe how you want the elements of your web page to be formatted and positioned. For example, you can change <P> to <P style="color:red; font-weight:bold"> to cause the text in that paragraph to be red. In that example, the word style is part of the official HTML syntax that means something special to the browser. The browser will interpret whatever is in the quotes as formatting instructions. You have to use a specific syntax for those instructions, and those are described in the documents referenced below. The text that makes up a style can be lengthy and elaborate, specifying margins, font, size, color, backgrounds, borders, indenting, and many other attributes. This method of using styles is called in-line because it is mixed in with the HTML tags. This is the simplest way to use styles, but also the least efficient in the long run.

The next method of using styles is to take a set of formatting instructions that you use frequently and give it a name. This name is called a class. For example, let's say that you often make use of paragraphs with bold red text. It is best to use a name that describes the function of the format, and not the format itself. In this case, let's call the class attn (short for "attention"). You'll see why you don't want to call it red shortly. There are two parts to using a style class. One is to define what it means and the other is to apply it to a specific element of the page.

To define a class, you need to add a tag pair within the <HEAD></HEAD> section of your page. This pair is <STYLE type="text/css"></STYLE>. Within that tag pair, you can define your classes. To define our simple class, we would use this syntax:
  .attn {color:red; font-weight: bold}

To apply that, we would replace:
  <P style="color:red; font-weight:bold">
  <P class="attention">
This has two main benefits. First, it puts the formatting information in one place. If you decide next week that you want those paragraphs to have a green text or a yellow background, you can make that change in one place near the top of your page, and every pararaph that uses the attention class will change to the new formatting. (See why we didn't call it red?) The second benefit is reduced page size. If you use that class ten times, we save a lot of characters in the page. The fewer characters, the faster the page loads, and the happier your visitors will be.

However, the very best way to use styles is in Style Sheets. This lets us move the style definitions out of the <HEAD></HEAD> section of each page and into one separate file that we can include by reference in each page. Moving style definitions from the page head section to a separate file gives us similar benefits as moving style definitions from the tags to the header gave us, but on an even larger scale. Now we can make a change in one place and have it affect every page in the entire site, and the definitions only occur once so we save the space they would have taken up in the head section of every page. To do that, we create a separate text file. By convention, it gets an extension of ".css". The Style Sheet used by this site is called mystyles.css. Inside that file, we move what was inside the <STYLE><STYLE> tags into that file. Space and line breaks don't matter. We then reference the file by adding src="mystyles.css" to the <STYLE> tag.

The official standard is called Cascading Style Sheets (CSS for short) because you can combine multiple style sheets, styles in page headers, and inline styles all together. If there is a conflict, generally the definition closest to the page element wins. For example, if you define an attn class in the .css file and in the page header, the version in the page header would override the one in the .css file.

Unfortunately, there are significant differences in how the various versions of the different browsers support CSS, so you need to be careful. The links below will show you some great examples of what can be done with style sheets, how to build them, and how to deal with the various incompatibilities you'll find.

Free Software