Create a Site with HTML


Getting Started Create a Free Website

Your biggest enemy in accomplishing any task in life is a lack of perseverance. Many will run into problems the first time through this tutorial and quit. Don't Quit! Just delete your work and start again.

For many, the brain has been paralyzed by the constant exposure to TV and video and the ability to learn must be rekindled. Perseverance is the key.

What is HTML?

Creating web pages and linking them together to create a website is actually a very simple process using HTML. ( Hyper Text Markup Language )

HTML has been around for many many years. It has been improved and attempts have been made to create standards that will make your web pages appear the same in all browsers, using one set of code. Unfortunately, that has never happened and probably never will. The standards are there, browser developers just don't follow them.

So, be sure, that you develop the habit of looking at your web pages with more than one browser before you Publish them on the internet.


Mozilla (FireFox) and Internet Explorer are the two most widely used by web surfers.

PC or Mac

You can develop websites using HTML on your PC or Mac. The principles are the same for both platforms.

Before You Start

I highly recommend that you complete this tutorial using a simple text editor like NotePad on Windows or whatever you use on a Mac.

The code that we will be using is much simpler than what an HTML editor will generate and we'll be learning the art of styling web pages with style sheets as we progress.

If you try to start out using an HTML editor, then you're complicating the learning process by trying to learn to do two things at once. It is often harder to learn to use a new tool than it is to learn the code itself.

We will be purposely creating code void of any attributes. We will be setting the attributes with style sheets.

Learn to write code by hand. Then after you are familiar with the basics of HTML code, you can simplify the process by using an HTML editor that will actually write some of the code for you.

An Example:
This would be a typical line of code for a table tag produced by an HTML editor:
<table width="100%" cellpadding="5" cellspacing="0" border="0">

Our code will look like this:
<table>

Which do you think will be easier for you to learn?

Storage

This is the greatest area of confusion for first time web authors. Take some time to familiarize yourself with the folders on the C: drive of your computer. If you don't know how to do this, you should study the help files on your system that show you how.

Don't just dump all of your web pages and pictures on your C:\ drive or in your My Documents folder (Windows Users ). Create a special folder and name it htdocs. Inside of the htdocs folder, create another folder and name it images.

Click to EnlargeIf you've downloaded this tutorial, there is an htdocs folder included in the set up.

It contains an images folder with all of the pics you'll need for this tutor.

When you save your HTML pages save them in your htdocs folder.

This is where you should save firstpage.html. (The first web page you will create using this tutorial. )

If you don't save your web pages here, be sure to create an images folder, within the folder where you save your page and transfer the images shown below into that images folder.


Place all of the pictures that you want to appear on your web pages in the htdocs/images folder.


Tutor Images

For those working online, I've also placed the images that you'll use to complete this tutorial in a zip file. Download, extract and place all of the images in your htdocs/images folder. If you don't know how to unzip and extract files, you can copy the images from the download page. Image Download Page

Note: If you are going to use mp3 files or podcast files, etc, create separate folders inside of your htdocs folder for these files and name the folders accordingly. This will help you to keep your website organized. There is nothing more unmanageable than a hundred page website where everything is stored in one folder.

How to Copy and Paste

You would probably learn faster if you typed the code clips from the tutorial into Notepad. For most of us that would create confusion because we're just not typists and most of our time would be spent finding our errors. That's why we'll start out copying and pasting until we begin to see the basic structure of HTML tag code.

To copy and paste code from the tutor into Notepad:
Hold down the left mouse button and run the cursor over the code to highlite the clip or code block.
Right click on the highlited text.
Click Copy
Open Notepad and set the cursor at the desired location by clicking the left mouse button.
Right Click and Click Paste.
Save the changes in Notepad.
Note: The first time you save your HTML page, use the Save As function and save the page with a .html extension. After that you can save the page by clicking Save. You won't have to use the Save As function every time you save changes.

Things You'll Need

In addition to a text editor and eventually an HTML editor there are a couple of other tools that will help you to become a master web author.

Graphics Software
You may not want custom headings, buttons and backgrounds for your web pages, but you need some kind of graphics software that you can use to resize and optimize the pictures on your website.

One of the biggest mistakes novice web page authors make is taking a picture straight out of their digital camera and putting it on a page. Some of these pictures can be 5 megabits in size and cover the entire computer screen.

You need to resize your pictures so that they fit into the framework of your web pages.

If you don't have a good graphics software package you can use Paint on Windows. Most printers come with some kind of photo editing software.

Tips on Using This Tutor

If you are new at manipulating different programs on you PC:

  1. After saving a change to a document, don't close it, just minimize.
  2. Once you open your web page in the browser, don't close the browser, just minimize.
  3. To see changes in the browser after saving a change to the web page or style sheet, right click on the page in the browser and click Refresh or Reload.
  4. If you have a large monitor, split the screen and place the tutor on the left and NotePad on the right.
  5. Toggle between applications using the buttons on the bottom of your desktop
  6. If think you missed a step in the coding process, you can check the fnished code Here
  7. After you complete Phase I of the tutorial, delete your work and start over. Complete the tutorial as many times as it takes for ' the light to come on.' You'll say, "Oh , Now I see it!!!!!!!!"
  8. About your third time through, try typing the code instead of copying and pasting.

Setting Up

If you have a large monitor, split the screen placing the tutorial on the left and NotePad on the right. Use the buttons on the bottom of the Desktop to toggle between applications.

This is an image of what the bottom of your desktop will look like when you have two sessions of Notepad, your browser showing your web page and your browser running the tutor.


To minimize NotePad or browser, look in the upper right corner of the application. Click the dash.

If you've located your text editor and created your folders and downloaded your images , you're ready to write some code. Our website maker tutorial will allow you to create your own website in no time.

Take a short quiz on the information you just learned.

Go to Basic HTML Page