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.

MS Access technical tips

Visual FoxPro technical tips

General Tips

 

More tips from Alvechurch Data

Search page for Alvechurch Data

Searching a web site with JavaScript

Read More

Site Map

Site map of the Alvechurch Data site

Read More

Javascript while loops

JavaScript do and while loops

Read More

Javascript for loops

Javascript for loops

Read More

Repetition in Javascript

JavaScript structures for repetition

Read More