Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Text & HTML Editors

A Simple Text Editor Named Notepad

What do you need to hand code (X)HTML? That is easy! For Windows PC users, Notepad will do nicely. You should already find Notepad installed. Look under Start>Program Files>Accessories>Notepad.

Notepad will work similarly to a word processor, but it doesn’t come with a lot of fancy formatting buttons and tools.

An option I find very helpful is the "word wrap" feature. Choose Format>Word Wrap. This automatically will wrap your html code to fit nicely in the window.

Format>Font will allow you to change the font used to code your page. I suggest keeping a monospace font (like Courier) to keep your characters in order. But feel free to enlarge or reduce the font size. It will have no effect on what is viewed on your own Web page, it only changes the look of your code in Notepad.

Newer versions of Notepad also include the Find and Replace feature, along with the ability to insert the Date and Time into your page. You will find both these options on the Edit menu.

Other Windows Text Editors

Notepad is a very basic text editor (about as basic as it gets,) but there are a few other choices that are a little more "user-friendly" than Notepad.

Other text/ascii editors:

(Please read the terms of use for any programs you download.)

What About Macintosh Text Editors?

For Macintosh users, here are a few basic text editors.

  • TextEdit should already be installed on your Mac OS X system. Although I find that there are better editors for Mac users.
  • Text Wrangler – it’s an excellent free simple text editor with html syntax highlighting for easy code viewing.
  • TacoHTML Edit – Same as TextWrangler, free and offers syntax highlighting. Also offers a preview feature to automatically open your web file in your default browser.
  • TextForge
  • HTML Face

For Mac OS 9 users, you have a great basic text editor named SimpleText. It can be also accessed if you have OS X, but you also need Classic mode (not available in newer MacTel systems.) In Mac OS X, SimpleText can be found by choosing Hard drive>Applications(Mac OS 9)

More Bells and Whistles

While I strongly recommend using a basic text editor when beginning to learn XHTML and CSS, I would be a hypocrite if I said that is what I personally use.

Granted, typing code character by character and line by line is definitely the best way to understand and memorize code, but I realize some people just can’t handle all that typing. And those that already have experience with HTML might desire an editor that codes a little quicker.

I recommend using a code editor that offers syntax highlighting. This feature allows you to browse through your code much easier.

Keep in mind, code hints, tag buttons, and other bells and whistles will help you code faster, but your brain might not retain the information as it would if you 100% hand-coded. The more you allow your editor to "help", the less your brain works. The good news is most editors allow you to turn off some of the more advanced features in the preferences.

Fancier HTML Code Editors (Windows)

  • HTML-kit is my personal favorite html editor for Windows. I miss this editor now that I am on a Mac computer. It is loaded with features and options; and the price is right: FREE! Lots of plug-ins add to the functionality of the software.
  • PSPad
  • Homesite is what I used before I fell in love with HTML-kit. It is no longer being updated by Macromedia/Adobe, but it is still a great html editor. It also includes a built-in validation tool.
  • HTMLPad
  • Coffeecup HTML Editor (in code view)
  • Dreamweaver (in code view) is an expensive choice (for Mac and Windows users.) While you can definitely hand-code in this program, the main purpose of Dreamweaver is a WYSIWYG editor.
  • JEdit
  • UltraEdit
  • NoteTab
  • TSW WebCoder

Fancier HTML Code Editors (Mac)

  • skEdit – I personally use and recommend this inexpensive ($25) and feature-rich html code editor. It includes code completion, code hints, SFTP, site management, syntax highlighting, and snippets.
  • BBEdit – I have tried this html editor, and even though it is the editor of choice for many Mac professionals, I just could not get comfortable with it.
  • SEEdit
  • Textmate – Everyone raves about this html editor, but I haven’t had the time to give it a fair test.
  • Dreamweaver (in code view) is an expensive choice (for Mac and Windows users.) While you can definitely hand-code in this program, the main purpose of Dreamweaver is a WYSIWYG editor.
  • JEdit
  • Jedit X

What About WYSIWYG Editors?

When you are first learning, I do not recommend using WYSIWYG (pronounced whizzy-wig) editors like FrontPage, 1st Page 2000, Topstyle (CSS Editor) and Dreamweaver (in Design view.) WYSIWYG stands for What You See is What You Get. They work similarly to word processing applications. You type text, the editor generates the HTML coding. It is very difficult to learn (X)HTML if you are allowing an editor to create the code.

Once you get the hang of XHTML and CSS, then yes, these tools can make your life a lot easier. I admit I occasionally use a WYSIWYG editor, but I also take time to hand-code on a regular basis just to keep in practice. Believe me, in a short time, you can become quite rusty!

Leave a comment to share your favorite text or coding editor.

10 Comments

  1. Comment by jim mulvaney on December 7th, 2006

    hello there,
    i was doing a search on how people are enhancing my absolute fav editor TextPad and came across this page for some reason?
    Anyways, you make a very valuable point. i am mostly a PHP / MySQL web developer and cant tell you how long it took me to re-learn all the syntax needed to work with a database, all because “the industry” expects me to know Dreamweaver and Homesite. Although they are both invaluable pieces of software they have plenty of cons to them. Like adding unecesary code, formating it so they can understand it (and i cant). Im so sick of using it even in code view, that i am reverting to my good old TextPad. The most i can do here is set up a small clip library. My main problem is that i do not remember all of the possibilities that come after “mysql_”. Even though it is a bare-minimum app, i do wish it had a kind of function suggestion tool-tip ya know? well G2G just thought i’d give my $00.02

  2. Comment by debbie T on December 7th, 2006

    Thank you for your input!

    I am surprised you are having such a hard time with Homesite and Dreamweaver. Both are actually very good programs for coding, and are not known for adding un-necessary code or formatting…But then again, I am not an advanced php/mySQL programmer, so you might be using it in a different way than me.

    But just for fun, try checking your preferences – they could be incorrectly set.

    In your preferences, look at the “code rewriting” settings. Remove all those that you don’t need, like “Fix invalid tags” – You might want to take a look at the other preferences also, for example code formating.

    You also might want to take a look at the many PHP text coders out there. They might offer some extra features you are looking for. I don’t have my list handy, but I know google will find ‘em.

    I do know that HTML-Kit has some great PHP plug-ins!

    Good luck!

  3. Comment by Vidya A. on October 17th, 2007

    My favourite code editor for the Mac is Coda – http://www.panic.com/coda/. Functionally, it’s very similar to Dreamweaver, but it’s not a WYSIWYG.

  4. Comment by debbie T on October 18th, 2007

    I have the Coda trial on my laptop, still haven’t had time to play. Someday.

    :)

    I love Transmit, so I think Coda would be a good fit for me. Glad to hear you enjoy using it! Thanks for your comments!

  5. Comment by noreen kennedy on November 12th, 2007

    debbie, you are a busy woman. Car racing, needlepoint?? I am signed up for the Build 1 lesson with lvsonline. I was late joining up so a bit behind the gang. Nearly finished part iv . just doing my , , h3 etc. Problem(hiccup) , no white space(line break) is appearing between my headings.
    I’m sure you have an instant solution.
    regards
    Noreen/dargle

  6. Comment by debbie T on November 12th, 2007

    I don’t teach that class anymore, Noreen. You will have to ask the instructor. I am sorry!

  7. Comment by Amy on December 7th, 2007

    Well im making a website for my last year at school im on dreamweaver and i was wondering if i could make it some how so that people can leave a comment theres like a comment page and they leave a comment and its posted to the website

    Amy

  8. Comment by Ryan on February 4th, 2008

    Amy,

    Your going to probably need a database to accomplish what your trying to do.

    (edited by admin)

  9. Comment by debbie T on February 4th, 2008

    Gee, Ryan, you are a persistent spammer!

  10. Comment by CompanionWulf on July 23rd, 2008

    Great article! I use HTML Kit now (used to use First Page 2000 until they “upgraded” it to nagware). There’s another WYSIWYG editor worth noting and that’s Blue Voda. I don’t know if it’s MAC compliant, but for the PCers it’s quite a good one, although can be temperamental at times, especially when saving/converting to web-ready HTML.