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


  • Steve   March 21, 2013, 7:35 a.m.

    I will use Mozilla Thimble for this course but usually use Cloud9

  • Jaime Lyn   Jan. 28, 2013, 8:18 p.m.

    Hi, All :)

    I've already got Aptana installed on my computer.  It's nice for large projects (you can have a pane on the side to explore your entire solution) but it's awfully slooooooowwww.  I also have Notepad++ which is pretty nice.  I may try out the "recommended" online editor, though.  I'm not crazy about jsfiddle.  (The layout distracts me.)

  • Deiren   Jan. 25, 2013, 2:51 p.m.

    I'll be using Mozilla Thimble, looks great, but just to note/ list I've used Programmer's Notepad in the past http://www.pnotepad.org/ - free download for Windows, which I've been happy with.

     

  • Gerardo Muñoz Asca   Jan. 20, 2013, 8:37 p.m.

    I like Mozilla Thimble because I can see the result and write the code at the same time.

    Para mis compañeros del curso que son hispanohablantes pueden ver la traducción en mi blog:

    http://p2p4-html5yuichi.blogspot.com/

    Espero que les sirva de alguna ayuda.

    Greeting!

  • Aranike   Jan. 14, 2013, 11:48 a.m.

    For this challenge I'm going to use Mozille since it's very easy to see errors in real time. I like also Notepad++ or Bluefish.

  • kaseypelchy   Jan. 13, 2013, 12:02 a.m.

    I feel that Notepad++ works the best for me.  its clean and simple to use. 

    Here is my blog, check it out.

    http://signedandsealedinblood.co.nr

  • newyork10   Jan. 7, 2013, 8:13 p.m.

    I like Notepad++ but I will use Thimble for this challenge it's easy and quick. I think Notepad and Bluefish are good for more advanced developers since they have more features.

  • EcologicalHumanist   Nov. 28, 2012, 3:59 p.m.

    For my purposes the ideal editor would be open-source, intuitive, and one that people who know more about it than be recommend.

    I looked at Bluefish because I had already downloaded it, and compared it to Thimble. The online editor looked simpler, while Bluefish is more for experienced coders, but has a lot more features. For this challenge I'm just going to use Thimble. I'm also going to look into notepad ++ since the comments here seem to favor it.

  • G Powell   Oct. 26, 2012, 1:28 a.m.

    Hi All,

    Here are my answers:

    Identify desirable features in an HTML editor

    Easy syntax highlighting, a clear, easy to use interface and a program which is light on drawing resources. 

    Compare two or more HTML editors

    I use Notepad++ as I familiar with it and it has proven sufficient for my needs and competence.  I am now using Mozilla Thimble for online coding as this is proving excellent for instant on-the-fly coding work (here is my work from Mozilla Thimble: https://thimble.webmaker.org/p/f3od/edit

    Report your comparison to other participants of this class

    Done - see this comment.

    Select an HTML editor for your personal use

    Notepad++.

    Summarize the reason(s) that led you to choose your specific editor

    I use Notepad++ for my personal use because it is the only text editor I have used, it is sufficient for my requirements, it was free and easy to use.  

    Use your editor to produce a simple HTML page

     

    Here is a link to a web page I have created with Notepad++:  http://www.gjpowell.com/

     

    Thanks.

  • rgr101   Oct. 22, 2012, 12:26 a.m.

    Sublime Text 2 the is the best, totally recommended! It is not free but the it has an unlimited trial period http://www.sublimetext.com/2

  • Randi Miller   Oct. 22, 2012, 5:42 p.m.
    In Reply To:   rgr101   Oct. 22, 2012, 12:26 a.m.
    I also recommend sublime or aptana. On Oct 22, 2012 12:26 AM, "rgr101" <
  • G Powell   Oct. 26, 2012, 12:58 a.m.
    In Reply To:   Randi Miller   Oct. 22, 2012, 5:42 p.m.

    Thanks both for making me aware of Sublime - bookmarked and duly noted.

  • lesabre721   Oct. 16, 2012, 1:46 p.m.

    I've used a handful of text editors on this list but the one I'm the most comfortable with is not listed. I typically use Komodo for all my editing needs.

    I do like Thimble, however. Normally, I'm not a fan of in browser editors but I do like the live preview without having to hit a "Run" or "Refresh." button. 

  • Christos Tsagkournis   Oct. 12, 2012, 10:25 p.m.

    The key features to an HTML editor, for me, are :

    1) Discrete and unobtrusive code completion and hints

    2) Ability to review code modifications as soon as you make them

    3) Presence of debugging and productivity tools, such as a DOM inspector, color grabber etc

    4) Ability to scale up (integrate with larger, more complex projects) and down (simple, one-shot projects) as needed

    To that end, altough I appreciate the light weight of standalone editors such as Notepad++, I'm more inclided towards larger-scale, integrated solutions such as Netbeans and Eclipse. Because however they do have a learning curve and they are, compared to lower-end soltions, resource hogs, I'd highly recommend both the Aloha and the Maqetta editors and it's always great to have Neotepad++ around as a generic text editor.

  • G Powell   Oct. 26, 2012, 1:12 a.m.
    In Reply To:   Christos Tsagkournis   Oct. 12, 2012, 10:25 p.m.

    Hi Christos,

     

    Thanks for the very helpful feedback - I appreciate that :)

  • Carlo Coronacion   Oct. 3, 2012, 2:53 a.m.

    I been using several text editors online and offlicne. I think notepad++ is the best using plug ins is very helpful.

  • rickdog   Oct. 2, 2012, 5:58 p.m.

    I can't recommend Shiftedit enough, http://shiftedit.net/.

    A full featured editor with JSLint & FTP and linkage to your Google Drive and /or Dropbox, this has become my IDE of choice for developing my Wordpress sites as well as learning PHP, Python & Ruby.' It even supports drag & drop from your local filesystem.  Almost flawless.

    I abandoned Thimble as soon as I realized you can't publish anything with script.

  • G Powell   Oct. 26, 2012, 1:31 a.m.
    In Reply To:   rickdog   Oct. 2, 2012, 5:58 p.m.

    Thanks rickdog,

    Thats great feedback and I have bookmarked it.

    Re Thimble, do you mean it doesn't run JavaScript?

    Be good to hear your thoughts.

    Thanks

  • marcmars   Oct. 1, 2012, 11:44 p.m.

    Happy to start learning HTML by downloading a few editors.

  • jeffry7   Sept. 27, 2012, 8:58 p.m.

    I went to look at Mozilla Thimble and Aptana. Mozilla Thimble is recomended and is also lightweight. I don't even have to install anything. I am going to try using it from my android tablet.

    I have used Eclipse before and while it is powerful, there is a learning curve to get that power out of the IDE. I will probably pick up eclipse or aptana later when I get into app building, but for now I will go with Thimble.

  • Garrison Snelling   Sept. 19, 2012, 10:17 a.m.

    I really like Mozzilla Thimble as opposed to Notepad++ for two reasons:

    1. It's UBER simple.
    2. It's UBER accessable because it's on the web.
  • Raul   Sept. 6, 2012, 2 p.m.

    My preference is the Notepad++ lightweight, easy to use and markup highlights.

  • Mike   Aug. 28, 2012, 12:28 a.m.

    I've used Notepad++, text wrangler and Dreamweaver before. Mozilla Thimble seems insteresting in that you can get an automatic preview of what your coding. Something I got used to in Dreamweaver was having it autoclose my tags. 

  • nicholas diesslin   Aug. 23, 2012, 12:39 p.m.

    Sublime text is my favorite text editor, it is ver intuitive! http://www.sublimetext.com/