HTML in 10 Steps or Less- P16 pdf

To open the clip library, choose View ➪ Clip Library from the menu or press Ctrl+F3.. To select a different book, click the drop-down list at the top of the clip library interface see Fi

Creating Workspaces

When you’re developing a Web site, you typically create a directory (folder) somewhere on your hard drive that contains all your Web site’s files This folder mimics the root folder of your Web server In TextPad, you can save any series of files you’re currently working on as a “workspace.” You could have 5, 10,

or 20 documents open that represent an entire Web site, save them all in a TextPad workspace, and then later open all these related files simultaneously using a single menu command This saves you the hassle of continually using the File menu to open files You’ll see all open documents either in the Document Selector or in the Document Tabs

1. To create a workspace, open all the files you want the workspace to contain

2. Choose File ➪ Workspace ➪ Save As from the menu This opens the Save As dialog box (see Figure 127-1), with the workspace name initialized to the current folder

Figure 127-1: The Save As dialog box with the workspace filename set to that of the current working folder

3. If necessary, browse to where you want to save the workspace file or change the filename, then click Save to save the file and close the dialog box

4. To add or remove files from the workspace, simply open or close files while in the workspace and choose File ➪ Workspace ➪ Save (or Save As)

notes

• Only one file defines a

TextPad workspace It

remembers the state of

all files you open, no

mat-ter where they reside on

your hard drive These

workspace files have the

extension “.tws.”

• If you have a different

work-space currently open, it is

saved automatically and is

closed before the new

workspace opens.

Task 127

• You can choose Save

As from the Workspace submenu to save the workspace with a different filename.

5. To open a saved workspace, choose File ➪ Workspace ➪ Open This

displays a File Open dialog box, from which you can locate the tws file and click the Open button The Workspace submenu also displays recently opened workspace files which you can open immediately (see Figure 127-2)

Figure 127-2: A recently opened workspace listed on the Workspace submenu

6. To close a workspace, choose File ➪ Workspace ➪ Close TextPad

asks if you want to save your changes and closes the workspace and all its related documents

Task 127

cross-reference

• Being able to hop around all the files in a work-space is facilitated by the Document Tabs and Document Selector (see Task 126).

Working with the Clip Library

TextPad’s clip library is an interface that gives you access to predefined snippets

of code These snippets are organized into files, which TextPad calls “books.” These books typically refer to a particular programming language, or pertain to a specific aspect of a programming language TextPad comes with a number of clip library books installed, most notably one for inserting HTML tags and another for HTML character entities

1. To open the clip library, choose View ➪ Clip Library from the menu

or press Ctrl+F3 The clip library appears on the left side of the TextPad application window (see Figure 128-1)

Figure 128-1: The clip library

2. To select a different book, click the drop-down list at the top of the clip library interface (see Figure 128-2)

notes

• When you first install and

run TextPad, the clip library

is visible by default You’ll

know it’s open if you see a

checkmark next to Clip

Library in the View menu.

• As of this writing, the code

in the HTML clip library is

compliant with HTML

4.01/XHTML 1.0 Newer

clip libraries are available

for download from the

Web site at www.wiley

.com/compbooks/

10simplestepsorless

(see Task 130).

Task 128

• Want to quickly start a new HTML document? Open a new blank file, open the clip library, choose the HTML Tags book, and click the Blank Page clip.

• For a clip that represents a container tag, select text in the document window and then insert the clip Doing

so wraps the tags around the selected text.

Figure 128-2: The clip library’s drop-down list

3. Use the scrolling list of clips below the drop-down list to locate the

one you want to insert (see Figure 128-3)

Figure 128-3: The scrolling list of clippings Mousing over a clip in the scrolling list displays a tool tip containing the code that will be inserted (see Figure 128-4)

Figure 128-4: A clipping’s tool tip

4. To insert a clip, double-click its name in the scrolling list, select the

clip, and press Enter Alternatively, right-click the clip and choose Insert from the context menu

Task 128

cross-reference

• To edit a clip, see Task 129.

Editing Clip Libraries

You can edit existing clips, as well as create whole new clip libraries, all with a minimum of effort, using the clip library’s context menu

1. To edit an individual clipping, right-click its name in the scrolling list and choose Edit from the context menu This opens the Clip Library Entry dialog box (see Figure 129-1)

Figure 129-1: The Clip Library Entry dialog box

2. In the fields provided, edit the part of the clip that appears before the cursor location, as well as the code to be placed after the cursor loca-tion Clips that don’t insert wrapping content will only show code in the upper field

3. To rename a clip, choose Rename from the context menu to open the Clip Library dialog box (see Figure 129-2) From here, simply enter

a new name for the clip

Figure 129-2: The Clip Library dialog box

caution

• A clip book must have the

extension tcl.

Task 129

• The Replace Selection check box is selected by default, and the Text After Cursor or Selection field grayed out, allowing you

to create only a clip that inserts a single item

or replaces a selected item To create a clip that wraps content around a selection, deselect the Replace Selection check box to activate the Text After Cursor or Selection field.

4. To delete a clip, choose Delete from the context menu TextPad

displays a prompt asking you to confirm the deletion

5. To add a new clip to a book, right-click the scrolling list of clips and

choose Paste New Entry from the context menu This displays the Clip Library Entry dialog box again with the current contents of your system’s Clipboard entered in the Text Before Cursor or Selection field If the Clipboard is empty, the field is blank awaiting your input From here, simply enter a name for your clip and content

in the appropriate fields

6. To edit an entire book, right-click the book’s name in the drop-down

list and choose Edit Book This opens the text file for the entire book

in the application window You can manually edit the document now

Simply edit the entries and choose Save from the File menu when you’re done

7. To create a new empty book, choose New Book from the context

menu TextPad displays a Save As dialog box, prompting you for its filename, followed by a prompt for the name to be displayed in the drop-down list (see Figure 129-3) From, here you can right-click the scrolling list and choose Paste New Entry to create new clips as described in Step 5

Figure 129-3: Prompts when creating a new book

Task 129

cross-reference

• Download new clip libraries from the TextPad Web site (see Task 130).

Downloading Clip Libraries

New clip libraries aren’t necessarily something you have to create yourself There are many available libraries for download at the TextPad Web site — specifically, about HTML/XHTML tags, predefined color name values, CSS properties, and JavaScript libraries

1. Go to www.textpad.com

2. Click the Add-ons link at the top of the page (see Figure 130-1)

Figure 130-1: The Add-ons link

3. Click the Clip Libraries link on the subsequent page (see Figure 130-2)

4. Read the descriptions of the clip libraries offered from the table and then click the link on the left side to begin the download process

5. Once the zipped file is downloaded, choose Configure ➪ Preferences from TextPad’s menu to open the Preferences dialog box Choose Folders to see what folder on your hard drive TextPad uses to access the clip libraries (see Figure 130-3)

note

• Clip libraries are

down-loaded in zipped archives,

requiring a program like

WinZip to unpack them.

You can get a free

evaluation version of

WinZip from www

.winzip.com.

Task 130

• When using WinZip, all you have to do is double-click the zip file’s icon to open a WinZip application window From here, you can drag and drop the clip library file (*.tcl) into the folder using Windows Explorer.

Figure 130-2: The Clip Libraries link

6. Extract the new clip library file into the folder indicated in the

Preferences dialog box

7. To activate the new clip libraries you’ve installed, restart TextPad and

go to the Clip Library drop-down list The new book names appear

in the list in alphabetical order

Figure 130-3: The Preferences dialog box with Folders selected

Task 130

cross-reference

• A text editor is only one part of your development environment Obviously, you need to test your code in browsers TextPad allows you to conjure browser sup-port straight from TextPad

to launch your documents

in any browser you have installed (see Task 131).

Configuring TextPad with Web Browsers

TextPad has a reconfigured button on its standard toolbar that looks like a little globe When you click it, it launches the current document in your system’s default Web browser Of course, when you create Web content, you want to test your document in more than a single browser Fortunately, you can configure TextPad to launch the current document in as many different browsers as you have installed on your computer The following series of steps add a command

to the Tools menu and configure a button on the Tools toolbar (which you can always move later to the toolbar of your choice)

1. Choose Configure ➪ Preferences to open the Preferences dialog box Click Tools on the left to view the Tools options (see Figure 131-1)

Figure 131-1: The Preferences dialog box with the Tools option selected

2. In the upper-right corner, click the Add button and choose Program from the menu that appears This opens the Select a File dialog box (see Figure 131-2)

Figure 131-2: The Select a File dialog box

notes

• As of this writing, the

most recent version for

PCs is Internet Explorer 6

-Service Pack 1 The most

recent versions of IE for

Mac are IE 5.1.6 (Mac OS

8.1 through 9.x) and IE

5.2.2 (OS X) You can find

all of these at the Microsoft

Download Center at www

.microsoft.com/downloads/.

• As of this writing, the most

recent version of Netscape

is version 7.1, which you

can find at http://channels

.netscape.com/ns/

browsers/ An excellent

place to find older

browsers is http://

browsers.evolt.org.

Task 131

caution

• You cannot install and run

two versions of Internet

Explorer simultaneously

in Windows.

• If you want to modify the name, click once and then click a second time

to highlight the program name From here you can edit the name to your satisfaction.

3. From here, locate the executable program file for the browser you

want to add to the Tools menu and click the Open button to close the dialog box The program name now appears in the Preferences dialog box

4. Click Apply to confirm the operation To change the order of

commands, click the up and down arrow buttons at the top of the list Click OK to close the Preferences dialog box

5. To view the Tools toolbar, choose View ➪ Toolbars ➪ Tools from

the menu Sixteen user-defined tool buttons appear as little hammer icons on the toolbar Each tool corresponds to the commands in the order they are defined

6. To copy buttons to other toolbars, choose View ➪ Toolbars ➪

Customize This displays the Customize dialog box (see Figure 131-3)

Figure 131-3: The Customize dialog box

7. Click the Commands tab and select the Tools category to see all the

buttons on that toolbar Drag the button icons to any toolbar visible

in TextPad

Task 131

cross-reference

• Test in multiple browsers to make sure your designs are clean and accessible to the widest possible audience If you’re just starting out in Web design, check out www.webpagesthatsuck com so your sites won’t get listed there.

Configuring an HTML Validator

TextPad has been designed to integrate with the AI Internet Solutions CSE HTML Validator Validation software allows you to find and correct invalid markup, such as improperly nested tags, missing quotation marks, and misspelled tag and attribute names This task covers how to download and install the Validator and configure it for use with TextPad

1. Go to www.htmlvalidator.com

2. Click the Download link in the top navigation bar (see Figure 132-1)

Figure 132-1: The Download link on the CSE HTML Validator site

3. Click the appropriate link to download the version of your choice:

the Trial version, the Lite version, or the Registered version (requires prior online purchase) The next screen you see depends on the version you choose

4. In the subsequent page, click the appropriate link to begin the down-load The Save As dialog box (see Figure 132-2) appears, allowing you to choose where to save the installation file

note

• The HTML Validator

com-mand gets its own

subsec-tion of the Tools menu.

Task 132

• You can use the trial ver-sion of CSE HTML Validator for 30 days or to validate

100 documents, whichever comes first After that time, you must purchase a license to keep it functioning.

Figure 132-2: The Save As dialog box

5. Once the installer executable is downloaded, double-click its icon to

begin the installation process, and follow the prompts in the installa-tion wizard Once installainstalla-tion is complete, TextPad adds a command

to run the Validator to the Tools menu

6. To add commands to the Tools menu that allow access to the

Validator’s configuration dialog boxes, select Configure ➪ Preferences Click the Tools category

7. Click the Add button and select HTML Validator Commands

from the drop-down list (see Figure 132-3) Click OK

Figure 132-3: The Add button drop-down list in the Preferences dialog box

Task 132

cross-reference

• TextPad’s color syntax checking also helps you notice when code has errors To modify the colors TextPad uses, see Task 135.

Creating Keystroke Macros

The purpose of a macro is to let you record any frequently repeated editing command (including the typing of text) and play it back whenever you need

it This saves you time doing repetitive tasks In TextPad, you can create up to

64 named macros

1. To begin recording a macro, either choose Macro ➪ Record, click the Record On/Off button on the toolbar (see Figure 133-1), or press Ctrl+Shift+R

Figure 133-1: The Record On/Off button

2. With the recorder running, type out your code as you would nor-mally, or make your menu command selections When finished, choose Macro ➪ Stop Recording, click the Record On/Off button on the toolbar, or press Ctrl+Shift+R again

3. To save the macro, choose Macro ➪ Save from the menu to open the Save Macro dialog box (see Figure 133-2)

Figure 133-2: The Save Macro dialog box

notes

• If you have an unsaved

macro in memory, you’ll

be asked if you want to

erase it.

• While recording the macro

you can use any command

in the File and Window

menus, all commands in

the Edit menu (except

Undo and Redo), and all

commands in the Search

menu except Find in Files.

Task 133