HTML Editors & Tools

From the previous chapter we learned that HTML is a markup language used for creating web pages. When working on creating web pages you will need the following tools and programs:

  • Text or HTML editor for writing and editing source code
  • Browser for checking results
  • Validator - a special program checking the validity or syntactical correctness of a source code

Let’s speak about them in details.

Editors

There is a number of professional editors web developers use for coding. However, not every editor could satisfy all your needs. So, a good HTML editor must have the following functionality:

  • Syntax highlighting - displaying text, especially source code, in different colors and fonts.
  • Tab view support - allowing keeping multiple web pages open in tabs at the same time.
  • Checking HTML document for mistakes.
  • Wrapping code - hiding large fragments of code leaving only a line.

The most popular HTML editors are those listed below:

As you are just starting coding, you can use Notepad (PC), simple and easy to use HTML editor. Let’s have a look at how to use it.

Step 1. Open Notepad on your computer

Go to: Start ---> All Programs ---> Accessories ---> Notepad.

Step 2. Write your code

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Simple example</h1>
    <p>Some text you want to show here</p>
  </body>
</html>

Result

Step 3. Save HTML document

Go to "File" in Notepad menu and choose "Save as", give a name to your document, using either the ".htm" or the ".html" file extension. (We recommend to use ".html" file extension). Make sure you set the encoding to UTF-8 to avoid problems with code. Save the file to the basic folder you should create beforehand to store all your HTML documents.

Step 4. Check the HTML file in a browser

Open your HTML file in a browser (right-click on the file and choose "Open with")

Browser

You will need a browser to check HTML files. To start with, any browser, Google Chrome, Opera, Firefox or Internet Explorer will be enough, but later on you will need all of them. The thing is that every browser has its own characteristics, and you will need to check your code in each of them.

Validator

Checking validity of HTML code is an important part web pages development process. Special programs or services, validators, are used to check the validity or syntactical correctness of a fragment of code or document.

The most popular online service is validator.w3.org. Enter the URL of a web page, and the service will check and reveal the mistakes in the code if any, or get back а message that your document is valid.

For checking validity of local files you can use special programs, for example, Tidy. Some editors (for ex. PSPad) have built-in validator, so you can check your code directly in them.