Create an HTML file in NotePad++

You can skip this page if you're already using NotePad++. It's just a short practice to show you some of the features of the editor.

Open NotePad++ and type the web page listed below into the blank document that appears.

<html>
  <!-- This is my first web page -->
  <head>
     <title> My first web page </title>
  </head>
  <body>
    This text will appear on the page.
  </body>
</html>

NotePad++ will colour-code your program as soon as it knows what language you're writing. Save the file with an html extension and NotePad++ will realise that you are typing HTML. It will colour-code your text like this:

<html>
  <!-- This is my first web page -->
  <head>
     <title> My first web page </title>
  </head>
  <body>
    This text will appear on the page.
  </body>
</html>

The text to be displayed stays black but the tags become blue and the comments become green.

Colour-coding may sound a childish feature but it is very useful. If you type a tag and it stays black then you know you've made a mistake. If you forget to close a comment then the rest of the page will go green. Try it. You need to know what NotePad++ will do when you make mistakes later.

Later on you will see that NotePad++ will also colour code JavaScript in a similar way.

If you experiment with the text in the editor you will find that matching HTML tags are highlighted automatically. Click on the <body> tag and both it and the </body> tag will be highlighted in blue. This too is trivial in a simple program but becomes invaluable when you have dozens of tags nested inside one another.

[NotePad++ highlights matching tags]

The lines of HTML in this example have been indented to show how they fit into the structure of the page. This is not compulsory, just a matter of programming style to make the page easier to understand. Indents are straightforward in NotePad++, you write the lines as normal, select all the lines you want to indent then press Tab. Use Shift+Tab to unindent blocks of lines.

More tips from Alvechurch Data

More tips from Alvechurch Data

JavaScript development tools

simple programming tools for starting JavaScript Development.

Read More

NotePad++ and FireFox

Using NotePad++ and FireFox together.

Read More

A simple JavaScript program

Writing a simple Hello World program in JavaScript.

Read More