In this article we look at HTMLPad, an all-in-one HTML, CSS and JavaScript editor.
One thing about the installation is that the program asks about using Internet Explorer (IE) for viewing. That really surprised me. I have IE 9 on Windows 7 Home Premium and I find it to be incredibly unstable and is prone to freezing. Whenever possible, I avoid using it.
After you configure the program using the steps below, you can set the browser preview. To do so, go to: Options: Configure Browsers and in the Preferences dialog box, click on the Preview folder. As you can see in the screen shot above, your choices are: Associated, Internet Explorer, Firefox, Opera and Google Chrome.
Getting back to setting up the software, when you launch the program it takes you through several steps to configure the user interface.
Here’s the sequence:
Set primary file type. This refers to the files you normally use. You can select one or all of the file types in the list above.
Next, you set the file associations and which one you want to use.
Here, you set the workspace layout. I chose the default “normal” option.
Now you choose the interface style. Again, I went with the default of “Modern.”
This is the last page letting you know that your setup is finished and if you want to make any changes to the layout, to Options: Preferences.
This is the finished interface, based on the selections above. Now we’re going to look at a few highlights of this program, which will make it easier create code.
One of the biggest problems with getting up to speed with coding is the learning curve. In HTMLPad, one of the ways this is addressed is through templates. When you open the file menu, you’ll see a few options. These are: New HTML Page Wizard, New Style Sheet Wizard and New from Template.
We’ll have a look at one of these options here. When you click on Create HTML page, the dialog box above, appears. And within it, you’ll notice three tabs on the top left, which are: General, Style and Layout. On the far right is a preview pane, so you can see the results of your changes.
Here are some of the changes I’ve made to the template. I’ve set the DOCTYPE to HTML5, made a several changes under Style (as you can see in the screen shot above) and set the margins to 8.
When I click on the OK button, here’s the resulting code.
Time Saving Aspects of Writing Code
One of the features that will save you time when writing code is the Auto Complete option. As you type code, the Auto Complete window will appear. You can also activate it using Ctrl+Space. Initially, it wouldn’t work in my document, but after fiddling with the settings under Tools: Preferences, it worked, but not that well. Sometimes it would kick in while typing and other times it wouldn’t work at all. The performance was unreliable, at best.
One thing I did like what when I’d type in tags such as
,