HTML in 10 Steps or Less- P16 pdf

Creating Workspaces W hen 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. 276 Part 12 Task 127 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • 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. TextPad 277 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). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Working with the Clip Library T extPad’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). 278 Part 12 Task 128 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • 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. TextPad 279 Task 128 cross-reference • To edit a clip, see Task 129. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Editing Clip Libraries Y ou 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. 280 Part 12 Task 129 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • 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 TextPad 281 Task 129 cross-reference • Download new clip libraries from the TextPad Web site (see Task 130). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Downloading Clip Libraries N ew 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. 282 Part 12 Task 130 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • 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 TextPad 283 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). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Configuring TextPad with Web Browsers T extPad 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. 284 Part 12 Task 131 caution • You cannot install and run two versions of Internet Explorer simultaneously in Windows. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • 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. TextPad 285 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Defining CSS Text Properties Task 148: Defining CSS Background Properties Task 149: Defining CSS Padding and Margin Properties Task 150: Defining CSS Border Properties Task 151: Defining CSS Box Properties Task 152: Validating HTML Task 153: Using BBEdit Utilities Task 154: Using Find and Replace Task 155: Working with File Groups Task 156: Setting Menu Keys Task 157: Modifying Color Syntax Checking... watermark Part 13: Working with BBEdit Task 136: Downloading and Installing BBEdit Task 137: Configuring BBEdit for Web Site Development Task 138: Creating New HTML Documents Task 139: Using the Tag Maker Edit Tag Tools Task 140: Formatting Text Task 141: Creating Lists Task 142: Inserting Images Task 143: Creating Tables Task 144: Building Forms Task 145: Working with Frames Task 146: Defining CSS Font Properties... series of these macros for nearly every container tag combination HTML requires What’s more, you can assign keyboard shortcuts to the macros, turning TextPad into a dedicated HTML authoring tool 1 Open TextPad and begin a new blank document Enter a single line text into the document and select it 2 Open the Replace dialog box (see Figure 134-1) by choosing Search ➪ Replace or pressing F8 Figure 134-1:... where the cursor is located in the document is important to the playback of the macro, position the cursor where you want it before you begin the recording process For macros that simply type text, selecting Play Once is typically the best Default Play Mode option For macros that perform a task throughout a document, for example finding and replacing text, choose Repeat Through Selection or Repeat to... dialog box 3 In the Find What field, type a backward slash (\) and ampersand (&), as shown in Figure 134-2 Figure 134-2: Entering \& in the Find What field 4 In the Replace With field, enter a container tag set with an ampersand in the middle For example, & 5 Click the Regular Expression check box and then start the recorder by clicking the Record On/Off button on the toolbar, or pressing Ctrl+Shift+R... their own color in TextPad When you make a typographic or HTML syntax error, the color of all code following the error changes to a single color so that the error stands out You can easily modify these colors to suit your own taste 1 To modify the HTML document class colors, choose Configure ➪ Preferences to open the Preferences dialog box 2 Click the plus sign beside Document Classes in the options... color selections Figure 135-3: The Foreground color picker 8 Click Apply to change the color and keep the dialog box open, or click OK to change the color and close the dialog box 9 To return the colors for a selected item to their original values, click the Set Defaults button Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Please purchase PDF Split-Merge on www.verypdf.com... The HTML Validator command gets its own subsection of the Tools menu Part 12 Configuring an HTML Validator T extPad 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... 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... 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 . Defining CSS Padding and Margin Properties Task 150: Defining CSS Border Properties Task 151: Defining CSS Box Properties Task 152: Validating HTML Task 153: Using BBEdit Utilities Task 154: Using. Images Task 143: Creating Tables Task 144: Building Forms Task 145: Working with Frames Task 146: Defining CSS Font Properties Task 147: Defining CSS Text Properties Task 148: Defining CSS Background. these macros for nearly every container tag combination HTML requires. What’s more, you can assign keyboard shortcuts to the macros, turning TextPad into a dedicated HTML authoring tool. 1. Open