My First Web Page

Open NoteTab Light if necessary. Click the button () to create a new document. That's the button just under File on the main menu. If the HTML library is not featured in the panel on the left side of the workspace, click the HTML tab below the document window. Now we're ready to go to work.

Now in the HTML panel double-click New Web page under HTML Template at the top of the panel.

First Dialog This is the dialog box that pops up.

Fill in the blanks as follows.

Web page title: My First Web page or some other descriptive title. This title is important to identify your page on the Web.

Web page description: You may leave this blank for this project.

Web page key words: Type some descriptive terms like these: HTML, 'html tutor', 'using NoteTab Light';

Fill in your name and e-mail address. NoteTab Light will remember them next time. Click OK.

The following code magically appears in our newly created empty document!

<HTML>   (This tells the browser to interrpret HTML code.)
<HEAD>   (This starts the head section of instructions.)
  <TITLE>My First Web page</TITLE>    (The document title)
  <LINK REV="made" HREF="mailto:pat@tylersterritory.com">
         (E-mail address of author. This is not required.)
  <META NAME="generator" CONTENT="NoteTab Light 5.8">
         (Identity of the code generator.)
  <META NAME="author" CONTENT="Pat Tyler">
         (Author of the Web page.)
  <META NAME="description" CONTENT="">
         (We left this blank, but this is useful to search engines.)
  <META NAME="keywords" CONTENT="html, 'html tutor', 'using NoteTab
 Light'">
         (This is the keywords section used by search engines.)
</HEAD>  (This ends the head section.)

The next dialog that pops up appears below on the right.

Second Dialog

This dialog came filled with default colors.

I changed the Visited Link Color: from the default purple to silver.

If you had a background image you wanted to use, you would put the images' url in the box at the bottom.

Click OK.

The code that results from this dialog appears below:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
 VLINK="#C0C0C0" ALINK="#FF0000">
     (This starts the body section that displays the page.)
	 (bgcolor: Background color, #ffffff = white)
	 (text: #000000 = black, link = #0000ff = blue)
	 (vlink: visited link = #c0c0c0 = silver)
	 (alink: active link = #ff0000 = red)
<H1>My First Web page</H1>
         (<H1> This is a text header 1 — the largest.)
<P>... Type content here!</P>
         (<p> These are beginning & ending paragraph tags.</P>)
<HR>     (This is the tag for a horizontal rule.) 
<P><SMALL>Created on ... March 29, 2009</SMALL></P>
         (This is a paragraph with smaller than default text.)
</BODY>  (This tag ends the body and display section of the page.)
</HTML>  (This ends the HTML code and the page.)

Now that you've seen the basics. Your are ready to save your new page. On the main menu, select File -> Save As ... In the Save As dialog click the Create New Folder button Type a descriptive name such as MySite in the New Folder box. Double-click the new folder you just named to open it. At the bottom of the Save As Dialog open the box next to Save as type: by clicking the down arrow on the right. Select the line that begins HTML files (*.html, ... Then select the page001.htm in the File name: box and type the name of your new Web page file, such as MyFirstPage.html, or you can leave the default name created by NoteTab Light. Click Save.

Let's look at the page that was created by one double-click and filling in a few text boxes. Navigate with Windows Explorer (My Computer) to your new folder, double-click on the name to open it. Double-click on the name of your new file. That should open your default Web browser with your page loaded. It should look similar to the image below with the page displayed in the Opera browser.

You now have a basic idea of a little of what it takes to create a Web page. I recommend that you now switch over to Joe Barta's Page Tutor.com. He does an excellent job of explaining the basics.