Free online HTML editor

anksta · 22 Sep 2014 at 08:00

Alright fellas, I'm looking for a site that will let me put in simple code on the left and then live generate on the right.

I've found a few of these but none seem to be editable in the right window.

The reason I'm asking is I have to give a class on using a strange CMS in a few weeks with a bunch of people who have an assumed zero based knowledge of HTML etc.

I've practised with a few people in my office in a similar position and the second one fared much better when I let her use Dreamweaver rather than some terrible online one I'd found for the first.

In Dreamweaver you can write in the preview window and it will generate the corresponding code, blank paragraphs and <br> etc.

Anywhere that did that would be great (I don't need any complex use out of it) but if you couldn't edit in the preview window, it'd be nice if when you highlighted the text in the preview window, that the corresponding HTML would highlight in the left side, Dreamweaver does that too and it's very helpful if you've got a load of code and only need to change a bit.

While I won't have masses of HTML anywhere, it'll still threaten to overwhelm the absolute beginners I'll be with.

I requested they all have Dreamweaver on their machines by the day but that got thrown out, anyone know of anywhere?

Cheers/

antijoke · 22 Sep 2014 at 09:29

What about this?

http://htmledit.squarefree.com/

It's very simple but looks like it might do the trick.

anksta · 22 Sep 2014 at 09:36

Alright mate, no that's quite close but still similar to the other ones.

In that one you can't type in to the bottom window, I'm assuming that's a much higher level of functionality than just displaying the code so I'm fair enough with that but I would like it to at least highlight what HTML you've selected in the text.

Thanks for the suggestion though

RoyMi6 · 23 Sep 2014 at 10:48

Never seen what you're looking for - but I think what you're looking for is an HTML generator.

The text box at the top of this page (http://www.html.am/) does what you're looking for (kind of) where you can write HTML then click the "source" button to see what you've made.

Anyway, I don't think you'll get what you're looking for outside of a dedicated application.

Something that's slightly smaller in size though could be Google Chrome...

Create a blank test.html file and open in chrome - then press F12 to bring up the developer tools.

It would only let you write in pure HTML (not edit in the chrome window like one of your requirements) but it would highlight the elements as you make them.

AJK · 23 Sep 2014 at 11:11

What kind of CMS are you using, such that people with "an assumed zero knowledge of HTML" need to be taught HTML before they can use it?

Th3M8dH8tt3r · 24 Sep 2014 at 02:28

Codepen.io

RoyMi6 · 25 Sep 2014 at 10:01

Th3M8dH8tt3r said:
Codepen.io

Falls into the same problem as all the other similar ones (jsfiddle.net, cssdeck.com, liveweave.com) none of them let you edit the resulting HTML.

touch · 25 Sep 2014 at 10:34

RoyMi6 said:
Falls into the same problem as all the other similar ones (jsfiddle.net, cssdeck.com, liveweave.com) none of them let you edit the resulting HTML.

The problem with editing HTML output is that you cant see (or click on) most of it. The parts you can see are the text and images, which should be easy to find and edit in the source anyway. You wouldnt be able to edit divs, tables, classes, or any other structural elements.

You can live edit the HTML using Firebug (in firefox) or Developer Tool (in chrome), maybe that's the best way to do it?