HTML editor for beginners

[tomos]

[edit] just to be clear: I'm *not* looking for WYSIWYG 'editors' (see TaoPhoenix's post below for why) [/edit]
Any tips will be gratefully received!

• (1) as a beginner, I want to be easily able to find everything.
• (2) using a non-standard keyboard (qwertz) I would like customisable shortcuts (bonus for exportable list of same)
• (3) would love to be able to compare files side by side (e.g. my version and someone elses - but this may be another category of software?)

My experience so far:


Web Architect:
50 euro/ free version (some limitations I think)

It is very beginner friendly:

• everything is easily accessible via ribbon UI

I didnt find it very user friendly:

• it is mouse intensive, and keyboard unfriendly (no shortcuts for very basic things)
• no customisable shortcuts that I could find, at any rate

NetBeans IDE:
recommended by gizmo - all I can say is: as a beginner, dont go there


HTML-Kit / HTML-Kit Tools:
free / paid version ($39 upwards)

• Free version had nice wizards to help when creating new files
• Paid version is newer version of same with ribbon interface but with lots of keyboard shortcuts
  wizards didnt work out-of-the-box

I preferred the free version interface.
Not sure why I gave up on this one, I think I simply preferred the next one...


WeBuilder:
($50/$80 home/commercial)

• everything easy to find so far
• customisable shortcuts (dont see any way to export a list of same)
• cant find shortcut for preview current file (but it surely is there - or customisable)
• unable to compare two files side by side (but as said above, maybe I just need to look at different type software for this capability)

[Shades]

Even the free HTML-Kit has a "preview pane"-like window which could be shown side-by-side with your html coding window. You have drag and click somewhat to make this happen every time, but you can set the refresh interval of the "preview pane" in its settings. If that is still a thing you want to have.

A decent text editor where you create the concept of the page you like to make and only when finished you'll do preview in the browser of your choice...is the better way to do things. Sure, at first you'll fail, perhaps even fail miserably. But you will proficient with HTML more quickly than when you keep staring at a preview pane to to see the result of each and every change. This is a time-consuming habit.

Same rules apply with CSS...especially when working with tricks to get the same look on different web-engines, you can fall in this trap.

[TaoPhoenix]

I'm no web builder, but what little I knew of "easy web builders" is if you weren't watchful, and just tried to "drag elements around", the code they produced was stuff like

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFont=12Text="Hello World"<BR>Font=11&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspText="This is
unreadable"<BR>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFont=12Text="Do
Your eyes hurt yet?"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

Yuck.

[wraith808]

I'd recommend WebStorm or PhpStorm.  Now, you might say that WebStorm is a Javascript IDE, and PHPStorm is a PHP IDE, and you'd be correct.  But in practice, they are great for basic HTML editing, and have the features that you want... you can ignore the rest.

[tomos]

Thanks people!

^ PhpStorm is way outside my price-range -
@ $99 I might consider WebStorm (they both look good); the simultaneous HTML tag editing looks nice:
https://www.jetbrain...m/webstorm/whatsnew/

@Shades, I can see the logic of that...

&nbsp to you too Tao :-)
- I'll add an edit to the first post that I'm not looking for WYSIWYG programme.

[Renegade]

Well... just to throw it out there... EditPlus or Notepad++ or UltraEdit.

For multiple files, I love EditPlus. I've been using it for years (nearing 15 now...), and it's wonderful.

However, pure text editors aren't for everyone. And even inside of pure text editors, different people like different things.

• (1) as a beginner, I want to be easily able to find everything.
• (2) using a non-standard keyboard (qwertz) I would like customisable shortcuts (bonus for exportable list of same)
• (3) would love to be able to compare files side by side (e.g. my version and someone elses - but this may be another category of software?)

-tomos (April 08, 2015, 04:44 AM)

1) Search in all files with a text editor - done?
2) Not sure.
3) Easily done in a good text editor.

Not sure if I'm hitting the mark here...

[tomos]

> Not sure if I'm hitting the mark here...

I think so -
and I'm happy to hear all suggestions,
thanks Ren

[wraith808]

If you're interested in just regular text editors, that changes things a bit, and I'd also recommend Sublime Text 3.  I use that more than Webstorm these days for working on sites.

[Vurbal]

A decent text editor where you create the concept of the page you like to make and only when finished you'll do preview in the browser of your choice...is the better way to do things. Sure, at first you'll fail, perhaps even fail miserably. But you will proficient with HTML more quickly than when you keep staring at a preview pane to to see the result of each and every change. This is a time-consuming habit.

Same rules apply with CSS...especially when working with tricks to get the same look on different web-engines, you can fall in this trap.

-Shades (April 08, 2015, 09:59 AM)

I think some minimum quality/capability in the text editor has to be the baseline requirement, to be met before any additional features are considered. I'm not sure what that minimum would look like in a beginner oriented product.

[wraith808]

I think that will vary by the consumer.  A baseline text editor will be good for some, and is what I learned in.  You can add on code completion, templates, etc.  But those are just conveniences.

[tomos]

Code highlighting is helpful - I presume that would be a minimum.

Preview is nice to have but doesnt seem to be essential - I especially like where I press a hotkey to show preview and same key to toggle back to code. I cant remember which editor had that - I think it was the one I liked least otherwise :-(
I'm surprised by the other editors that allow preview on a different tab but dont give you any hotkey to get there...

Code completion is nice thinking of Shade's point that to do it all manually is a good way to learn...
It is nice to think that one can learn everything, but if something is seldom used, I think having a button/menu-entry that does the job is not a bad thing.

Using a button or shortcut for most tags seems reasonable/helpful to me. Learning what things like float:right and clear:both mean and how they're used - that can neither be helped nor hindered by a button.

One thing I didnt mention before is I want to be able to write in German (on the resulting website) i.e. include in particular:
ö ä ü ß
I was told to use UTF-8 encoding and then simply use the characters directly as they are - I see some editors show them as special characters, some not.

Otherwise, as a beginner, I'm not really sure what I need

(currently downloading Sublime Text - thanks wraith)

[tomos]

Was gravitating towards EditPlus, but have now started using emmet (formerly zen coding) with Sublime Text.

I think it (emmet) can be used with lots of editors.
Even when used very basically, it's a pleasure


In general:
not getting to do as much as I want - but a little most days.

[Renegade]

Was gravitating towards EditPlus, but have now started using emmet (formerly zen coding) with Sublime Text.

-tomos (April 16, 2015, 12:13 PM)

Different strokes for different folks.

The one thing that I would strongly recommend though, is that whatever editor you choose, it needs to have decent regular expression support. You have NO idea just how awesome that can be. I've used EditPlus to work on THOUSANDS of files at once. (Was a long time ago before CMSes were popular.) Other editors can do the same. But regex? It makes you a GOD over your files.

EditPlus supports Zen Coding, but I don't use it.

[MilesAhead]

Nobody has mentioned PsPad.  It is free.  Does syntax highlighting.  Comes with Tidy for html.  It does Find in Files.  Does preview in an IE compatible pane.  Plus it has templates for various html and other files.  I found if I allowed Tidy to wrap lines I was able to see what was going on.

Since it isn't a code generator you don't get the clutter like when you use html editor from Sea Monkey(back when I used it they just called it Netscape.)

If you intend to do stuff mainly with html and css it may be a good way to go.  The other thing it has going for it is small size and portability.  Also you can add commands to the menu.

Edit:  I think you need to add a plugin to get the Find in Files feature.  But it's straightforward.  Also it does spell checking for plain text files.

[tomos]

Looks good Miles (I'm having a second look this evening)

I also got a recommendation elsewhere of NoteTab, which seems to be fairly beginner friendly, while also catering to (more) advanced users - http://www.notetab.com/html-editor.php

One of the things that confuses me is special characters - some software show quite a range, some show very few, some (e.g. Sublime Text, PsPad,) dont seem to cater to special characters at all (or am I missing something there?). I would probably be having at least some German text in any sites I might make, so would be using UTF-8 encoding:

• AFAIK, in this situation, I just have to (whats-the-word?) use fancy encoding for those characters that are used in HTML, and also for ones that aren't available on my (German-layout) keyboard (e.g. en-dash etc. etc.)

[tomos]

I have to admit I'm a bit overwhelmed by trying to choose some software that I think might be good for me - without actually really understanding what I need most. (Because I'm a beginner...)

I think part of my problem is [1] that I need a good reference book (FWIW, I'm looking at HTML5 Foundations (Treehouse Books (Wiley)); CSS3 Foundations (Treehouse Books (Wiley)); Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics)

and
[2] I need a way of saving the things I'm learning about particular tags/styles/methods - I dont know whether any editor would be up to that (ideally including tagging of clips/notes for easy finding again), or if I should default to my IM (InfoQube - which, after inquiring, I'm pretty sure is up to it)

[MilesAhead]

http://www.dfm2html.com/

Not what you asked for.  It is more of a design tool using objects.  But I thought of it when you mentioned German Language.  I think German is the native language of the developers.

From the write-up it seems like the most sophisticated open source tool I've seen for Web.  I haven't installed it yet.  I have been focused on getting Visual Studio installed properly.  But this tool looks pretty cool.

[tomos]

One of the things that confuses me is special characters - some software show quite a range, some show very few, some (e.g. Sublime Text, PsPad,) dont seem to cater to special characters at all (or am I missing something there?).

-tomos (April 18, 2015, 05:05 PM)

am I even using the correct term here: 'special characters' ?
I know that e.g. quote marks need to be replaced; en dash; etc, etc (I forget what else atm but can check that out)
-
still wondering how e.g. Sublime Text caters to 'special characters' (which makes me think I'm using the wrong term - a search didnt help there).