This tutorial will teach you how to write your own web pages by using HTML. You don't need any expensive HTML editor to use this guide... any text editor will do just fine! You probably have one that free came with your computer.

This tutorial gives you practice space to test your HTML skills as you learn them in your web browser without needing to save any files on your computer. That said, we'll still explain the techniques used by pros to edit the files themselves.

In other words, with this course, you can learn HTML and practice typing it from this site without leaving your web browser!

Test it out! Don't worry about the codes, we'll explain those as you learn. For example, h1 makes text very big for a heading, and we can center it. (You don't need to remember that right now, we're going to cover it during the course of the tutorial!)

Click "Check It Out!" to see it in action. You can even change the words in between the h1 tags to see how the rest of this tutorial will work. It's fun!

So, click Check It Out! to see what the HTML code does, then hit "BACK" in your web browser, change the words. Then click Check it Out! again. This is how we'll learn HTML. But we need to cover several basics first. It may seem like a lot of information to get started, but there are some things you just need to know.

So, here starts the boring, technical information, that you'll need to know in the long run... luckily, the remainder of learning HTML (after this page) is really fun!

By learning HTML, you will have much more control over how your web pages look, and you'll more easily discover ways to make your web pages look even better.

HTML can be created on virtually any type of computer. Windows, Mac, Linux... all of these computers can create HTML files.

HTML files use a standard text format. This means you can write it on a Windows computer, and a Mac computer can load it just fine, or write it on a Mac, and it'll load on a Windows computer just fine. (In fact, it'll work on Linux computers, and even other types of computers, no matter what type of computer created the file.)

In Windows, an easy way to edit HTML is to use Notepad. On Mac OS X, you can use TextEdit. On Linux, you have a wide variety of choices (although I generally use pico).

If you'd prefer to use a word processor like Word to write your HTML code, you can do so, but you need to save your files as "Text" or "Text Only" instead of "DOC" or "DOCX."

You'll see this option in a drop down box in your "Save As..." screen.

If you use a word processor and forget to save it as Text format, you'll see only garbled data when you try to view your page with a web browser.

You'll need to find a web host for your site unless you run your own web server 24/7. (Running your own server is very expensive, complicated, and not recommended).

By choosing a web host, your site will be available to the world all day every day.

If you're making a personal web site, you can choose to get a web site from your Internet Service Provider (ISP), get a limited amount of restricted space at a free host, or you can go straight to the big leagues with a domain host.

(My personal site is on a domain host: http://www.davekristula.com/ )

If you're making a site for a business or professional organization, you're going to need to get a domain name to look professional.

A host typically costs around $10 a month and is well worth the investment.

There are several disadvantages of free hosts:

• Free hosts show banner ads or pop-up windows (or both) to pay for your service (so it's not really free).
• There is no way to turn off the ads on a free service.
• Free hosts limit the amount of web space you get, so you probably won't get enough for a full-size site.
• Free hosts also limit the number of visitors you can receive in a month.
• If you exceed their "limit" your site will be "turned off" until the next month.

• Often give you unlimited disk space for your HTML files, graphics, and multimedia (videos, sounds, Flash files, etc).
• Do not shut off your account based on the number visitors you get.
• Give you plenty of e-mail addresses customized for your domain with generous storage for every account.
• Have high-speed Internet lines to ensure your site loads faster, and dedicated support for any questions you may have.
• Do not place ads on your site. (You can add them yourself if you want to make money).

I have reviewed several excellent web hosts in the next chapter, "Finding a Place to Put your Finished Web Page on the Web"

My favorite host is Globat Web Hosting.

When you hit davesite.com, and your browser reads http://www.davesite.com/, what file is loading? On almost all web servers, this file is index.html. When the web server sees / and no filename, it automatically looks for index.html.

Imagine a situation where you are making a web site of three HTML pages, the opening page (index.html), an about me page (aboutme.html) and a links page (links.html).

If you're on your own domain, the files would look like this once you upload them on your server.

• http://www.kristula.com/index.html
• http://www.kristula.com/aboutme.html
• http://www.kristula.com/links.html

The first page, http://www.kristula.com/index.html, can also be loaded by just typing http://www.kristula.com/

The same is true of folders (directories). If I made one called /dave/, I could put a new index.html in it, and it could be accessed two ways:

• http://www.kristula.com/dave/index.html
• http://www.kristula.com/dave/

When you write your web site, you'll need two copies:

• One on your web host
• One on your hard drive

There are two reasons:

1. You need a backup (this is the obvious one).
2. When you're working on your site, you don't work on it live! Imagine how silly it would look if a page changed every two minutes while you worked on it!

When you work on the copy of your HTML pages on your hard disk, it's called "editing the local copy." The copy on the web host is called the "remote copy." (Kind of like a remote control, controls something far away!)

Take our previous example with three files...

• index.html
• aboutme.html
• links.html

You'll edit all three of these from a folder in your hard drive, and once you've finished editing them, you'll upload them to your web host. Then the whole world will see them! (Web site uploading is covered in Chapter 10.)

Tip: You can view your files on your hard drive before you upload them.

1. Open your web browser.
2. Choose File -> Open... File, (Browse).
3. Find the folder with your HTML files.
4. Double-click the one you're working on, and presto! It's in your web browser.

The most common mistake for new designers is the urge to put the c:\ in links and images (These two topics are covered in Chapter 4.). When you're on the web, there is no c:\ to the rest of the world. When you start out, keep all your HTML files and images in one folder, and don't use c:\ at all.

Quick example:

<img> loads an image into a web page. If you have a file called taco.jpg, use the code <img src="taco.jpg"> to load it, not <img src="c:\My Documents\website\taco.jpg">

If you use c:\ in your HTML files you will just get errors!

Next, we'll have a quick overview of where we'll put our finished HTML web pages so others can access it online.