Creating a Web Site

Okay, you have learned the basics of HTML. You are now ready to start making actual web pages in a web site.


First, do you remember what a web site is? If you recall, a web site is simply a folder on a computer.

Step Number 1 for creating a web site is to make a new folder on your computer.

The folder should have a name which follows the filename rules we have learned. You may recall that in the chapter on placing images in web sites, we learned several rules about filenames:

  • Filenames must be alphanumeric: use a, b, c… and 1, 2, 3…
  • Filenames must be lower-case: DON'T USE UPPER-CASE ANYWHERE IN A FILENAME
  • Never use a space in a filename: If you need to imitate a space, use an under_score or-hypen
  • Never use symbols in a filename: Symbols like &, %, or # are reserved for other uses
  • Never use punctuation in a filename: Aside from the period before the filename extension, don't use punctuation, like ?, :, /, or !.

Now would be a good time to make sure that your computer is not hiding filename extensions. Go to the chapter on Filename extensions in the Operating System unit, and it will tell you how to make the filename extnsions visible.


So, you have created your folder. That's your web site. Next, you need to add files. You will save your ".html" files in that folder as you create them, but you may wish to save your images in the folder before anything else.

Step Number 2 for creating a web site is to find whatever images you plan to use and save them in the folder. When you do so, make sure their filenames are OK, and make sure you don't have any images over 100 KB (that's my rule for this class, not the rule for the Internet). Make sure the photos are JPG, GIF, or PNG files. Do not create extra folders inside the folder.

You don't have to find every photo you will ever use right now--of course, you can add more images later, as you go along. It is simply a good idea to prepare what you know you will use. Don't forget things like background images.

If the photos are too big (in pixels or kilobytes), or if they are the wrong file type, then use a photo editing program to change them. With a program like PhotoFiltre, you can crop the image, resize it, and save it in almost any format. You can even do JPG compression, lowering the quality a little bit to save a lot of KB file space. It does not have to be the program I just mentioned--that simply happens to be one that is fairly well-rated. (Note: I cannot guarantee any program to be 100% safe, so research the software before you install it, and make sure you are running security software.)


Next, you will want to create your main page for the web site. Open the web page editor you want to use (for example, Notepad (for Windows, in your Accessories folder in your "All Programs" menu) or TextEdit (for the Mac, in your Applications folder--be sure to do a Command-T keyboard shortcut to switch to plain text). Or you could download and install Notepad++ for Windows, or Fraise for the Mac.

Step Number 3 for creating a web site is to begin to create the main page using a web page editor. (See the chapter on these programs for more information.)

After you open the editor, create the basic structure of the site, using the <html> tags, then the <head>/<title> and <body> tags. Set page-wide styles with the attributes for the <body> tag.


This would be a good time to save the file. The main page of the web site must be named "index.html" and should be saved in the folder you created. Make sure it is all lowercase. When creating more web pages, you can give them any names you desire, so long as they follow the filename rules listed above.


Then simply start adding content. Use the <h1> ~ <h6> tags for titles (unless you want better control using the <font> tag, or even CSS, explained in the next chapter), and control other text styles with the <b>, <strong>, <i>, <em>, <big>, and <small> tags.

Use the the <img> tag for images, and the <a>tag for links. Use tables for creating tables of information, or even use tables to create page layouts. Create lists with the <ul> or <ol>, and the <li> tags. Use <blockquote> and <hr> for further effects.

As you add new parts, save the page. Open a browser, and view the web page in the browser to make sure everything apppears as you wish.

The first several times you create web pages, you will probably want to save-and-check in a browser whenever you add any new HTML command, so you can make sure you did it correctly.

If there is an error, you must look carefully at the command you typed. Did you forget quotes? Are they all double-quotes? Did you use both left- and right-angled brackets? Did you use ending commands as necessary? Did you spell everything correctly?

Learn to debug your web page code as you go.

When you are finished, save everything, and check it one last time.


Welcome to the world of web designing!



Video Review