Making a Web Page

So now we know some more facts about web pages:

  • each page begins and ends with <HTML and </HTML>
  • There are two parts to each web page: the HEAD and the BODY
  • The HEAD contains the TITLE which appears in the Title Bar
  • The BODY contains the web page information

And to review some previous basic points:

  • A web page is really just a text file with HTML commands
  • "Enter" and more than one "space" will not be visible
  • Most commands have beginning and ending tags
  • Most commands have attributes

Knowing these basic points, we can now move on an start making a web page.

Using WYSIWYG Editors

There are many HTML editors available which will make the HTML for you. When you use them, it is a bit more similar to PowerPoint--you just add the images, and the program creates the necessary HTML. The advantage of these is that they are simple to use. However, they create problems, too. HTML is not 100% mechanical; it often requires a human decision in order to make things work right. WYSIWYG editors will regularly make mistakes which you must correct by going into the HTML anyway. And if you rely on WYSIWYG editors, then you don't learn the HTML very well.

Using Text Editors

Although you can use simple programs like Notepad, there are many text editing programs designed especially for making web pages. Often, the benefit of these programs is that they will color-code your text, as seen below (using the Mac text editor "Smultron"), and they will help with indent formatting, showing you the structure of your code.

These text editors tend to be favored by web page designers because they allow for simple, direct editing of HTML code in a way that is easy to see. We will use text editors in this class because you must learn to craft the html by yourself, with only minimal help.

For the simplest text editor in Windows, just use "Notepad," located in the Start Menu, under Programs, in the "Accessories" folder.

For a color-coding text editor, use NotePad++ on Windows, or Smultron on the Mac.

For something a bit more powerful, use Aptana Studio (free download) on Windows and Mac. I will be using Aptana for this tutorial, mentioning its basic use and features.

Planning Your Page

It is always a good idea to plan what your web page will look like. Take a blank piece of paper and draw a sketch of what you want. As you draw, think about whether or not you know how to make that structure; don't plan a web page which is more complex than your skills will let you make.

Take notes. On the sketch, draw comments about tables, borders, sizes, images, and so forth.

Think ahead about colors--what color backgrounds and text will you use? If you use images, what colors will they be? Be careful to choose colors that go well with each other. Opposite colors like red and green clash terribly. You might want to choose a single color category. For example, a red color scheme could include pink, brown, beige, white, and black.

After you finish your plan, think about what images you will need and what HTML commands you might need to use.

The Three Steps

Remember, a web page is nothing more than a text file in a folder, on a computer connected to the Internet.

It is possible to have many folders, but for beginners, it is much more simple just to put everything inside one folder. You can practice with multiple folders later.

When you start to make a web site, you should ALWAYS begin by creating a new folder. The folder will contain all the web page and image files.

STEP ONE: Make a Folder

Go ahead and create a new folder. The folder can be located anywhere you want--on a computer hard drive, on a USB Flash Stick, or anywhere else that is convenient. You might want to use your USB Flash because you can take it anywhere (Don't forget to back up!). For this practice, give it the name "mywebpage" (all lower-case, no spaces).

IMPORTANT NAME RULES:

When you give names to files and folders for web pages, they must follow some basic rules:

  • they should be lowercase (uppercase will work, but it can cause problems)
  • they should have only letters, numbers, dashes ( - ) or underscores ( _ )
  • the names should NEVER have spaces or punctuation/symbols except for dash and underscore
  • web pages should always have a filename extension of .htm or .html
  • folders names do not have an extension

Please remember these rules! If you break them, you may have problems.

Getting Images Ready

Before you start making your web page, you should start preparing images, if possible. This is not 100% necessary, but it's a good idea.

Here's an important rule: Images must always be put into the web site folder BEFORE you insert them into a web page. Some people place the image in the web page code, and then later move the image to the web site folder. That is wrong, and will usually end up with a broken page.

STEP TWO: Prepare Images, Put in Folder Before Using in Page

If there are images which you plan to use, then put them in the web site folder as soon as possible. Definitely put them in the site folder before you use them in the web page itself.

This will be further explained below.

Making Pages with Your Text Editor

When you start a new page in an editor, the first thing you should do is save the blank page.

STEP THREE: Open Your Editor and Save the Blank Page

You can usually do this by going to the "File" menu and choosing "Save" or "Save As..."


Why Save the Blank Page?

Why is this necessary? Short answer: images and links won't work before you save the page. It has to do with how web pages find associated files.

In other programs, like Microsoft Word, when you put an image or other media file into the document, it is often saved within that file. You could throw away the original image files you used, and the Word file would still have copies inside the document.

Web pages are not like that. The web page (.html) file is ONLY text--no images or other files are "inside" the document.

All images and other media files are linked.

What does "linked" mean? It means that the image file is separate, and when a web page needs an image, it tells the browser to go and get the image from a set location. But in order to do this, both the web page and the image need to be in decided, fixed locations relative to each other. Once the page is made, you can't go moving it to another folder and leave the images behind. They all must travel together. For example, look at this HTML command for an image:

<img src="myphoto.jpg">

In the command above, it says for the browser to find an image titled "myphoto.jpg". If no other location is specified, then the browser will look in the same folder as the web page. If the image is moved out of the folder, then the browser will not find it. Similarly, if the web page is moved to a different folder and the image stays behind, they will again be separated, and the browser will not find the image.

This is why you must begin by saving the blank web page: it establishes the location of the web page. Once the web page location is established, then you can insert images and link to other (existing) pages. Until you save the page, those images and links will not work.

So Far...

Once you have finished these three steps:

  1. Create a folder for the web site
  2. Save images in the folder before using them
  3. Open your web page editor and save the blank page

Then you can start making the page itself.

We will get to these details on the next page.

Now You Know

Now you know how to get started making a web page. You are ready to start making more complex web pages.