How To Use NoteTab
Use This HTML Editor To Write Killer Web Pages!
First of all, download NoteTab. There is a free version (Lite) and two paid versions (Standard and Pro).
Get the Pro version!
It has many more features that is going to save you an enormous amount of time...
Lite - Bare bones version. You will be able to make web pages but you are missing out on a lot of time saving features.
Standard - Much better. You now have a clip bar, spell check, and thesaurus.
Pro - Awesome! In addition to the added features in the Standard version, you now have multi-level undo/redo, highlights URLs and HTML tags, line-number ruler, faster text processing speed, and more.
The bottom line is this: If you get the Lite version, you will want Standard. If you get the Standard version you will want Pro!
Quick Start Video
Watch this quick video I make to get an overview of the software. In the video, you will learn the basics of using NoteTab to write web pages.
Let's look at a screen shot:
I have marked in red the different features of the program. Here they are starting at the top:
File Menu - Here you will find all of the features within the program. Take some time to go through all of these to learn what all you can do with NoteTab.
Tool Bar - This is the standard toolbar. Click on these buttons to perform standard operations within the program. Some of these operations include:
- Open a new page
- Save a page
- Find text on a page
- Spell check a page (Standard and Pro version only)
- Preview your page
Clip Bar - This is another toolbar but it is only available in NoteTab Standard or Pro (you won't see it in the Lite version). You do not need this to write your pages but it is very handy. Here are some of the things you can do with this toolbar:
- Make words bold
- Make words in italics
- Add headings
- Add images
- Add lists (like this!)
You can also customize the buttons to perform any kind of HTML command that you want.
Your Pages - These are your pages. You can see that I have two pages that I can work on - "index.html" and "notetab.html" (this page!). See how the tab on "notetab.html" is raised. That is the current page in the workspace. Also, see how the disk icon is red? That means that this page has changes that need to be saved. I can save this page using the 
disk button on the standard toolbar. You can toggle back and forth between different pages.
Library - This is a collection of different html/css commands that are divided up into sections. The only one that you will need is the HTML Library. To toggle back and forth between the different libraries, use the drop down arrow. Also, the libraries can be customized. You can make your own library with just the features that you use!
Favorites - Just like the name implies, you can put all your favorite pages into this list for quick access.
Workspace - This is where you will type your pages. You do this just as would in Notepad or Word.
Library Buttons - These are buttons that you can use to quickly toggle back and forth between the different libraries. Since you only need the HTML library, you will rarely (if ever) use these buttons.
Those are just some of the features in notetab but...
How Do I Use It?
Go to File > New (or you can click on the first icon in the Toolbar). Immediately you will have a new page in the Workspace. You will also see that you have a new tab open (by Your Pages in the graphic above).
This new page will be named: NoName01.txt by default. This is text file. What you want is an html file. So, on the tab, right click and select: Save As... The save as box will pop up. Save your page as template.html
Make sure you save it in a place that you will remember and make sure to use the "html" file extension!
You are now ready to start your new page!
Using NoteTab Light
Make sure that you have selected "HTML" in the Library on the left side of your screen. See the graphic above to make sure that you are in the right library. Scroll down to where it says Quick Tags. This is a list of all the common HTML tags that you will use.
- p - start a new paragraph
- br - create a line break
- i - make it in italics
- b - make it bold
- c - center something
- a - make a link
- img - make an image
- co - add a comment
- td - table data
- tr - table row
- h1 - heading (biggest)
- h2 - heading
- h3 - heading
- h4 - heading (smallest)
In the Workspace type in the following:
I love NoteTab.
Now highlight this sentence by holding down your left mouse button and drag your mouse over the sentence. Once the sentence is highlighted double-click on the "b" tag. Whoa! Look at that. It automatically puts in the correct html tag for you (see graphic above)
Want to start a new paragraph? Just double-click on the "p" tag (don't highlight anything). The opening and closing tag is inserted into the Workspace with the cursor right in between the tags. Just start typing!
Now click on the 
Explorer icon in the Toolbar. Your browser will open up and you can see what your page is going to look like!
This works the same way with italics, center, etc. Just highlight the word, double-click the tag, and it will insert the correct code for you. No need to remember html tags and no more copying and pasting!
Using NoteTab Standard or Pro
This works the same way except now you have a Clip Bar. Instead of using the Quick Tags, you can just click on the icons to insert your HTML tags. You can also drag and drop an element from the Library to the Clip Bar to create a new button. You can also spell check your pages and use the thesaurus!
Start Your First Page
Ok, now that you know how to use NoteTab, it is time to write your first page.
Start with your template.html page and delete everything in the Workspace. Now double-click on the "h1" tag under the Quick Tags section. The tag is automatically inserted for you. Now type in the title of your page. Go to the next line. Now double click the "h2" tag. The tag is inserted for you. Type in the subtitle of your page here (optional). Now go to the next line and double-click the "p" tag to begin your first paragraph. Continue to do this until your entire page is created. When you are finished, click on the Explorer icon on the Toolbar to see how your page is going to look!
When you are satisfied with how you page looks, save it by going to File > Save As... Then name your new page as the actual name of this page.
For Site Build It! Users
Are you using SBI to build your website? (This is the company I use.)
When you get into SiteBuilder, fill in the options under the Page Information, Navigation Options, and Other Page Options. After you have finished with that, copy and paste everything from NoteTab directly into one text block. There is no need to put things into multiple text blocks. Just copy everything into one block!
Preview, Analyze, and Build
To insert an image into NoteTab you will need to upload your image into the Graphic Library first. After you do that, click on "Show Me". This will pull up your image. Right click and select "Properties". Copy (CTRL-C) the url for the image. Then follow the instructions below for inserting an image.
As always, if you need help, just contact me.
Tips and Tricks
Here some tips and tricks that you will need to know in order to build your pages.
Inserting An Image
Now click on "img" under Quick Tags. This will insert the html code into the Workspace. Now paste the image url in between the quotes. Make sure to add the correct description for the image between the quotes in the ALT portion.
An alternate way to do this is to click on Image under Image Elements in the HTML Library. This will pull up a box that will allow you to align it, put a border around it, etc.
Making A Table
There is a Table Wizard! Click on Table Wizard under Table Elements in the HTML Library.
Making A Link
To link to another page, click on HRef Link under Insert Tags in the HTML Library. A box will pop up. Fill in the required fields and click ok. Your link will be automatically inserted. You can also make an image link in this section under Img Link.
Adding A Horizontal Line
Under Block Formatting in the Library, click on Horizontal line. In the box that pops up, fill in the height, width, etc. It will automatically insert the tag for you.
How To Make A List
Want to add a list like this?
- First Item
- Second Item
- Third Item
Easy! Just click on Unordered List under List Elements in the HTML Library.
Check Your HTML!
You can download a little program called Tidy that will integrate into NoteTab. Then you can use it to check your html code for errors. Click a button and it will automatically fix all of your errors!
Note: Many of these html tags are already on the Clip Bar if you are using NoteTab Standard or Pro. If don't see them there, just drag and drop them onto it.
Once you start creating your pages in this manner you will see just how much easier and faster it is to build your pages!
One Final Note...
Don't just build a website.
Take your time and build a professional looking website loaded with good information for your visitors. Then you will be well on your way to creating a succesful website!
Still haven't dowloaded NoteTab? Get it here.
