HTML in 10 Steps or Less- P15 ppt

To create a new named document, choose File ➪ Open or click the Open button see Figure 117-2.. To open an existing file, choose File ➪ Open from the menu or click the Open button to disp

Creating and Opening Files

When you first open TextPad, you see a new blank file You also see various interface elements at your disposal to generate HTML files

1. To create a new unnamed document, choose File ➪ New or click the

New Document button (see Figure 117-1) on the tool bar You will see a blank screen awaiting your code

Figure 117-1: TextPad’s New Document button

2. To create a new named document, choose File ➪ Open or click the

Open button (see Figure 117-2) This displays the Open File(s) dialog box

Figure 117-2: TextPad’s Open button

3. In the field that lists all your folders (see Figure 117-3), double-click

a folder where you want to create the file

Figure 117-3: The Open File(s) dialog box

note

• If you’re like one of the

authors, you don’t know

what filename you’re going

to give a file until you’ve

finished with it If you’re like

the other author, you know

what you’re going to name

the file right away, making

this step your first choice.

caution

• TextPad’s default file

exten-sion is txt unless you

specify otherwise.

• To select multiple files, hold down the Ctrl button to select each in turn, or the Shift button to select a range of files.

Figure 117-4: The Files of Type list

6. Click Yes in the message box that appears, which tells you that the

file does not exist and asks whether you want to create it

7. To open an existing file, choose File ➪ Open from the menu or click

the Open button to display the File Open dialog box

8. Locate the file you want to open from within your file system and

click OK

cross-reference

• You can instantly fill a new file with structural tags of

a blank HTML document using TextPad’s clip libraries To learn more, see Task 128.

Moving Around in Text

Programmers don’t touch the mouse much Why should they? When you code, you type a lot so why should your hands ever leave the keyboard? TextPad, like any good text editor, provides keystrokes that can move the cursor quickly through your code so your fingers don’t have to waste precious seconds moving to the mouse to perform basic functions (Well, almost never.)

1. To move the cursor to the beginning of a file, press Ctrl+Home (see Figure 118-1)

Figure 118-1: Pressing Ctrl+Home jumps the cursor to the start of the document

2. To move the cursor to the end of the file, press Ctrl+End (see Figure 118-2)

Figure 118-2: Pressing Ctrl+End jumps the cursor to the end of the document

3. To move the cursor forward one word (or tag, attribute, or value), press Ctrl+W

4. To move the cursor back one word, press Ctrl+B

• To get a feel for the fea-tures discussed in this task, open a hefty HTML file

to play with Any HTML file saved directly from the browser while surfing to any site will do the trick.

• Press the Home key to move to the beginning of

a line and End to move to the end of a line.

• To move forward or back-ward a single character, or

up and down a single line, press the Right, Left, Up, and Down arrow keys, respectively.

• To view line numbers, select View ➪ Line Numbers from the menu or press Ctrl+Q, followed by the L key.

7. To move the cursor to the start of the previous paragraph, press

Alt+↑

8. To scroll down one line, press Ctrl+↓

9. To scroll up one line, press Ctrl+↑

10. To move the cursor to a specific line number, press Ctrl+G to open

the Go To dialog box and enter the line number

cross-reference

• Now that you know how to move the cursor around quickly, you could learn how to actually select the text See Task 119.

Selecting Code

Creating code is a matter of typing it out But after that you need to be able to manipulate it In order to edit the contents of your HTML file, you need to learn how to select it TextPad provides the following methods for selecting code

1. As you’re likely used to doing in your favorite word processor, select-ing code with your mouse is as easy as holdselect-ing the left button down

at the start of the code you want to select and dragging the pointer to the end of the selection (see Figure 119-1)

Figure 119-1: Dragging across a selection to highlight it

2. To select a single word, double-click it with the left mouse button (see Figure 119-2)

Figure 119-2: Double-clicking a word to select it

3. To select a whole line, move the cursor to the left margin until it changes to a right-pointing arrow, then double-click at the start of the line

4. To select a whole paragraph, triple-click in the left margin at the start

of any line in the paragraph

5. To select the entire document, hold the Ctrl key and click anywhere

in the left margin of the document Alternatively, press Ctrl+A or select Edit ➪ Select All from the menu (see Figure 119-3)

• You can also click the mouse at the start of the selection, hold down the Shift key, and then click the mouse at the end of the selection.

• You can use the Shift key

in conjunction with any of the keystrokes discussed

in Task 118 to select a word, paragraph, or line

at a time.

Figure 119-3: Selecting the entire document

6. To select code with the keyboard, hold the Shift key down while

using the arrow keys to move the cursor to the end of your selection

7. To cancel your selections, press the Esc key

cross-reference

• Because HTML coding can become repetitious, you’ll probably be doing a lot of copying and pasting That’s

a function of the Clipboard, covered in Task 120.

Using the Clipboard

TextPad offers the same Clipboard functionality you’re accustomed to in other applications (Ctrl+C = Copy, Ctrl+V = Paste, and Ctrl+X = Cut) TextPad also provides a few unique Clipboard functions you’ll wish your word processor possessed

1. With no code selected, copying the line the cursor is currently on is a simple matter of choosing Edit ➪ Copy Other ➪ Line Cut the line

to the Clipboard using Edit ➪ Cut Other ➪ Line

2. To copy the word the cursor is currently in, choose Edit ➪ Copy Other ➪ Word Cut the word to the Clipboard using Edit ➪ Cut Other ➪ Word (see Figure 120-1)

Figure 120-1: The Copy Other menu

3. To add more code to whatever you currently have in the Clipboard buffer, select a range of code and choose Edit ➪ Cut Other ➪ Cut Word Append, or Cut Line Append, or Edit ➪ Copy Other ➪ Copy Line Append or Copy Word Append

4. To copy a line of code from one document and paste it into a new document, including the necessary tags to render an HTML document, choose Edit ➪ Copy Other ➪ As a HTML Page (see Figure 120-2)

notes

• TextPad not only generates

the primary structural tags

for an HTML document but

includes embedded CSS

code.

• If the text you copy is

for-matted using external CSS

code, TextPad can’t include

the formatting.

• If you want to copy or cut only part of a line, use Word If you want the entire line, use Line.

Figure 120-2: Code copied into a new document with all necessary document tags

5. To paste text from a browser and have it maintain its HTML

format-ting, select the text in the browser window, move to TextPad and choose Edit ➪ Insert ➪ Paste HTML (see Figure 120-3)

Figure 120-3: Text copied from a browser and pasted with the appropriate HTML formatting

cross-reference

• To learn more about Cascading Style Sheets, see Part 9.

Managing Files

TextPad allows you to manage multiple files using the Manage Files dialog box From this little interface, you can duplicate, delete, and rename files, as well

as update their timestamps All of these functions come in extremely handy when you work within a large Web site

1. To access the Manage Files dialog box (see Figure 121-1), click the Manage Files button on the toolbar (it looks like a filing cabinet, fourth button from the left) or choose File ➪ Manage Files

Figure 121-1: The Manage Files dialog box

2. Click the Browse button to locate the file you want to work with

Then click OK to accept the file you select

The following steps assume you’ve selected some file in the Manage Files dialog box

3. To copy the selected file somewhere else in your folder structure, click the Copy button to display the Copy dialog box (see Figure 121-2)

Figure 121-2: The Copy dialog box

4. From here, click the Browse button to choose where you want to copy the file Click OK to complete the copy

5. To delete a file, click the Delete button to display the Delete dialog box (Figure 121-3) Click the OK button to confirm the deletion

note

• If you have a document

open, its path will appear

in the Files field.

caution

• You can’t rename multiple

files simultaneously.

• To copy multiple files, click the Browse button in Manage Files dialog box In the Open dialog box that appears, locate the folder containing the files you want to copy and then either hold down the Shift key to select a range of files or press the Ctrl key

to select noncontiguous files This method can also be used to delete and update the time-stamps of multiple files.

Figure 121-3: The Delete dialog box

6. To rename a file, click the Rename button to display the

Rename/Move dialog box (see Figure 121-4)

Figure 121-4: The Rename/Move dialog box

7. Enter a new filename in the To field to rename it in the same folder

as the original file, or click the Browse button to move the file to a different folder

8. To update the file’s timestamp, click the Touch button and then click

OK in the Touch dialog box to change the document’s last modified date and time to the current system settings

cross-reference

• TextPad has a number of interface elements for working with multiple files See Task 126.

Using the Find and Replace Tools

Find-and-replace functionality is vital for Web site maintenance You might have multiple documents with multiple instances of identical link code and now you have to change all the links to a specific page throughout the site Don’t panic — TextPad’s find and replace functionality is second to none

1. To find code, choose Search ➪ Find from the menu to open the Find dialog box (see Figure 122-1)

Figure 122-1: The Find dialog box

2. In the Find What field, type in the search string, or choose a previous string from the drop-down list

3. Set the options you want to control the search

4. Click the Find Next button to scroll to a found instance of your search criteria If the string is not within the document, TextPad prompts you that the string was not found

5. To replace code, choose Search ➪ Replace from the menu to open the Replace dialog box (see Figure 122-2)

Figure 122-2: The Replace dialog box

notes

• The input fields of both the

Find and Replace dialog

boxes are drop-down lists

that store every string

you’ve used in a given

session Just click the

arrow on the right side

of the field to reselect a

previous search string.

• Any text you have selected

in the document appears in

the Find What field when

you invoke the Find dialog

box Otherwise, it opens

with the last search string

you looked for.

• Once the Find dialog box

is closed, you can continue

to search for the last string

you entered using the

Search menu Find Next

searches ahead of the

current cursor position

in a document, while

Find Previous searches

backward from the current

cursor position.

• The Replace button

replaces the current

selection, so be sure to

press Find Next first.

• TextPad has a way to locate matching tag brackets To learn more, see Task 124.

the currently active document, a selected range of text, or across all currently open files

8. Click Find Next to select the next instance of the string in the

docu-ment, and click Replace to change that instance Clicking Replace Next replaces the current selection and jumps to the next occurrence

Clicking Replace All replaces all instances of the string within the current scope

Searching for Strings in Multiple Files

If you need to know all the occurrences of a particular string within a given set

of files, use the Find in Files command This command generates a report that details each occurrence of the string by filename and line number

1. Choose Search ➪ Find in Files from the menu bar to open the Find

in Files dialog box (see Figure 123-1)

Figure 123-1: The Find in Files dialog box

2. Enter the search string in the Find What field

3. Enter the file extension for the files you want to search in the In Files

field, preceded by an asterisk For example, *.html or *.htm.

4. Click the Browse button to open the Browse for Folder dialog box (see Figure 123-2) From here, locate the folder you want to search The folder’s pathname is entered in the In folder field

Figure 123-2: The Browse for Folder dialog box

• Each of the fields in the Find in Files dialog box are drop-down lists you can click to reselect previously used values.

• To open only some of the files, select their lines in the report first.

Figure 123-3: An example of a report using the All Matching Lines option in the Report Details section

6. To open all the files returned in the report, right-click the report

window and choose Open All from the context menu

cross-reference

• You can find and replace strings across multiple files too (see Task 122).

Finding Matching Brackets

Coding languages, especially HTML, are loaded with brackets There are times when finding an opening bracket’s closing match can give you a headache TextPad, like any good coding tool, has the solution

1. To find a matching bracket, place the cursor on the left side of the bracket you want to match, as shown in Figure 124-1

Figure 124-1: Placing the cursor to the left of the bracket

2. From the menu bar, choose Search ➪ Match Bracket, or press Ctrl+M If there is a matching bracket, the cursor will jump to it and select it (see Figure 124-2)

Figure 124-2: A selected bracket

notes

• In TextPad, (, [, {, and <

represent potential opening

brackets The characters ),

], }, and > are the

corre-sponding closing brackets.

• If the matching bracket is

found forward of the cursor

position, TextPad also

selects the brackets If the

matching bracket is found

behind the cursor position

only the intervening text is

selected.

cross-reference

• If you’re like us, you appre-ciate a good spell-checking feature See Task 125 to find out more.

bracket in the document

5. To select all text between brackets, place the cursor on the left side of

the bracket you want to match, and press Ctrl+Shift+M If TextPad locates a matching bracket, all text in between will be selected (see Figure 124-3)

Figure 124-3: Text selected between brackets

Using the Spelling Checker

TextPad can check the spelling of your document against 11 language dictionaries, including Legal English and Medical English dictionaries

1. To check the spelling of a document, open the file and choose Tools ➪ Spelling from the menu bar If TextPad finds a misspelled word, it launches the Spelling dialog box (see Figure 125-1) The Spelling dialog box displays the misspelled word in the Not in Dictionary field and its closest guess in the Change To field

Figure 125-1: The Spelling dialog box

2. If the correct spelling is available in the scrolling list of options beneath the Change to: field, select it and click the Change button

3. If the correct spelling is not available, enter it manually into the Change To field and click the Change button

4. To change all occurrences of the misspelled word, click the Auto-Correct button

5. To add the word to the dictionary, click the Add button

6. To undo the last changed word, click the Undo Last button

7. To change the current working dictionary, click the Options button

to open the Spelling Preferences dialog box (see Figure 125-2) Here you can change the current working dictionary and modify the spell-checking preferences

8. To edit a dictionary, click the Edit button in the Spelling Preferences dialog box to display the Edit Dictionary dialog box (see Figure 125-3)

note

• If you want to download

other dictionaries, go

to www.textpad.com/

add-ons/dictionaries.html.