Learning HTML & HTML Editors

[Kalina]

Learning HTML & HTML Editors

Article by Colleen of Kalina Web Designs

I hold a firm belief that all webmasters should practice validating their code, so all advice I give in this article will be centered around that belief.

If you'd like to create/maintain a website, having some HTML knowledge is necessary in order to create a standard page on the web. HTML is also very easy to learn, you can learn the basics in about an hour. First you'll need some type of software/editor to create your html pages. Here's a few to try out (or not) and see which you feel most comfortable with.


Editors for Hand Coding:

Notepad - This easy-to-use HTML editor is FREE (for Windows version 2.0 and above). If you are interested in learning how to code by hand then this editor is highly recommended. It is not cluttered with tons of features and is handy for all scripting languages, html, perl, php, etc.


Advanced Source Code Editors:

These editors are similar to Notepad by allowing you to create your webpage via hand coding, but they help to speed up the process of coding by hand with features such as syntax highlighting, spell checking, global find/replace, code libraries, code snippets, file explorers, page previews, and much more. Ideal for all scripting languages.

AlleyCode - This award winning HTML editor is fast and comes with many great features. You can view your progress in real time using it's Synchro View feature. Another great editor if you want to learn to code by hand, comes with handy code snippets. Supports all scripting languages. Alleycode is FREE!

1stPage - This html editor comes packed with many features you won't even find in the high-priced editors, and it's free. This editor is perfect for everyone, from novice to expert. Some of it's features include, 400+ javascripts, 15 dhtml scripts, 17 perl scripts, 6 html scripts, 2 cgi scripts.

HomeSite - $99 (Free 30-day trial). HomeSite provides a lean, code-only editor for web development. Advanced coding features enable you to instantly create and modify HTML, CFML, JSP, and XHTML tags, while enhanced productivity tools allow you to validate, reuse, navigate, and format code more easily.


WYSIWYG: (What You See Is What You Get)

I do not personally recommend using these. Reason being that the code can be messy, unnecessary tags can get put in, and most importantly, the code will NOT be valid. Valid code is important for a properly functioning, SEO-friendly webpage. Once you learn how to hand code you can use these editors to save time and just go over the source code and clean it up to be sure it's valid. We will get into valid code later. WYSIWYG is a type of editor/software which allows the user to see the web page as it's being created. In other words, you can drag and drop images exactly where you want them, place text where you want it and not really have to deal with the code side of creating a web page.

DreamWeaver 8-Free to try; $399 to buy. Generally known as the best of the WYSIWYG editors. Comes with an easy to use interface, expanded CSS support, background FTP.

FrontPage 2003 - 30 Day Free Trial, $199 to buy. While being a popular choice and commonly used, FrontPage is also known to produce bloated, messy, invalid code, you're best not to use this program. Features include the ability to upload your web site without requiring an FTP program, hit counters, feedback forms, and more. GoLive - $399. Adobe® GoLive® CS2 software lets you unlock the power of CSS with intuitive visual tools such as prebuilt CSS objects that you can drag and drop to build sophisticated sites. Jump-start your designs by easily converting Adobe InDesign® layouts into Web pages. Or, design Web and mobile content in an advanced, standards-based coding environment.


To learn HTML it's best to make use of the tutorials offered at such sites as W3Schools and WebMonkey. That's how I learned. Also be sure to check out these excellent HTML resources, Website Tips and HTML Goodies. To do the HTML tutorials I would advise using Notepad or one of the advanced source code editors listed above. Learning the HTML basics is easy and should take less than an hour.

Written By Colleen Chard. Owner of Kalina Web Designs.

[Aaron]

Excellent resource. Thanks.

Another good editor is NotePad++. It does syntax highlighting as well. I love it and you can use it in place of notepad as well.

[Kalina]

Originally Posted by Aaron

Excellent resource. Thanks.

Another good editor is NotePad++. It does syntax highlighting as well. I love it and you can use it in place of notepad as well.

Thanks, Aaron. I wrote this a few months back.

That will be my first and last article.

[Brian]

I'm a fan of Textpad, myself.

[Aaron]

Originally Posted by Colleen

Thanks, Aaron. I wrote this a few months back.

That will be my first and last article.

So why is this the last article you will write?

[Kalina]

Originally Posted by Aaron

So why is this the last article you will write?

I don't like writing, I don't think I am that good at it. This article was encouraged by a business associate so I tried it out.

[LazyJim]

I use textpad too

[LazyJim]

Is there any text-based editors that visually represent HTML as a heirachical tree of objects that you can easily edit?

- Like a cros between a WYSIWYG, Visual Studio and Firefox DOM Inspector ??

[noob_0001]

LazyJim, have you tried NVU?

[LazyJim]

not before no,
I've just had a look and it doesn't do as I said, it does look quite nice though, although I do not wish to use it now I might keep it incase!

It has two features that come close to what I'm after, the status bar shows the current context as a list of tags (e.g. <body> <div> <p> <link> for a link inside a p inside a div) and each tag on the list as a menu when you right-click offering a few functions to apply to that element, once of which is the second feature I like - "Advanced Property Editor". This demonstrates partly what I've been looking for with the tables of property = value pairs. However it is restricted, and clearly shows that NVU is not designed for the professional (simply bacause this feature is prefixed with "advanced").

[Pretend]

Dreamweaver sucks. I hate it.

I use textpad, easiest to use.

I used to have some HTML tutorials, probably still have them somewhere. Course, who doesn't? hah.

[dynn]

i hope this is not your last article....keep it up..

[sims2]

Nice article. You do great articles like dynn just said!

[Kalina]

Thanks to both of you. It's great to know some people think so.