This tutorial will teach you how to write your own web pages by using HTML. You do not need any special what-you-see-is-what-you-get HTML editor to use this guide, any old text editor will do just fine.
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 is platform independent, meaning it can be written and viewed on any type of computer (Windows, Mac, UNIX/Linux, whatever!)
Because HTML is platform independent, you'll need to save your HTML files in standard text format, sometimes known as ASCII. The easiest way to do this is use a program like notepad.exe in Windows, pico in Linux, and the like.
If you'd prefer to use a word processor like Word or WordPerfect to write your HTML code, you can do so, but you need to save your files as "Text" or "Text Only." 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.
Getting on the Web (Finding a Host)
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. Most hosts are only down for a few minutes each month, if at all.
If you're making a personal web site, you can choose to get a web site from your Internet Service Provider (ISP), free space at a free host or go straight to the big leagues with a domain host. (My personal site is on a domain host: http://www.davekristula.com/ )
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, usually to about 20 MB.
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.
Domain hosts on the other hand:
Often give you thousands of GB of web space for your HTML files, graphics, and multimedia.
Do not shut off your account based on number visitors.
Plenty of e-mail addresses customized for your domain with generous storage.
High-speed lines to ensure your site loads faster, and dedicated support for any help you need.
Place no ads on your site. (You can add them yourself if you want to make money).
Learn about Globat Hosting -- my top recommended hosting package for new designers.
So if you're making a personal web site you want to look professional, or you're making a business web site or a web site for an organization (church, etc) you'll want to get a domain host. A domain name ends in a .com, .org, or .net. (For example, davesite.com is a domain name.) Prices for domain hosts usually range from $5 a month to $10 a month. Let me say it again, domain hosts do not show ads, unless you put them up yourself to earn money. The next chapter contains information on domain hosts.
Once you sign up for a host, you'll get a username and password to log in and edit your site. On free hosts, your username is also your directory, so choose wisely. For domains, your username is not as important.
Not ready for a domain yet? Find a free host (remember, there are huge limitations and I do not suggest it).
index.html, the most important HTML file
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.
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:
The Two Copy Rule
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:
You need a backup (this is the obvious one).
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...
You'll edit all three of these from a folder in your hard drive, and once you're down, you'll upload them (Covered in Chapter 10) to your web host. Then the whole world will see them!
Tip: You can view your files on your hard drive before you upload them.
Open your web browser.
Choose File -> Open... File, (Browse).
Find the folder with your HTML files.
Double-click the one you're working on, and presto! It's in your web browser.
The Most Common Mistake
The most common mistake for new designers is the urge to put the c:\ in links and images (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.
loads an image into a web page. If you have a file called taco.jpg, use the code to load it, not
In the next chapter there is a 2-minute guide on domains, and after that you get to learn how to code HTML!