Building Business Websites

Lesson 1: The Basics

FINALLY, We Get to the Code

Here we go! Your first bit of HTML. Ready?

First, know that you don't need any special software to create, edit and save HTML. There are a number of products out there designed to make editing Web page code easier, but, really, you don't need them.

There are 2 main types of these products: the kind that will allow you to create templates through a WYSIWYG (pronounced "whizzy-wig" and is short for "what you see is what you get") editor and those that require you to laboriously type in your code by hand. I'm a glutton for punishment and I do the latter, only because I like exact control over my code, and it makes troubleshooting easier for me.

Just in case you have some cash, I'll give you the scoop on purchasing some of the major products:

Macromedia Dreamweaver MX - the latest incarnation of a product that really caters more toward professional developers. I mention it only because I don't want to leave it out. It is state of the art, and more useful for database-driven sites. List price: around $350.00.

Microsoft Front Page - This product is getting easier to use, but it still generates some rather bulky code. It does have some useful template features and beginners have found it helpful. List price: around $120.00.

Adobe GoLive - the best of the bunch as near as I can tell. It's a bit pricey for novice users and hobbyists. List price: around $400.00.

Macromedia Homesite - a lean, mean fightin' machine. This is a tool for hand coding on PCs, and my personal favorite. List price: around $90.00.

But like I said, you don't need these to do some basic coding. All you need is some kind of text editor. This can be your word processing software or the notepad that comes installed with the Windows OS. If you want to use notepad, go to your Start menu, select "Accessories" and Notepad should be in the drop down list.

First thing your should know: HTML is dead easy. It is simply a set of tags that you put around your text so that your browser reads it and knows how to display it.

Well-formed HTML tags always come in pairs. Repeat after me: the tags always come in pairs. This is because the first tag announces what you want the browser to do, and the second tag closes what you just told it to do so it stops doing it. Well-formed HTML also doesn't mix letter case. In other words, don't start your code with capital letters, then switch to lowercase letters. Pick a style and stick with it. I prefer lower case, so all of these lessons will have small letters. It's just a matter of preference mainly because I don't like to leave my Caps Lock on.

Your HTML page will ALWAYS start with the following code:

And it will always end with the following:

The 'html' at the beginning tells the browser that this is an HTML document.

The 'head' area is reserved for code that won't get displayed on the page.

The 'title' is what gets displayed in the bar at the top of your browser, so you want it to mean something to your company. For purposes of training, we'll create a fake company that makes soap…I don't know, I just wanted to keep this clean.

The 'body' is where you put all of your content.

All of the other tags close the document (remember: well-formed HTML code comes in pairs). Making a closed tag, as you can clearly see, just means adding a slash right after the first bracket. You'll also notice there are some spaces between my lines of code. This is for ease of reading, especially if I find later that I made a mistake, it'll be easier to search for if everything's not crowded together.

So let's write our first page. Open your text editor of choice and type in the following:

Now save this file as "index.html." Be sure to save it some place you can access it from later!

Another piece of tech stuff here: all of the content on the World Wide Web is sent to us (or "served" to us) via a Web server. Servers can be expensive, and becoming your own host can run into the thousands of dollars. I'm assuming you don't want that, so we won't discuss how to set up a Web server here. Later, we'll talk about finding a host who can provide a server for you. For now, we can view all of the code we do on our personal computer by telling the browser we want to open a file instead of typing in a URL.

To view what you just did, open your browser and do the following:

1. Click on the word "File" in the menu bar.
2. Select "Open…" from the list of choices.
3. Click the "Browse" button to access files on your computer.
4. Find the file you just created called index.html.
5. Open it.

You should see this:

Let's review what we just did. The h1 tag tells the browser to display the text larger than normal, in this case the name of the company. The p tags are used every time you want to display a new paragraph.

That's it! You just wrote your first HTML. Give yourself a hand!

Next lesson will cover organizing your site, navigation, and more code. Feel free to visit the discussion area to have any questions/concerns answered. If I don't know the answer, I'll sure find it for ya! Until then, have a safe and sane week!

  1  2  3