HTML 5 Introduction

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Install an HTML Text Editor

Learning Objectives

  • Identify desirable features in an HTML editor.
  • Compare two or more HTML editors.
  • Report your comparison to other participants of this class
  • Select an HTML editor for your personal use
  • Summarize the reason(s) that led you to choose your specific editor
  • Use your editor to produce a simple HTML page

Task Materials

For this course we need an HTML editing tool. There are many to choose from. We do not need many advanced features for this basic course so pick a simple text editor with syntax highlighting.

Online HTML editors

There are several HTML editors that you can use in your web browser:

  • Mozilla Thimble - Recommended to use on this course. Provides direct visual feedback, syntax highlighting, and easy publishing.
  • HTML Pad (Mozilla online HTML editor)
  • JS Fiddle (JavaScript, CSS, and HTML editor online)

Free/Open Source Text Editors

The following text editors have syntax highlighting and are Free/Open Source tools:

  • Bluefish (GNU/Linux, Mac OSX, Microsoft Windows)
  • Geany (GNU/Linux, Microsoft Windows)
  • gEdit (GNU/Linux, Mac OSX, Microsoft Windows)
  • jEdit (GNU/Linux, Mac OSX,Microsoft Windows)
  • Notepad++ (Microsoft Windows)

Advanced Integrated Development Environments (IDEs)

Task Discussion


  • flatpack   March 28, 2012, 6:08 a.m.

    I've installed Notepadd++ on my PC as it is the program we use with pupils on the school network. I like the ability to minimise sections of code to help you focus on the section you are working with.

    Using Gedit on my ubuntu netbook and playinig with htmlpad and jsfiddle online.

    Preference is for notepad++ but this is probably just familiarity

  • Unknown   March 14, 2012, 2:25 p.m.

    I've tried both Coda and Textmate but Sublime Text 2 just seemed to hit the spot for me especially since the thing is 100% free.

  • Mr. Plow   March 8, 2012, 2:46 p.m.

    I decided to use Komodo Edit on Mac. I have Komodo Edit installed and have used it for some work tasks already. It supports HTML5 and other markup/programming languages, and organizes files into projects, which is helpful. 

  • JuanMa Ruiz   March 7, 2012, 5:42 a.m.

    I just installed Coda, a powerfull editor for mac. Before it I used to use Dreamweaver as code editor.

  • Justfinethanku   March 1, 2012, 4 p.m.

    I Just installed TextWrangler from the Mac App store and it seems to be a really decent HTML editor. (I checked all the reviews and everyone else seems to love it too.)

  • wm00   Feb. 13, 2012, 12:09 a.m.

    Does anyone else use TextWrangler? How do you like it?

  • Justfinethanku   March 1, 2012, 3:37 p.m.
    In Reply To:   wm00   Feb. 13, 2012, 12:09 a.m.

    I just downloaded it from the App store on my MacBook and it works **perfect** I'd highly recommend it. 

     

    I'm sure you've already discovered that textedit on the Mac doesn't really work very well. 

  • Julio Garcia   Feb. 8, 2012, 12:44 p.m.

    I chose Notepad + + because it seemed very simple and straightforward. Initially I tried Dreamweaver but I realized that is complex and produces code automatically, so it's not good to learn HTML. In the future I can say more of this editor.

  • joe palmer   Feb. 8, 2012, 3:02 p.m.
    In Reply To:   Julio Garcia   Feb. 8, 2012, 12:44 p.m.

    Right Julio, best to learn by hand than move to a software like Dreamweaver or Expression. That way when you want to make a change, you have the skiill to know what it is doing and what to change. Nice blog.

  • jamesweaver   Feb. 7, 2012, 6:33 p.m.

    I've been using Notepad++ for a couple years now. I love it! I can't see switching anytime soon. You can check out my work at columbus-ohio-web-designer.com

  • joe palmer   Feb. 8, 2012, 3:11 p.m.
    In Reply To:   jamesweaver   Feb. 7, 2012, 6:33 p.m.

    James I use Notepad++ also. Your web site has much to offer to students here, I have subscribed, thanks!

  • Devinciweb   Feb. 10, 2012, 1:05 p.m.
    In Reply To:   jamesweaver   Feb. 7, 2012, 6:33 p.m.

    nice portfolio.

    and mostly self taught I read.

    inspiring.

    and congrats on the new job.

    (you might wanna correct one typo i caught in the portfolio section under the Community College....contrasting is the word)

     

  • Devinciweb   Feb. 3, 2012, 11:21 a.m.

    I chose Bluefish since I'm working on Max OSX

    Here's a link to the task:

    http://dl.dropbox.com/u/60089935/firstbluefishfile.html

  • joe palmer   Feb. 3, 2012, 11:36 a.m.
    In Reply To:   Devinciweb   Feb. 3, 2012, 11:21 a.m.

    Put the closing </html> tag at the end and perfect!

    By the way, that is working off of the html in the doctype tag.

  • Sarah   Jan. 31, 2012, 9:27 p.m.

    Now have the Notepad ++ and looking forward to participating!

  • jamiedmattingly   Jan. 30, 2012, 4:36 p.m.

    notepad++ works pretty good for me so far

  • Jack   Jan. 30, 2012, 1:41 p.m.

    Hi, I have installed Notepad++ and started using it.

  • Luis Sierra   Jan. 27, 2012, 8:43 p.m.

    I am used to code with Notepad++, but sometimes i use Eclipse or Netbeans for bigger projects

  • John Y.   Jan. 26, 2012, 5:20 p.m.

    Gonna keep using Notepad++ for now. I'm satisfied with its features

  • Smythe   Jan. 26, 2012, 7:47 a.m.

    I already had Notepad++ installed from taking part in another course, so I'll stick with that.

  • Vlad Anghel   Jan. 25, 2012, 1:48 p.m.

    I installed Notepad++. That's what works best for me

  • JMBaker   Jan. 25, 2012, 5:09 p.m.
    In Reply To:   Vlad Anghel   Jan. 25, 2012, 1:48 p.m.

    I recently installed CoffeeCup HTML Editor (free version). Pretty nice. There is a commercial version as well with lots of additional features.

  • Mary Ann   Jan. 25, 2012, 1:12 p.m.

    I installed Notepad++,  but I've also got Dreamweaver, which I'm pretty used to.

  • angelica   Jan. 24, 2012, 4:50 p.m.

    What is the best text editor program for Mac?

  • Brylie Oxley   Jan. 24, 2012, 8:56 p.m.
    In Reply To:   angelica   Jan. 24, 2012, 4:50 p.m.

    Blue Griffon runs on Mac and has good support for HTML5, CSS3, etc.

  • J R Bennett   Jan. 24, 2012, 9:14 p.m.
    In Reply To:   angelica   Jan. 24, 2012, 4:50 p.m.

    Komodo Edit is my choice on a Mac.

    JRB