5

I am new to HTML programming. Right now I am using Notepad++ to write HTML code and then save it. Then I open that in Firefox and see it what the output is.

Is there any sort of HTML editor or compiler (compiler is not the proper word, I know) which:

  1. checks my HTML code for errors
  2. just by clicking some "run" button allows me to see the output
  3. runs on Windows and Linux
  4. is free and not complicated to use for beginners
  • Not fully fitting your requirements, but there's a plugin for Notepad++ offering HTML preview. This would fit your items 1+4, and you could continue using your "known environment". – Izzy Jun 8 '14 at 10:50
  • html is not a programming language, hence it has no compiler. Instead is has renderers, that's browsers – phuclv Jun 8 '14 at 13:18
  • usually, editors don't have run buttons, instead you just open up your browser and type in the URL/click the bookmark – markasoftware Jun 9 '14 at 1:28
  • I use Codelobster It is free and it has great HTML/CSS/JS autocomplete. – Stas Ustimenko Apr 19 '16 at 8:26
7

A dedicated editor for web dev is Adobe Brackets, an awesome piece of open-source software. Here's some features it has you won't find in other editors:

  • Live preview: You can set it up so that when you make a change in the editor, the change will appear immediately in the browser
  • Quick edit: You can access the CSS styles affecting an element by simply putting the cursor on the element, and then pressing CTRL-E. You can also use it to have easy color selectors, and probably other things I don't even know about yet
  • It's written in web languages: Once you become a more experienced web developer, you will be able to make edits to the editor itself without learning new languages

It also has a lot of plugins available, and it is quite well polished and updated often. You should try it!

4

My ultimate favorite IDE = Netbeans

Customized Theme: enter image description here

Basic Theme: enter image description here

It's very plain, the more you use it, the more you learn it. Just hit open and open you html files, or drag&drop them from your desktop and you ready to code. Or, start coding right and put your files in a project and let Netbeans handle it for you. Moreover, the editor is customizable. You can change font, background colors, size etc. Got good community support and is Open Source.

checks my HTML code for errors: - Got it and very well done + it formats your HTML codes and show tags in colors.

just by clicking some "run " button I am able to see the output: it got it's own integrated browser in a separate panel to display the result + can be linked with your favorite browser e.g. Firefox, Chrome. If you hit run Firefox will fire-up and run your html page.

runs on Windows and Linux: Checked. Win + Mac + Linux.

it should be free and not complicated to use for beginners: Yup, Free. For beginnings? hmmm, means no complicated stuff, so don't use the advance features available. Netbeans can take you from newbie to pro, the more you use it the more you will learn about it which can save you lots and lots of time in the future. (Let's say you want to change all <span> to <div> similar to notepad++, you can find&replace using text, regex, wild card etc, you can change in files/directory/project)

IMO The best way to learn is to code it yourself. IDEs that allow you to use visual means to build your HTML pages are not very good way to master HTML. Netbeans can work as an easier notpad++, I appreciate even small stuff, like if you CTRL+LEFT CLICK on a url in one html file and it will take you to that source code of that url html file.

You can use it as a one time quick edit IDE for a single page like notepad++ or in a project based where you compose all of your files under one roof/directory/project/namespace etc. as you call it. It allows opening multiple tabs, same or different panel/windows, different colors for tabs based on to which project they belong to. Plus, open a page in a project by just typing it's name, search for file/keyword in project, navigate from project to file or from the opened file to it's base project.

It has a smart html tags checking, highlight errors, show hints, auto complete, HTML drag&drop panel. I prefer it for learning since it shows your mistakes and give you tooltip to know what do add. Type <html> and hit CTRL+SPACE and it will auto close it for you by adding </html>.

3

You can use Sublime Text editor, with W3C Validator Plugin. Sublime is paid but you can use the trial version without limits. But I would recommend you to buy as its an awesome editor, trust me...

I'll provide a walk through of how this will work..

  • Open Sublime Editor, install Package Control(If you haven't)
  • Now install the W3C Validator Plugin using the package control. You can refer the images below to install the plugin ..

Step 1 - Click on Preferences, Select Package Control

Step 2

enter image description here

Step 3 : Type in W3cValidators and install


Now how to use this?

Step 1 : Click on Tools and select W3CValidators[1] enter image description here

Step 2 : Select the appropriate DOCTYPE you want to validate, lets select HTML5 as of now..

Now whenever you want to validate your document, either go to the menu following the steps above or press the short cut key Win + Ctrl + V (If on widows machine)

And what you will see is

enter image description here

If on error

enter image description here


Click on Open Browser option to open in browser

enter image description here


You will get lots of plugin to auto refresh your CSS, and to live edit.

I would suggest you to download Emmet for sublime, that will boost up your coding speed.

Images Source : My Own PC

  • You can use Tag package (sublime.wbond.net/packages/Tag). It provides linting, tag completion. I use it mainly because of linting, as tag completion is built-in feature in Sublime Text 3. – Kanhu Jun 8 '14 at 9:09
3

Tweakstyle is a relatively new entry in the HTML code editor. It is currently in beta but has a good amount of features.

Uses chrome web tools in the preview pane so you can inspect an element and edit matching rules.

It has a preview pane that updates when you save your HTML file. It provides live updates when you change your CSS.

When you open a HTML file it automatically attempts to open any files linked to it (CSS, Javascript, LESS, SASS). You can have multiple files visible at one time so you spent less time clicking from tab to tab. TweakStyle screenshot

It points out errors by placing a red x next to the line with the error and a tool tip explaining why there is an error.

It runs on Windows, Mac and it runs on various distributions of Linux(has .deb file or a zipped file).

The only requirement that this doesn't meet is the price. It's like Sublime in that it has a price but the only thing you have to deal with is a nag window infrequently. It seems to show up once a day.

1

I already answered here suggesting Atom, anyway if you are a beginner (and even if you are not) you may also like a wysiwyg editor. The acronym "wysiwyg" stands for "what you see is what you get", in general a wysiwig editor lets you view something very similar to the end result since the document creation and implies the ability to directly manipulate the layout and contents of documents without having to type or remember names of layout commands, this means a wysiwig HTML editor provides a simple way of creating web pages without the prerequisite knowledge of HTML, CSS or Javascript (but I advise you to study them so to have clearer ideas on the subject of web documents creation).

In this case I feel to suggest BlueGriffon

enter image description here

BlueGriffon is a wysiwig web editor based on the rendering engine of Firefox, it is available for windows, linux and os x and is filled with tons of powerful features already in free version (and you can get even more if you buy a license).


Side mention:

For completeness, I'd like to mention here KompoZer too.

enter image description here

Just like BlueGriffon, KompoZer is a wysiwyg HTML editor (they both originates from NVU) it's available for Windows, Linux and OS X BUT the latest stable version (0.7.10) dates 2007-08-30 and the latest development version (0.8b3) 2010-02-28... it's practically discontinued.

0

I would suggest Geany as the alternative for Linux. It has the following features:

  • Code highlighting (though it doesn't validate it).
  • It's fast and lightweight.
  • It's user friendly.
  • It has a run button to test your code on a browser.
  • It has many plugins available for it, there is even a plugin for split screen preview and for inserting special HTML character codes, e.g. &nbsp; &gt; &lt;.
  • Runs on both Windows and Linux.
  • It has HTML templates with proper GNU/GPL licensing, and a basic HTML document structure.
  • It's 100% free and open-source.

It's not a proffesional, production-level tool, but it's great for beginners. You may want to give it a try.

0

Since nobody suggested it so far I'm going to introduce you Atom

enter image description here

Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.

Atom is open source, cross-platform (OS X, Windows and Linux) and provides smart autocompletion. Also a w3c validation package is available.


Just a final note: since you need a free editor to work with Windows or Linux, Coda is automatically out of the games here... right?

0

HTML Editor is an online HTML editor with a minimalist approach. Edit your HTML, CSS, and JavaScript code and monitor the instant live preview. This real-time HTML editor is perfect for beginners although it doesn't meet your first requirement.

-1

You can use http://jsfiddle.net/ – it matches your requirements completely.

Free, HTML formatter, WYSIWYG (What You See Is What You Get).

And you can share it with anyone. It's an HTML and Javascript Playground.

enter image description here

  • 4
    Besides the obvious spelling errors (which I'll fix in a subsequent edit), this appears to be an online tool (i.e. no local operation! this may be important, e.g. for privacy or NDA) for Javascript editing. I tried it for HTML, and it did not validate the code. Also, it's hardly suitable for beginners. – mirabilos Jun 8 '14 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.