PSPad Guide (2/2)

March 24, 2008

Creating files

Let's create a new file to test some of the features mentioned before:

Creating a new file in PSPad

  1. Go to File arrow New File and select XHTML.
  2. A new XHTML will appear with some pre-generated code.

The code in this tutorial is just for demonstration purposes, it's not necessary to already understand it. PSPad should now look like this:

A new XHTML file in PSPad
A new XHTML file in PSPad

Code explorer

Let's test the code explorer:

Using PSPad's code explorer

  1. First enable the active line highlighting I've you've disabled it previously (View arrow Active Line).
  2. Click the green tree-like icon in the toolbar at the top.
  3. The code explorer will appear on the right side, displaying the logical structure of the document's code.
  4. When expanding the Head and clicking on the different items you will notice that the active line jumps to the corresponding position in the code.

This is very useful for quickly navigating in huge documents rather than scrolling by hand.

Quick navigation with PSPad's code explorer
Quick navigation with PSPad's code explorer

Automatic code completion

Suppose we want to add a text input field to our XHTML page but we're too lazy to type it out. Nothing simpler than that with PSPad's automatic code insertion:

Using PSPad's automatic code insertion

  1. Move your cursor between the <body> and </body> tags.
  2. Press Ctrl+Space.
  3. You will now get a huge list of HTML tags (the list's content depends on what kind of file you're working in).
  4. Press T and then E.
  5. While typing the list updates itself and shows you what's available for what you've entered.
  6. In our case we already have the tag we want: <textarea>.
  7. Press 2 times enter to insert the tag.

Quite a neat trick and also helpful for looking up tags if you don't know each and every one by heart.

Code inserted with PSPad's auto insertion
Code inserted with PSPad's auto insertion

Saving

Maybe you have noticed a red arrow in the top left corner of your file tab. This means that your file hasn't been saved since the last made change. Let's save our file then:

Saving your PSPad file

  1. Go to File arrow Save As and choose a location you can remember easily.

Web page preview

Now that our work is saved it's time to preview it in a browser. Although PSPad has its own preview tool you're better off previewing your page in a real web browser since that's how it's ultimately going to be viewed.

Previewing your page

  1. Start up your favorite web browser, go to File arrow Open and select the file you just saved.

If it worked out right you should get something like:

Preview of your page
Preview of your page

Code verification

The web page looks like it's displaying correctly. To be 100% sure let's check it for errors with PSPad's included code verifier:

Code debugging

  1. In PSPad with your document active select HTML arrow Check HTML code.

In case you're getting error messages the code verifier will generally mention in which line errors happened and how to fix them. Try to insert some errors yourself by deleting random things and see how the code verifier reacts.

PSPad's integrated code verifier (HTML Tidy)
PSPad's integrated code verifier (based on HTML Tidy)

Make sure your file is error-free, save it and close it. We're now going to use PSPad's external file search:

External file search

External file search

  1. Go to Search arrow Search / Replace in Files.
  2. Enter textarea in the Text to Find field.
  3. Make sure Replace With, Whole Words Only and Case Sensitive are deselected.
  4. Under Search Scope choose Selected Directory and select the directory where you saved your file to.
  5. Make sure Include Subdirectories is deselected.
  6. Press Ok to start the search.

PSPad should now have found the text string textarea in your file. It will list all search results in the bottom of the screen. By double-clicking a search result the corresponding file will be opened and the active line will jump to where the match occurred.

External file search results
External file search results

Final words

That's it! I hope you enjoyed this tutorial and got a feel for how powerful a coding editor PSPad is. Best of all it's free!