Home | Blog | Software | Reviews and Features | Forum | Help | Donate | About us
topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • December 08, 2016, 10:13:39 AM
  • Proudly celebrating 10 years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: HTML editor for beginners  (Read 4218 times)

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
HTML editor for beginners
« on: April 08, 2015, 04:44:53 AM »
[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 :D


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 :up:
    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)
Tom
« Last Edit: April 08, 2015, 10:58:42 AM by tomos »

Shades

  • Member
  • Joined in 2006
  • **
  • Posts: 2,100
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #1 on: April 08, 2015, 09:59:26 AM »
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

  • Supporting Member
  • Joined in 2011
  • **
  • Posts: 4,550
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #2 on: April 08, 2015, 10:15:48 AM »
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

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 8,406
  • "In my dreams, I always do it right."
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #3 on: April 08, 2015, 10:35:59 AM »
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

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #4 on: April 08, 2015, 10:56:04 AM »
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.
Tom

Renegade

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 13,220
  • Tell me something you don't know...
    • View Profile
    • Renegade Minds
    • Donate to Member
Re: HTML editor for beginners
« Reply #5 on: April 08, 2015, 11:06:18 AM »
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?)

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... :(
Slow Down Music - Where I commit thought crimes...

Freedom is the right to be wrong, not the right to do wrong. - John Diefenbaker

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #6 on: April 08, 2015, 11:13:39 AM »
> Not sure if I'm hitting the mark here...

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

wraith808

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 8,406
  • "In my dreams, I always do it right."
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #7 on: April 08, 2015, 12:50:40 PM »
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

  • Supporting Member
  • Joined in 2012
  • **
  • Posts: 635
  • Mostly harmless
    • View Profile
    • Read more about this member.
    • Donate to Member
Re: HTML editor for beginners
« Reply #8 on: April 08, 2015, 02:15:10 PM »
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.

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.
I learned to say the pledge of allegiance
Before they beat me bloody down at the station
They haven't got a word out of me since
I got a billion years probation
- The MC5

Follow the path of the unsafe, independent thinker. Expose your ideas to the danger of controversy. Speak your mind and fear less the label of ''crackpot'' than the stigma of conformity.
- Thomas J. Watson, Sr

It's not rocket surgery.
- Me


I recommend reading through my Bio before responding to any of my posts. It could save both of us a lot of time and frustration.

wraith808

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 8,406
  • "In my dreams, I always do it right."
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #9 on: April 08, 2015, 02:47:40 PM »
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

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #10 on: April 08, 2015, 03:24:12 PM »
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)
Tom

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #11 on: April 16, 2015, 12:13:25 PM »
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.
Tom

Renegade

  • Charter Member
  • Joined in 2005
  • ***
  • Posts: 13,220
  • Tell me something you don't know...
    • View Profile
    • Renegade Minds
    • Donate to Member
Re: HTML editor for beginners
« Reply #12 on: April 16, 2015, 12:45:55 PM »
Was gravitating towards EditPlus, but have now started using emmet (formerly zen coding) with Sublime Text.

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.
Slow Down Music - Where I commit thought crimes...

Freedom is the right to be wrong, not the right to do wrong. - John Diefenbaker

MilesAhead

  • Supporting Member
  • Joined in 2009
  • **
  • Posts: 7,286
    • View Profile
    • Miles Ahead Software
    • Donate to Member
Re: HTML editor for beginners
« Reply #13 on: April 16, 2015, 01:09:12 PM »
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

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #14 on: April 18, 2015, 05:05:06 PM »
Looks good Miles (I'm having a second look this evening) :up:

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.)
Tom

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #15 on: April 18, 2015, 05:22:55 PM »
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)
Tom

MilesAhead

  • Supporting Member
  • Joined in 2009
  • **
  • Posts: 7,286
    • View Profile
    • Miles Ahead Software
    • Donate to Member
dfm2html
« Reply #16 on: April 19, 2015, 10:28:46 AM »
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

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 10,329
    • View Profile
    • Donate to Member
Re: HTML editor for beginners
« Reply #17 on: May 12, 2015, 08:18:01 AM »
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?).

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).
Tom