HTML Lesson 2

Creating a Page using NoteTab

Let's use NoteTab to create a completely new page (document). With NoteTab running:

  1. At the bottom click on the HTML tab, so the HTML library is active.
  2. A list of macros should appear on the left. Double click on the New Web page macro (NoteTab calls these macros "Clips".)
  3. In the first form which appears, fill in "Lesson 2" for the title. Don't change any other fields, just click on OK.
  4. In the next form, don't do anything, just click on OK.

You should get a page that looks like:

<HTML>
<HEAD>
  <TITLE>Lesson 2</TITLE>
  <LINK REV="made" HREF="mailto:">
  <META NAME="generator" CONTENT="NoteTab Pro 4.86">
  <META NAME="author" CONTENT="Wren McMains">
  <META NAME="description" CONTENT="">
  <META NAME="keywords" CONTENT="">
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">

<H1>Lesson 2</H1>

<P>... Type content here!</P>

<HR>
<P><SMALL>Created on ... November 23, 2001</SMALL></P>
</BODY>
</HTML>

As every document should have, you'll see this one has both a HEAD and a BODY. The HEAD has a couple of new tags (LINK and META) which we'll ignore for now. The BODY tag has several "attributes" we haven't seen before and there are two new tags near the end (HR and SMALL).

The SMALL tag is one way to make text smaller, but the more general way to control text size is by using the FONT tag which we'll look at in another lesson.

The HR tag asks for a Horizontal Rule to be placed at that point. It's one of those exceptions to the rule which says all tags come in pairs. Another exception to this rule is the BR (break) tag which says break the text at this point and start a new line (like using SHIFT-Enter in Word.)

First let's save this page. Either use File/Save As, or the Save As button (disk with three dots), or since the file has not been named even the Save button will bring up the Save As dialog box. First create a top level folder under which you'll store all your work associated with the World Wide Web. Make it something like "C:\Web" or "C:\WWW". Then create a folder under this called something like "Lessons". You can do this all inside the "Save As" dialog box:

  1. Use the "Save In" pull down to find drive C on your computer.
  2. Then use the "Make Folder" button (folder with the six point star behind it) to create the top level WWW folder.
  3. Double click on the folder you just made. You're now in the empty folder
  4. Use the "Make Folder" button to create the "Lessons" folder.
  5. Double click on it, so you'll now store the file in that folder.
  6. Name your file something like "lesson02a.htm"

Now you've given the file a name, let's look and see what this new web page looks like, before we do anything else to it. You can do this from inside NoteTab by pressing on the "Examine Web Page" button at the top (it looks like the World under a magnifying glass. If the button doesn't work, go to the Internet tab under View / Options and specify the path to your primary browser.)

Now that we have our first page, let's put a picture with a caption on it:

  1. Using either ACDSee, your favorite graphics organizer, or if you have neither, Windows Explorer, copy some picture you want to put on the page into your new C:\WWW\Lessons folder (the picture shouldn't be any bigger the 640x480.)
  2. Go back to NoteTab and highlight the "... Type content here!" text so that when you type it will be overwritten.
  3. Instead of typing, double click on the "Image" clip (macro) -- it's down under "Image Elements" in the HTML library.
  4. Use the Browse Button (three dots) to specify your graphic
  5. Fill in a very short description and click OK.
  6. Press the "Save" button so we can view it.

Once you've saved the file, view it either by hitting the examine page button again, or if the previous version of your page is already displayed in your browser, just hit the "Reload" button in you browser. You notice that the NoteTab clip filled in a WIDTH and HEIGHT for the picture. They are very important because they allow the browser to display what follows without having loaded the picture. (When you see pages that stay blank for a long time while waiting for things to download, it's usually because they haven't specified all the image sizes.) You can also use the HEIGHT and WIDTH attributes to scale the picture -- try playing with them -- usually you want to change them proportionally so the picture doesn't stretch one way or the other.

Next let's add a caption:

  1. Put your NoteTab cursor at the beginning of a line just after the paragraph block with your image.
  2. Use the "Paragraph Block" clip (under Block Formatting) to create a new paragraph.
  3. Let's choose "center" for the alignment.
  4. Your cursor should be inside the block, just start typing the caption.
  5. If it's a long caption, use the BR tag to break it into short lines. (You can insert these either by just typing <BR> or with the "Line Break" clip.)
  6. Save it, View it.

You'll notice your caption is centered on the page, but your picture isn't. To fix this add the ALIGN="center" attribute to the paragraph block with the picture. (You could have also put the picture in the same block as the caption and used a couple of line breaks to create space between them, but I usually find a separate paragraph block works better.)

Assuming you have "Tidy" installed on your machine, run it. Use Tools / Tidy HTML Code (or the "Tidy HTML Code" clip under "Useful Commands". Always answer "Yes" to view errors. Correct any errors, close out the error window and run it again. Close the error window, and double check the result by viewing in your browser.

There are several reason for running Tidy:

  1. It reformats your HTML code into a nice consistent format.
  2. It identifies HTML coding errors.
  3. It automatically corrects many errors (some, like changing quotes and apostrophes into their special characters, without even bothering to say they are errors.)

If you don't have Tidy, get the "Tidy" add-on ZIP file. Unzip it into the directory where you installed NoteTab.

Before we finish, let's save the lessons we've had, locally on your machine, and add links to them on the page we've been working on:

  1. View one of the lessons in your browser.
  2. Choose "File/Save As" (being sure we are just saving the page as an HTML file, not a page with images, or some other choice you browser may give you.)
  3. If you're not already there, using your "Save As" dialog box navigate to your "C:\WWW\Lessons" directory.
  4. Assuming it has the name "lesson01.htm" or "lesson02.htm" already filled in, just click OK.
  5. Use the "Go to Lesson #" button at the bottom of the page displayed in your browser to go to the other lesson.
  6. Save it locally in the same folder on your machine.
  7. Now go back to your page with your picture in NoteTab.
  8. Put your cursor at the bottom before the /BODY tag.
  9. Add a Paragraph Block using the clip, and then with your cursor inside it ...
  10. Click on the "Hyperlink" clip under "Anchor Elements".
  11. In the dialog, for the URL fill in the name you of your local file, e.g. "lesson01.htm".
  12. For the link description fill in something like "Lesson 1".
  13. Click OK, Save, and view it to see how you make out.
  14. Notice what the coding for a hyperlink with description looks like. You see that the PATH to the linked file is enclosed in quotes. If the path is outside your own domain, you should provide a complete path like http://www.domain.com/.../file.htm. If the path is within your own domain, it should be a relative path like one of these: file2.htm, ../../news/file3.htm, or 2001/file4.htm. (Use just the file name if the file is in the same directory (folder), use "../file.htm" if the file is one level above the file linking to it, use something like "../../news/file3.htm" for a file two levels up and then back down one level in a directory named "news", use something like "2001/file4.htm" if the file is one level down in a folder named "2001".)
  15. Now add another link to the other lesson. (You can either put it inside it's own Paragraph Block, or separate them with a Line Break (BR tag) -- or try both and see the difference.)
  16. View the results in your browser.

You can use View Source (which you probably want configured to bring up NoteTab) to you look at the coding of these two lessons; you won't find much we haven't already covered. The only real additional things are more special characters, the lists (which use OL for ordered, i.e. numbered, lists and LI for individual list elements, and PRE for the pre-formatted text we used to display HTML code within an HTML page.)

If View Source brings up Notepad instead of NoteTab, go the NoteTab Help menu and choose "Replace MS Notepad ...".

When looking at the coding of this page notice that there are hyperlinks to both complete paths (starting http://) and relative paths within the Cherryfield.net website. The nice thing about relative paths is that you can keep a copy of a portion or all of a website locally on you hard-drive and all the links will work. Also note that the TARGET="V" attribute causes the page to be opened in a new window.

© Copyright 2001 by Wren McMains

Cherryfield.net Resources

Check out the Page we created

Go back to Lesson 1

Go on to Lesson 3

Back to the HTML Basics Index

Useful HTML reference sites: