Let's use NoteTab to create a completely new page (document). With NoteTab running:
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:
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:
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:
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:
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:
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
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: