Using Notepad++

For Windows users, Notepad++ will probably be one of the most important software applications used especially for web development. It is fundamentally the built-in Notepad program, but with a number of functional enhancements and new features specifically designed for the programmer in mind. Here we will provide a walkthrough that outlines the basic features of Notepad++, while simultaneously going through the process of creating a very basic HTML file that you will later use. The process of creating a CSS can be applied in a similar fashion.

If you're using a Mac or a Linux operating system, you may skip this section. However, make sure that you are familiar with the text editor that you will be using.

Let's first start by launching Notepad++. Execute Notepad++ by double-clicking on the program with an icon that looks like this:

You should now see the Notepad++ main window.

Just by looking at the main window, one can observe that Notepad++ is an interesting program. By default, line numbers are specified along the left-hand side of the document. A toolbar specifying commonly used commands is located near the top of the Notepad++ window. What's even more intriguing is the use of tabs to keep track of the documents open in Notepad++. Both of these things will be covered in greater detail.

Toolbar

As mentioned, commonly used commands are available as shortcut buttons on the Notepad++ toolbar. (If you prefer, these commands can also be found within the menus of Notepad++.) By simply knowing what these toolbar buttons do, you should be well on your way to creating and modifying files using Notepad++. We will point out the ones that you should definitely know.

New - Creates a new file (in a new tab).
Open... - Opens an existing file that you specify (in a new tab).
Save - Saves the currently active file to the location you specified (if not specified, it will prompt you to specify one).
Save All - Saves all opened files within the window to the locations you specified (if a location has not been specified, it will prompt you to specify).
Close - Closes the currently active file.
Close All - Closes all opened files within the window.
Print Now - Prints the currently active file using default printer settings.
Cut - Removes the selected text specified and posts it to the clipboard.
Copy - Copies the selected text specified to the clipboard.
Paste - Applies the contents posted on the clipboard to the current position of the file.
Undo - Undoes the last modification done to the currently active file.
Redo - Undoes the Undo done to the currently active file.
Find... - Attempts to find the text specified in the file.
Replace... - Attempts to find the text specified in the file and replace it with other text.
Word Wrap - Enables/disables whether lines should wrap to the next line should it reach the end of the window.
Spell-Checker... - Finds and suggests corrections to potentially misspelled words.

Knowing these specific toolbar buttons and what they do will be enough to help you make your way around Notepad++ quickly and efficiently as far as web development is concerned. Remember, the toolbar is your friend! You can also learn and remember the shortcut key combinations to these commands as well.

Tabbed layout

Multiple documents may be open under one Notepad++ window. At least one tab must exist, otherwise no specific file can be actively shown. Tabs are created when new files are created or if existing files are opened.

The currently active tab points to the file that is currently active and in view. Here, the unsaved tab "new 2" is currently active and shows the contents of this particular file.

To close a specific tab:

Select the tab to make it active.
Either press , or press the button located at the top-right of the window to close the tab and the file.

Creating an HTML file

We will begin applying the features of Notepad++ by creating a simple "Hello World" HTML file.

Start by creating a new, unsaved file. This can be done by pressing New, or using the CTRL+N keyboard combination. You should see be in a new tab with nothing in the work area whatsover.
Type the following HTML code into the work area.
```
<!DOCTYPE html>
<html lang="en">
Hello World!
</html>
    
```
HTML files contain a start and an end tag that respectively describes the beginning and end of the HTML file. HTML files also utilize the <head> tag to disclose a web page's important heading information such as its title, and the<body> tag to contain all of the mainly visible content in a web page. For the goal of simplicity, we will omit these tags in this example. HTML tags will be covered with greater detail in Tutorial 2.
The window should now look like this:
Now, it's time to save the file. Press Save, or use the CTRL+S keyboard combination. A "Save As" dialog box should appear.
Here, specify where you would like to save this file. In this example, the Desktop will be used. Name the file "hello" (without the quotes) and change the "Save as type:" drop-down selection to HyperText Markup Language File (*.html, *.htm, *.shtml, *.shtm, *.xhtml), as depicted in the above screenshot. Selecting this particular type will append a ".html" to the end of the file name by default; this is called a file extension. Press the Save button to save the file. Once saved, the tab's display will change to reflect the new file name.

One observation that you will note when the file is saved is the new highlighting of syntax in different colors. This syntax highlighting is determined by the format of the file. Since this file carries the .html file extension, HTML syntax highlighting will become visible. The same goes for CSS files; if a file is saved with the .css file extension, CSS syntax highlighting will be applied.

If hello.html or another file was closed for some reason and that file needs to be edited, you will have to re-open it. In Notepad++, this can be done using Open

Open, or by pressing the CTRL+O keyboard combination.

Using Firefox

Firefox is a great web browser that will mainly be used to show how HTML and CSS affects the overall formatting and content of a web document. A secure and simple browser to use, Firefox adheres to strict web standards to ensure that pages are shown naturally and correctly. Firefox is used by many users regularly; if you are familiar with Firefox, feel free to skip this section. If you're new to Firefox, we'll provide what you need to know in order to get started.

To launch Firefox, double-click on the program with an icon that looks like this:

You should now be seeing a Firefox browser window, assuming that all addons are updated and Firefox-related administrative tasks have been completed. As with all browsers, you can click hyperlinks within currently visible web pages that will (probably) take you to a different page.

Tabbed browsing

Like Notepad++, Firefox uses tabs which allow you to have multiple pages open within one window. Each tab in itself can be considered as a self-contained browsing session.

If more than one tab is available for one window, you can close the tab by pressing Firefox Tab Close

, or by going to the File menu and selecting Close Tab. To open a new tab, press Firefox New Tab

, or go to the File menu and select New Tab.

Toolbar

Like with Notepad++, familiarize yourself with Firefox's main toolbar. The Firefox toolbar should look something similar to this:

Here, we will highlight parts of the toolbar that you should know.

Back - Go back to the previous page in the session (like Undo).
Forward - Go to the next page in the session (like Redo).
Refresh - Reloads the current page.
Stop - Stops loading the current page.
Home - Navigate to the home page that is currently specified.
Address Bar - Displays the web address and favicon of the current page as well as any feed or bookmark information. You can also type any web address here to navigate to the page that it refers to.