Tools for Creating HTML when Building Websites - dummies

Tools for Creating HTML when Building Websites

By David Karlins, Doug Sahlin

Before you start coding HTML, consider the options in terms of a coding environment. There is a wide spectrum of tools, ranging from the free text editor that came with your operating system (like Windows Notepad or TextEdit on a Mac) to professional applications (most notably Dreamweaver) that provide substantial tools to help you write, and test, code.

Code editors

There are three levels of code editors:

  • Your operating system’s text editor: Yup, your OS has a text editor built right in. Nice. Here are two great advantages of using the editor built into your OS as a code editor for HTML (and CSS):

    • No cost.

    • The app is already installed on your computer. Done and done.

    This route is definitely the no-frills option, lacking code-hinting and checking features available in free downloadable code editors. Unless you’re planning to do only a minimal amount of HTML coding, download a free code editor like Text PSPad or Text Wrangler.

    Creating HTML with TextEdit on a Mac.
    Creating HTML with TextEdit on a Mac.
    Creating HTML with Notepad in Windows.
    Creating HTML with Notepad in Windows.
  • Free, downloadable code editors: Behind Door #2 are free code editors, like TextWrangler for Macs or PSPad for Windows.

    Again, free is good. Those (and other) free code editors include features atop what comes with your OS app:

    • File tabs that allow you to work with multiple files at the same time. This capability is essential for working with an HTML and a linked CSS file at the same time.

    • Color coding that identifies coding syntax elements. You’ll find this feature very helpful when you’ve mistyped some code because that mistyped content won’t adopt the expected color code.


    • Spell check is available in free code editors like TextWrangler and PSPad to help identify misspelled words on the fly.


    • Autocomplete is included in PSPad.

    Free code editors like TextWrangler (for Macs) and PSPad (for Windows) do not come with WYSIWG graphical windows that display how HTML pages will look in a browser. And they lack the kind of code-hinting options available in code editors that cost money.

  • Low-cost code editors: BBEdit, for example (selling for $50 as of this writing), is an enhanced version of TextWrangler. One of the most powerful features of BBEdit is that it can autocomplete code — anticipating and filling in the ending of code as you type. The following figure, for examples, shows a range of HTML tags beginning with the letter “h” prompted by typing an “h.”



The most powerful tool for working with HTML is Adobe Dreamweaver. In addition to the features found in advanced, professional code editors (like spell check and code hinting), Dreamweaver’s main attraction is that you don’t have to hand-code HTML. You can, instead, use menu options (like “Insert→Image”) and panels (like the Properties inspector) to generate HTML.

Many people are aware that Dreamweaver can create HTML without hand coding. But what many people don’t realize is that Dreamweaver operates in two modes:

  • Design view: In this view, code is generated with menu and mouse actions hidden.

  • Code view: This view provides a full-featured coding environment with code-hinting and testing for not just HTML but other web design languages like CSS (style sheets), JavaScript (for animation and interactivity), and PHP (for server-side scripts that manage online data).


As noted, Dreamweaver’s biggest draw is that it allows designers to generate HTML (as well as CSS and some other coding) in a design window that looks and feels something like other Adobe Creative Suite apps like Photoshop, Illustrator, or InDesign.