Create/Edit HTML Page

Note: In VisualPage, to follow links to other parts of this web page, hold down the Ctrl key and click your mouse (Ctrl-Click). To follow links to the Internet, click on the Open-in-Viewer icon first.

Create a new HTML Page

Edit an existing HTML Page

List of Shortcuts

1. In the File menu, select New. A new, untitled web page opens in Edit mode.
2. Add graphics, text, and links directly to your new web page.
3. Save your web page in a folder dedicated to your collection of web pages.

• Page Title: Text displayed in the title bar of the web page browser when the finished web page is viewed.
• Normal text: Default text color for the entire web page.
• Normal links: Color used to indicate linked text.
• Active links: Color that you see immediately after clicking on linked text.
• Visited links: Text changes to this color to indicate that you have previously visited a link.
• URL settings: Let's don't worry about a base URL and base target right now.
• Background image: Image to be used as a background in the web page. To help you pick a background (or bullets, icons, etc.), try the Free Graphics Store.
• Background Color: Color to be displayed under the objects on your web page. To help you pick a color, try visiting HYPE's Color Specifier. Once you've chosen your color and wrote down the three numbers just to the right of the color, click on the Page Properties icon. Then choose Background Color > Custom. Your window should look like this:

Now here is where you are going to use those three numbers you wrote down. Locate the boxes on the far right-hand side of the above image that says "Red", "Green" and "Blue". Great! Now take the first number you wrote down and enter it into the red slot, the second number goes into the green slot and the third number goes into the blue slot. Once you done this, your custom color should appear. Click OK...twice. Voila! The background color to your web page should now reflect your new custom color!

You can choose the Edit Source option...for advanced users. See below. A separate window will be created when choosing this option.

When you are in the Preview Page mode, you can edit the web page as well. When you choose the "View in Browser" option, you can not edit the page.

In this lesson, we will concentrate on adding/editing text. Tables, graphics and links are discussed in future lessons.

There are many font selections, sizes and colors. Experiment with the choices, keeping in mind that readability is the main goal. Do not detract the reader with cute fonts and colors. It's tempting but our main goal is to provide data, not flashy style.

Exercise:

Change this text to Times New Roman, 12 point, black color and bold.

It should look like this:

Change this text to Times New Roman, 12 point, black color and bold.

Before you begin typing, please think about how you would like to arrange your data. Should you use an occasional horizontal line to separate sections, a table, a simple indented list or a bullet-style list? Since tables are discussed in Lesson 5, let's see how we should create an indented list. One way would be to type your list and then select the complete list by dragging your mouse over the entire text. Click on the Increase Indent tab. By clicking on this option, you have generated a <BLOCKQUOTE> command in your source code. We strongly recommend that every time you choose a different option, look at the source code to see what kind of HTML command it generates.

If you would like to create a bullet-style or numbered list, click on Paragraph and select List.

If you would like to separate sections of your web page with horizontal lines, click on Insert and select Horizontal line. If you right-click on the line, you can modify its properties. In order to create a colored line, you have to go into the source code and change the code from <HR ALIGN="CENTER"> to <HR ALIGN="CENTER" COLOR="#NNNNNN">, #NNNNNN being the hex color code of your choosing.

Tip: If you would like to insert text from a Word document, you must strip the text of its attributes that were created by Word. You can accomplish this by selecting and copying the text and pasting it into a new document in Notepad or WordPad. Now you can copy this "clean" text from WordPad and insert it into your web page. At this point, you will have to change the font attributes of the text back to the way you want it.

After you have finished entering your text, we strongly recommend using Spell Check (F7) to verify your spelling.

Now you're ready to view your beautifully constructed web page using the Open-in-Viewer option.

Select Open from the File menu (or press Control-O).

Navigate to the directory where the file you want to work on is located.

Select the file, and click Open. The web page opens in Edit mode.

You are now ready to edit your file. Please follow the suggestions listed in Step 2 of the "Create a New HTML Page" section.

Back to top

Back to top

Congratulations! You now know how to create and edit a HTML page.

On to the next lesson!

Back to Main Lesson Page

Copyright © 2005-2010 Janine Crandell
All rights reserved
Illinois Trails