Building A Web Page Using NoteTab Pro

Updated on 01-Sep-2005

If you are trying to learn HTML, or are new to building Web pages, we have just the thing for you! In fact, even if you find HTML easy enough to do it in your sleep, you should still go through this workshop-the software we’re talking about here will let you update your pages so quickly that you’ll need to work while you’re awake as well!

The options this software offers are so many, a full book could be dedicated to it. Here, we’ll walk you through some of the features and leave you to explore and play with the software yourself.

What you need
The software you need is called NoteTab Pro. It can be downloaded from
www.notetab.com. You can try it free for 30 days, after which it costs $19.95 (Rs 870).

Step 1. Easy Interface
Once you start the software, you will be presented with an interface that looks like a cross between Microsoft Word, Opera and Explorer. You have formatting buttons on the top, the various options (such as HTML, CSS etc.) at the bottom, and what’s more, you can open multiple files in different tabs just like Firefox-the best of all worlds!

NoteTab’s default Screen

Step 2. Writing The Code
To create HTML, select ‘HTML’ from the drop-down menu on the left, or from one of the tabs at the bottom. The options and commands in the left pane will change accordingly.

Set the text and link properties using this window

To start creating a Web page, click on ‘New Web Page’ on the left, and you’ll be presented with a template wizard that will let you select the basic properties of the page-such as the title, description, keywords, etc. Once you’re done with that, you will be presented with another window that will allow you to set things such as the background colour, text colour, link colours and more. You can even include a background image.

Step 3. Creating Content
On closing the window, you return to the code screen where a part of the code is highlighted as “Type Content Here”. In that area, you can put whatever you want to appear on the page, and it will conform to the formatting done in the previous windows.

Type the page content in the highlighted area

There is even a spell-checker coupled with a dictionary to ensure you don’t have any misspelled words going out to the world!

Step 4. Other Options
If all you want is a basic Web page, you are all set, since your page is already set up. You can view it in a browser by pressing [F8].

You may, however, want to include tables, image place holders, anchors, etc. For all these, you simply need to click on the left pane, and a wizard will open. This will guide you through the process as before.

The wizards are pretty exhaustive, and very rarely will you require any further tweaking.

Step 5. CSS
As your skills develop, you’ll realise it is downright silly to give every image or text line individual formatting, especially if most of them have to be similarly formatted. The rescuer here would be CSS (Cascading Style Sheets).

Create your style sheet using the wizard in the left pane

These are basically sheets that have ‘classes’, where each class represents a specific kind of formatting-for example, font type, font size, font colour, link colour, etc.-and all you need to do is include the style sheet referrer in the HTML page and use the classes before text. This, you will realise, will cut down your page size by at least half if not more!

You can have two kinds of style sheets-embedded and external.

The external style sheet is something you will create as a separate file and then link it to your Web page. An embedded style sheet is, as the name goes, embedded in the Web page, and this software will let you create one with a wizard as usual. It’s highly effective and accurate; however, you do need to have some degree of coding knowledge for this.

Simply click on the CSS tab at the bottom, and then on the left pane, click on ‘New Webpage’, and then on ‘Embedded Style’.

If you already have a page open, simply click on CSS, and then on ‘Embedded style’ to add it to your page. To add various properties, simply click on them on the left and then follow the wizard yet again-and you’ll be done in no time flat.

Step 6. Uploading Your Web pages
Once you’re finished with the various settings, text and the style sheet implementations, it’s time to upload your page for the world to see it. NoteTab Pro will let you upload the file from within the program. You simply need to configure the FTP settings.

Click the ‘FTP’ tab at the bottom, and then on ‘Server Setup’.

Again, you will be presented with a window asking you for the various settings for your server. Enter these settings and you’re on your way to uploading your Web pages-but this is where we hit upon a snag in the software.

You upload using the inbuilt FTP program, you need to enter the file name manually

Note that you’re provided with the server settings when you sign up for Web space, or if you are hosting it on a free server such as Geocities, the settings would probably be in the confirmatory email they send you. In its free avatar, Geocities does not support FTP.

When we clicked on ‘Upload’, we were presented with a wizard as before, but at the bottom where we were supposed to enter the files to be uploaded, we just got a blank text box expecting us to type in each file name! This is a serious shortcoming in an otherwise brilliant piece of software. Apart from the glitch in the FTP aspect, this software will let you do almost all kinds of HTML coding including CSS, and is an extremely powerful tool even if you swear by Dreamweaver.

NoteTab Pro is lightning fast, and produces excellent results with just a few clicks. If you want to learn while you make Web pages, this is the software that will let you do it! Of course, there are tons of other features-find them for yourselves right away!

Step 7. Adding Images
Adding images takes a single click, which gets you to the now familiar options menu where you can specify the alignment, borders, spacing as well as an alternate text.

 

Step 8. Frames
Although we do not recommend the use of frames in your Web site, due to compatibility issues across browsers. However, if you choose to use frames, this software will help you tremendously. You can create frames at the click of a button, and the options available are amazing. You can create an iFrame (a frame containing dynamic content) or even specify what the browser should display when it does not support frames.

Create Frames using NoteTab Pro

Step 9. Creating Forms
If you would like to get feedback or conduct a survey, the best solution is to use a form.

This software excels in this regard, and the drop down menus take away the need for coding knowledge-just pick and choose whatever is required.

You can configure the Input type, the default text in the box as well as the name of the box (very important in form submission) It will also let you change the input type from a box to a radio button, or even a check box! All with a couple of clicks,

Embedding images into a web page was never so easy

Step 10. HTML Cleanup
What’s more, if you mess up with the code, the software can fix it automatically. There is a single click option called “Clean Up HTML” which cleans up any un-ended or orphan, and empty or redundant tags, which ensures better compatibility across browsers. Apart from the glitch in the FTP aspect, this software will let you do almost all kinds of HTML coding including CSS, and is an extremely powerful tool even if you swear by Dreamweaver. NoteTab Pro is lightning fast, and produces excellent results with just a few clicks. If you want to learn while you make Web pages, this is the software that will let you do it!

Team Digit

Team Digit is made up of some of the most experienced and geekiest technology editors in India!

Connect On :