HTML/CSS Editor

Anupam · 30. Jan 2011, 01:02 PM

I am in need of a good HTML/CSS editor. I am just starting to learn HTML, and CSS both.

It should be able to edit HTML in both WYSWYG style, and source code. It should also support CSS editing, with syntax highlighting and all.

I have tried AlleyCode, but it does not support syntax highlighting for CSS, which makes it difficult to edit for me.

I took a look at standalone CSS editors... ArduoCSS, and SimpleCSS. ArduoCSS is good, but I cannot edit HTML in that.

I tried Amaya, and it comes quite close to my need, but I don't like the way it edits HTML WYSWYG, and source code, in a small split window. If it could open the code in a separate tab, it would have been much better. Also, once I save the code, the next time I look at it, its indentation and appearance appears in a strange way, which is kinda annoying.

Had a look at FreshHTml, and although the website said that it had support for CSS, but I could not find anyway to edit, or open CSS file with it.

So, is there anything better available?

garth · 30. Jan 2011, 01:33 PM

This doesn't have wysiwyg but you might find it useful anyway. I just use this and a browser for html and CSS.

SciTE.
http://www.scintilla.org/SciTEDownload.html
http://sourceforge.net/projects/scintilla/

MidnightCowboy · 30. Jan 2011, 01:42 PM

Quote:

Originally Posted by Anupam

I am in need of a good HTML/CSS editor. I am just starting to learn HTML, and CSS both.

Preparing yourself for becoming an editor I see which is long overdue

In any case, once you've learned this you can help me out by publishing my stuff. I've long since decided that I must be HTML dyslexic

George · 30. Jan 2011, 01:52 PM

Here are few WYSIWYG editors you might wanna try:

http://netobjects.com/html/essentials.html
http://www.kompozer.net/
http://www.w3.org/Amaya/Amaya.html

Full control about your code tho you only get with a text editor. I can recommend these:

http://www.codelobster.com/
http://www.pnotepad.org/

As a beginner it makes sense to start with a WYSIWYG editor and review the code it creates. You will probably switch to text only editing anyways in the end.

Ritho · 30. Jan 2011, 02:58 PM

I started out with KompoZer, it helped me a lot in learning html and css. (Note KompoZer is a newer stable fork of NVU)

I am a big fan of Aptana Studio 2, but it is not wysiwyg. http://www.aptana.com/products/studio2 It is loaded with features, and you can become overwhelmed if you try to focus on them all. But it has an awsome auto suggest tag and code feature for html, and css, plus syntax highlighting. It has a built in visual preview of what you are editing, and it can do the preview in the editor or editors of your choice.

I would also suggest you learn about Firebug, and this plugin http://xrefresh.binaryage.com/.

I use Firebug a lot to figure out "how they did that" on webpages.

I own Microsoft Expression Web 3 & 4 (Got them for free thanks to my wife being a student, and having a membership to MSDNAA.) It is an amazing tool. But I would say that in many ways, I still prefer Aptana Studio. Even if you don't use Aptana to begin with, keep it in mind for later down the road. I have tried many html and css code editors, I still have not found one I like better. Aptana Studio 3 is in beta, but it is not quite there yet. So stick with version 2 until it comes out of beta.

Ritho · 30. Jan 2011, 03:17 PM

Thought I would mention this little trick too. If you add the following code in the <head> of your html document it will automatically refresh every second or every few seconds in the browser.

Code:

<meta http-equiv="refresh" content="1" />

This will refresh the browser every 1sec. Change the 1 to any number you wish

This will work simular to Xrefresh, as you can have the file you are editing with your text html or css editor loaded in your browser, and as soon as you save your preview will be updated.

Be sure to remove the line before you put it online.

Anupam · 30. Jan 2011, 07:04 PM

MC, you don't leave a chance, do you

. Well, I do have a little knowledge of HTML, but only elemental. If I do learn it well, I will surely help out whatever I can

. But, able people are already there like George, Jojoyee, Ritho... they will surely offer better than help than me.

Thanks for the suggestion guys.

I think Programmer's Notepad, and Scintilla are text-based only, with syntax highlighting. I will not be looking into these for now, as I want something with WYSWYG, or preview there itself. But, I will take note of these. I think there are more such editors out there, like PSPad, Notepad++ etc.

I have already tried Amaya, and I wrote about experience with it.

I have Kompozer too, and I thought it did not work for CSS. But, I just looked at its site, and it does support CSS editing, so I will take a look at it to see if it works for me. I also noticed that its development has started again. For a long time, only the stable version 0.7.10 was available, but now beta versions of 0.8 are available. Great!

Jojoyee was talking about Bluefish Editor. I downloaded it, but its giving error on launch. I think it might be because of the latest GTK+ I have on my system, and it might not work with the latest version.

I have downloaded Codelobster and will be taking a look at it.

I had read about Aptana Studio being good, but I had a look at its site, and it was a hefty download, so I was avoiding it. But, I have downloaded it now, and I will check it out too. If its good enough, then why not

.

The article for BF HTML Editor on the site says about HTML-Kit as good. I downloaded it, but didn't like it, and I think it requires plugins to support CSS editing. So, I will leave it out.

Actually, I am learning .NET, and just started with ASP.NET. But, to build websites, you have to encounter CSS, HTML, XML etc. So, trying to get a grip of these.

If anyone knows a good tutorial on CSS, preferably in PDF, do share

.

Thanks again for the suggestions, and tips. I had taken a note about Firebug, when you mentioned it elsewhere Ritho. Thanks about the refresh tips too... will be helpful.

garth · 30. Jan 2011, 09:17 PM

w3schools is an invaluable resource.

http://www.w3schools.com/css/default.asp

Pdf download here

http://www.cssbasics.com/download-all-chapters/

Jojoyee · 31. Jan 2011, 07:02 AM

A very basic and quick start for HTML and CSS before going any deeper:

HTML Tutorial
CSS Tutorial

Anupam · 31. Jan 2011, 07:04 AM

Quote:

Originally Posted by garth

w3schools is an invaluable resource.

http://www.w3schools.com/css/default.asp

Pdf download here

http://www.cssbasics.com/download-all-chapters/

Thanks a lot Garth. I know of W3Schools site, its really a useful one.

And I had already downloaded the pdf from the second link yesterday

.

30. Jan 2011, 01:02 PM	#1 (permalink)
Anupam Moderator Join Date: Jul 2008 Location: India Posts: 9,484	HTML/CSS Editor I am in need of a good HTML/CSS editor. I am just starting to learn HTML, and CSS both. It should be able to edit HTML in both WYSWYG style, and source code. It should also support CSS editing, with syntax highlighting and all. I have tried AlleyCode, but it does not support syntax highlighting for CSS, which makes it difficult to edit for me. I took a look at standalone CSS editors... ArduoCSS, and SimpleCSS. ArduoCSS is good, but I cannot edit HTML in that. I tried Amaya, and it comes quite close to my need, but I don't like the way it edits HTML WYSWYG, and source code, in a small split window. If it could open the code in a separate tab, it would have been much better. Also, once I save the code, the next time I look at it, its indentation and appearance appears in a strange way, which is kinda annoying. Had a look at FreshHTml, and although the website said that it had support for CSS, but I could not find anyway to edit, or open CSS file with it. So, is there anything better available? __________________ Anupam

30. Jan 2011, 01:33 PM	#2 (permalink)
garth Senior Member Join Date: Sep 2010 Location: Here. Posts: 1,451	This doesn't have wysiwyg but you might find it useful anyway. I just use this and a browser for html and CSS. SciTE. http://www.scintilla.org/SciTEDownload.html http://sourceforge.net/projects/scintilla/ __________________ garth

30. Jan 2011, 01:52 PM	#4 (permalink)
George Progradminstrateditor Join Date: May 2008 Location: Frankfurt, GER Posts: 1,253	Here are few WYSIWYG editors you might wanna try: http://netobjects.com/html/essentials.html http://www.kompozer.net/ http://www.w3.org/Amaya/Amaya.html Full control about your code tho you only get with a text editor. I can recommend these: http://www.codelobster.com/ http://www.pnotepad.org/ As a beginner it makes sense to start with a WYSIWYG editor and review the code it creates. You will probably switch to text only editing anyways in the end. __________________ Best regards, George

30. Jan 2011, 02:58 PM	#5 (permalink)
Ritho Foundation Editor Join Date: Apr 2008 Location: Planet Earth Posts: 1,391	I started out with KompoZer, it helped me a lot in learning html and css. (Note KompoZer is a newer stable fork of NVU) I am a big fan of Aptana Studio 2, but it is not wysiwyg. http://www.aptana.com/products/studio2 It is loaded with features, and you can become overwhelmed if you try to focus on them all. But it has an awsome auto suggest tag and code feature for html, and css, plus syntax highlighting. It has a built in visual preview of what you are editing, and it can do the preview in the editor or editors of your choice. I would also suggest you learn about Firebug, and this plugin http://xrefresh.binaryage.com/. I use Firebug a lot to figure out "how they did that" on webpages. I own Microsoft Expression Web 3 & 4 (Got them for free thanks to my wife being a student, and having a membership to MSDNAA.) It is an amazing tool. But I would say that in many ways, I still prefer Aptana Studio. Even if you don't use Aptana to begin with, keep it in mind for later down the road. I have tried many html and css code editors, I still have not found one I like better. Aptana Studio 3 is in beta, but it is not quite there yet. So stick with version 2 until it comes out of beta. __________________ The smallest good deed is better than the greatest intention.

30. Jan 2011, 03:17 PM	#6 (permalink)
Ritho Foundation Editor Join Date: Apr 2008 Location: Planet Earth Posts: 1,391	Thought I would mention this little trick too. If you add the following code in the <head> of your html document it will automatically refresh every second or every few seconds in the browser. Code: <meta http-equiv="refresh" content="1" /> This will refresh the browser every 1sec. Change the 1 to any number you wish This will work simular to Xrefresh, as you can have the file you are editing with your text html or css editor loaded in your browser, and as soon as you save your preview will be updated. Be sure to remove the line before you put it online. __________________ The smallest good deed is better than the greatest intention.

30. Jan 2011, 07:04 PM	#7 (permalink)
Anupam Moderator Join Date: Jul 2008 Location: India Posts: 9,484	MC, you don't leave a chance, do you . Well, I do have a little knowledge of HTML, but only elemental. If I do learn it well, I will surely help out whatever I can . But, able people are already there like George, Jojoyee, Ritho... they will surely offer better than help than me. Thanks for the suggestion guys. I think Programmer's Notepad, and Scintilla are text-based only, with syntax highlighting. I will not be looking into these for now, as I want something with WYSWYG, or preview there itself. But, I will take note of these. I think there are more such editors out there, like PSPad, Notepad++ etc. I have already tried Amaya, and I wrote about experience with it. I have Kompozer too, and I thought it did not work for CSS. But, I just looked at its site, and it does support CSS editing, so I will take a look at it to see if it works for me. I also noticed that its development has started again. For a long time, only the stable version 0.7.10 was available, but now beta versions of 0.8 are available. Great! Jojoyee was talking about Bluefish Editor. I downloaded it, but its giving error on launch. I think it might be because of the latest GTK+ I have on my system, and it might not work with the latest version. I have downloaded Codelobster and will be taking a look at it. I had read about Aptana Studio being good, but I had a look at its site, and it was a hefty download, so I was avoiding it. But, I have downloaded it now, and I will check it out too. If its good enough, then why not . The article for BF HTML Editor on the site says about HTML-Kit as good. I downloaded it, but didn't like it, and I think it requires plugins to support CSS editing. So, I will leave it out. Actually, I am learning .NET, and just started with ASP.NET. But, to build websites, you have to encounter CSS, HTML, XML etc. So, trying to get a grip of these. If anyone knows a good tutorial on CSS, preferably in PDF, do share . Thanks again for the suggestions, and tips. I had taken a note about Firebug, when you mentioned it elsewhere Ritho. Thanks about the refresh tips too... will be helpful. __________________ Anupam

30. Jan 2011, 09:17 PM	#8 (permalink)
garth Senior Member Join Date: Sep 2010 Location: Here. Posts: 1,451	w3schools is an invaluable resource. http://www.w3schools.com/css/default.asp Pdf download here http://www.cssbasics.com/download-all-chapters/ __________________ garth

31. Jan 2011, 07:02 AM	#9 (permalink)
Jojoyee Maestro di Search Join Date: Jul 2008 Posts: 4,295	A very basic and quick start for HTML and CSS before going any deeper: HTML Tutorial CSS Tutorial __________________ Keep It Short and Sweet

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode