HTML-KIT EDITOR Verson 292

I Recommend This FREE Older Version 292 Which Can Be Downloaded At HTMLKIT.com

The current Version 20121101, which I also recommend, can be purchased for $59 at Chami.com.

See the current version at HTML-KIT TOOLS

PROS:

  • Loads in 5 seconds
  • Color Coded HTML Tags
  • Extensive Help
  • Preview In Editor Or In Browser
  • Reference Tag
  • Precision Highlighting Of Code
  • Backups on your PC
  • Edit multiple pages at one time. Easy to switch back and forth.
  • Automatic SAVE file when previewed.
  • CONS:

    • To make a string of text bold, underlined, and italic requires the highlighting of the text string three times.
    • Using the "Preview In Browser" will place a copy of the page on your hard drive. The file will be named TMPXXXX, where XXXX is a 4 digit number. The file extension will be the same as the original file, e.g. .html or .htm.


    Menu
    DOWNLOAD    Fullscreen Shapshot    Toolbar   Customize Toolbars   Customize Actions
    Special Icons   Edit Files   Preference Window   Word Wrap

    HTML-KIT Logo Using HTML-KIT means you will write all your own HTML code. HTML-KIT has tools that allow auto-completion of various tags, e.g. typing <img will produce <img src="">. You will probably type 90% of your code. This is not a What You See Is What You Get editor!!

    HTML-KIT is an excellent free HTML editor that I recommend for use in constructing HTML web pages. I am now using HTML-Kit exclusively for developing and maintaining my HTML web pages.

    DOWNLOAD HTML-KIT

    You can download the 3.1MB .exe file at http://www.htmlkit.com/. Hover your mouse over the HTML-KIT 292 in the menu to display the download part of the screen.

     

    If you have not made HTML web pages before then either:
    1. Use these three steps:
      1. Get this editor.
      2. Learn how to start a new blank page.
      3. Learn how to put text and graphics on a page.
    2. Or read my HTML tutorial

    FULL SIZE SCREEN SNAP SHOT OF HTML-KIT

    To see a with a new, blank html page click on the small image to the right. What you will see is how I have my HTML-KIT set up, i.e. how it looks when I start a new page or edit any other page. The toolbars at the top of the page can all be modified to suit your needs, i.e. icons can be added/remove as you see fit. I like my toolbars fairly simple so I have reduced the number of options on each, e.g. the three tabs below the main toolbar.

    This powerful editor has so many options and features it is best to go to their home page and look at it. With so many options it can be confusing at first to use. One thing that I did find during my testing was, when you preview your work and click on a link to another page or URL, you have to use RIGHT CLICK MOUSE > BACK to get back to the previous page.

    TOOLBARS

    NOTE: Although HTML-KIT has extensive toolbars I write almost all pages using only some features on the ACTION TOOLBAR, e.g. bold, font, italic, etc.. Almost all HTML tags can be found in the toolbars but, after awhile, you will learn the ones you use the most by heart and rarely use the toolbars.

    HTML-KIT's toolbars are extensive as you can see by the graphic below. There are sections in the Toolbars, (1) Tools, top two rows and (2) Action Tabs, bottom two rows. What you see below are the default Toolbars. Both sections can be customized. My customized toolbars is shown below the default.

    DEFAULT TOOLBARS

    Note the four small areas outlined in RED in the second row. These separate the four Tool area: File, Edit, Windows, and Tools. Any of these can be shown or not.

    MY CUSTOMIZED TOOLBARS

    My customized toolbars are considerable less cluttered than the default toolbars above. Naturally, it will take you a bit to time and effort to customized the toolbar but it is well worth it. My current Operating System is Windows XP so the color scheme, etc. is the XP style rather than the older Classic style.

    CUSTOMIZING THE TOOLS

    To customize the Tools, which are the top two rows, right click on one on the icons to expose the menu. Then click on customize. Notice that File and Edit are checked whereas Windows and Tools are not as I don't want to use.

    There are three tabs in the Customize menu, Tools, Commands, and Options. Notice that in the Toolbars tab I have not checked Windows and Tools as I don't want to use them.

    To customize the Tools, click on the Commands tab. There are 10 categories that can be customized. In each of these you can ADD or DELETE icons from the bars. To ADD an icon, e.g. Open File, which I have outlined in RED, LEFT CLICK AND HOLD DOWN THE MOUSE BUTTON and drag the icon to position in the bar at the top of the screen. The icon must be placed within or next to the current icons, i.e. it cannot be place in the blank area to the right of the icons.

    To delete or remove an icon from the bars, click on it, hold down the left mouse button and drag the icon down to Customize window. It will disappear from the bar at the top.

    The Options tab is self-explanatory. The settings show work fine for me.

    CUSTOMIZING THE ACTION TABS

    To customize the ACTION TABS, which is the 3rd row down, right click on any icon there to bring up the customize menu and click on Customize

    This will bring up the Customize The Actions Bar screen. The left side show the list of available Actions Tabs, each of which can be expanded to show individual actions. The right side shows which Actions Tabs you currently are using.

    To ADD a complete Category, or any individual action within a Category, click on it in the left hand side and then on the ADD BUTTON.

    To DELETE any Category, or individual action, in the right hand side, click on it and then on the DELETE BUTTON.

    In my customize Actions Tabs I have six items I can use under the TEXT Tab, Bold, Italic, Underline, Big Text, Small Text, and Fonts.

    SPECIAL ICONS AT BOTTOM LEFT

    This graphic shows the bottom left portion off the HTML-KIT edit screen. Note the four tabs: Editor, Preview, Output, Split View. Editor and Preview are the ones you will use most.

    Next, the 5 small icons (RED RECTANGLE) are, from left to right:

    1. Manage Open Windows
    2. Show/Hide Message Window
    3. Show/Hide Actions Bar - the large toolbar with all the tabs.
    4. Show/Hide Workspace Window - a column window on the right side of the screen shows a tree of files.
    5. Automatically display last several Actions Toolbar operations.

    EDITING FILES

    HTML-KIT can edit many pages at the same time. The bottom toolbar will show the names, or abbreviated names in blocks there. Click on any block to bring that page to the main edit screen. Below you can see that I have six pages open at the same time. The page that is currently on the edit screen is helphtmlkit.htm (right tab bar).

    When you are finished editing a page you can close it by clicking on the X at the right opposite the name of the file you are working on. If the File Name is not visible at the top right of the edit screen (just below the toolbars) the three file options, Shrink (underscore), Resort (two boxes), and Exit(X) will appear just below the same, normal window icons in the upper right (see the Action Toolbar graphic above on the right side).

    PREFERENCE WINDOW

    One major feature of HTML-KIT is its Preference Window with 21 tabs that allow you to set up the editor to suit just about every need. You should take some time to check out each Preference Tab to see what you can adjust. Especially important is the "auto-complete tab". This allows you to have HTML-KIT autocomplete a tag when you start it, e.g. my autocomplete for <table> is <table cellspacing=1 cellpadding=10 bgcolor="#0033ff">. As soon as I type <table it will complete the rest of the tag for me.

    PREVIEWING

    I have found that if you set the preference, PREVIEW, so that the page does not save when it is previewed, then

    and the preview will show the same spot on the page but with the changes shown. This means that when you preview you don't have to scroll down the page to see the changes.

    WORD WRAPPING

    Go to Edit > Preferences and click on the EDITOR TAB. Mid-way down the right hand side is the section to set word wrap.