HTML in 10 Steps or Less- P17 potx

Downloading and Installing BBEdit A ny company that sells its software under the tag line “It doesn’t suck” is a winner with us. BBEdit is the premiere HTML and text-editing application for Macintosh OS. Downloading the fully functioning, 30-day trial version of BBEdit 7.0 is fairly simple. 1. Go to www.barebones.com (see Figure 136-1) and click on the Products link and select BBEdit. Figure 136-1: The Bare Bones Software home page 2. On the main BBEdit page, look for the vertical list of links on the right side of the screen and click on Demo. 3. In the “Please Sign Up!” form, enter the information they request and click the Register button (see Figure 136-2). 4. Click the Demo Package download link to begin downloading the installation file and choose a location on your system to save it (see Figure 136-3). 5. With the executable installation file downloaded, double-click the file to unpack the installer. Double-click the installer to install BBEdit on your system. notes • BBEdit 7.0.2 runs on Mac OS 9.1 or later but Mac OS 9.2.2 or later is recom- mended. If you are using Mac OS X, version 10.1.5 or later is required although version 10.2.3 or later is recommended. • BBEdit requires CarbonLib 1.5 or higher on your system. If you need to download it, get the most- recent versions of CarbonLib at http://docs.info.apple .com/article.html? artnum=120047. 296 Part 13 Task 136 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • To download the user manual, click the Technical Support link in the vertical list and then scroll down to the Resources section on the next page. Here you find a link to the user manual in PDF format. You need Adobe Reader to view it, which you can download for free at www.adobe .com/products/acrobat/ readstep2.html. • If you’re interested in purchasing BBEdit, go to www.barebones.com/ store/index.shtml. Figure 136-2: Registering for BBEdit Figure 136-3: Selecting the download option you prefer Working with BBEdit 297 Task 136 cross-reference • If you’re a PC user running Windows, then you cannot use BBEdit, which is for Mac OS only. Read about TextPad, an equivalent product, in Part 12. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Configuring BBEdit for Web Site Development A lthough you ultimately copy your files to a remote Web server when you publish your Web site, you develop your site (and edit it after publication) on your local computer. This task shows you how to develop your local file structure and set up your site in BBEdit. 1. On your hard drive, create a folder that will contain all the files and directories of your Web site. 2. Choose Edit ➪ Preferences to open the BBEdit Preferences panel (see Figure 137-1). Scroll down to HTML Web Sites in the left-hand list. Figure 137-1: The BBEdit Preferences panel with HTML Web Sites selected notes • BBEdit uses the URL to determine which links point to the files on your Web server. • If you haven’t got a Web server yet, don’t worry.You can always go back and update any of these fields later. • The root filename is the name of the file sent to a browser that visits (requests) a domain name. For exam- ple, when a browser visits www.domain_name.com, the Web server returns the root document because no specific filename was requested.Your Web hosting company or server adminis- trator knows what the proper root filename is. Common ones include “index,”“default,” “main,” and “home” — followed by the extension .htm or .html. 298 Part 13 Task 137 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 3. Click the Add button on the right to display the Web Site Settings dialog box (see Figure 137-2). Figure 137-2: The Web Site Settings dialog box 4. In the Site Name field, enter a descriptive name for your site. This is the name that the site will appear later as in the HTML Web Sites category of the BBEdit Preferences panel. 5. In the Web Server Name field, enter the URL of your Web server, if you have one (http://www.domain_name.com/). 6. In the Site Path on Server field, enter any subfolders that lead to the index.html home page. For example, if the path to the home page is www.domain_name.com/alpha/beta/index.html, enter alpha/beta. 7. In the Default Page Name field, enter your Web server’s default root filename. 8. Beside the Local Site Root field, click the Set button to select the folder you created in Step 1. Working with BBEdit 299 Task 137 cross-reference • Regardless of which editing tool you use, developing a sound folder structure on your local machine is the first step to building a Web site. This book contains overviews of other develop- ment tools as well: Helios Software’s TextPad (Part 12), Macromedia HomeSite (Part 14), Macromedia Dreamweaver MX (Part 15), and Microsoft FrontPage (Part 16). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Creating New HTML Documents Y ou can create an HTML document in any text editor just by entering markup code and saving the file with an .htm, or .html extension. However, using BBEdit allows you to insert the main structural tags of an HTML document quickly and easily. 1. Click New Document on the HTML Tools Palette or choose File ➪ New ➪ HTML Document from the main menu to open the New HTML Document dialog box (see Figure 138-1). If you choose, you can simply click OK here and insert the document tags. Otherwise, continue to define other properties of the document. Figure 138-1: The New HTML Document dialog box notes • If you currently have a doc- ument open, into which you want to insert blank document tags, check the Create New Window check box. • A DOCTYPE declaration is a line of code at the top of the HTML document that points to a separate file containing the formal defi- nition of the markup lan- guage’s grammar (its valid tag and attribute names, and such). The browser checks the code of the document against the rules in the DOCTYPE declara- tion. Because XHTML is not fully supported by all browsers, we recommend choosing XHTML 1.0 Transitional. • Every HTML document requires <html>, <head>, and <body> tags. The default setting for this dialog box checks these options. Thus, they are inserted. Deselect them if you have reason not to include them. Checking the Give BBEdit Credit check box inserts a <meta> tag referencing BBEdit as the authoring tool. • Specifying a language adds a lang attribute to the opening <html> tag. This value is used by some search engines and trans- lation programs to help users locate documents in their native language. 300 Part 13 Task 138 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 2. To specify a DOCTYPE declaration, select an option from the pop- up menu beside the Insert DOCTYPE check box. 3. Using the check boxes provided, deselect any standard container tags you want to leave out. 4. Enter the title of the HTML document in the Title field. 5. To indicate what language the document is written in, make a selec- tion from the Lang menu. 6. To define a <meta> tag, enter the necessary code into the Meta field. 7. To include a <link> tag, for example to reference an external style sheet, enter the necessary code in the Link field. 8. To specify the Web site this file is part of, use the Web Site pop-up menu to select one of the sites you’ve defined. 9. To specify a template you want this file based on, select it from the Templates pop-up menu. 10. Click OK to close the dialog box and open the new document. A new document opens on the desktop (see Figure 138-2). The code contains information you entered in the New HTML Document dialog box. Figure 138-2: A new HTML document Working with BBEdit 301 Task 138 cross-reference • To learn how to define a Web site in BBEdit using file groups, see Task 155. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Using the Tag Maker Edit Tag Tools B BEdit provides two context-sensitive tools for inserting and modifying tags: Tag Maker and Edit Tag. “Context-sensitive” means that BBEdit looks at where the cursor is currently positioned in the code and only provides tags, attributes, or CSS options that make sense for that location. 1. Place your cursor within the flow of your document code. 2. To open the Tag Maker (see Figure 139-1), click the Tag Maker but- ton on the HTML Tools palette, choose Markup ➪ Tag Maker from the main menu, or press Command+M. Figure 139-1: The Insert Tag dialog box 3. Select the appropriate tag you want to insert from the list of tags. 4. To bring up an attribute dialog box appropriate to the selected tag (see Figure 139-2), hold down the Option key and click the Insert button. notes • If there is only one possible tag that can be inserted at the current cursor location, BBEdit simply inserts the tag without displaying the Tag Maker. If there are no appropriate tags, a system alert sounds. • If the cursor is located between <style> tags, Tag Maker displays a list of possible selectors. Option- clicking the Insert button brings up a dialog box of possible style properties. If the cursor is within the brackets of a style declara- tion, the Tag Maker displays style properties right away. 302 Part 13 Task 139 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Clicking in the Insert Tag dialog box’s scrolling list and typing a letter scrolls you quickly to the tags beginning with that letter. Figure 139-2: An attribute dialog box appropriate to the selected tag — in this case the <p> (paragraph) tag 5. Enter any attribute values you require and click the Apply button to close the dialog box. 6. To display attributes for preexisting tags (see Figure 139-3), place the cursor within the tag and invoke the Tag Maker using any of the methods described in Step 1. Figure 139-3: An attribute dialog box for a preexisting <body> tag 7. To modify the most common attributes of a tag, click Edit Tag on the HTML Tools palette. Enter the appropriate values and click Apply. Working with BBEdit 303 Task 139 cross-reference • To learn more about Cascading Style Sheets, see Part 9. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Formatting Text I f there’s a tag, the HTML Tools Palette has a button to insert and format it. To mark up text, simply click a button and, where applicable, modify the tag’s attributes in the resulting dialog box. Occasionally you have to wander up to the BBEdit menu bar to find a command, but not often. 1. To insert a paragraph, click the Paragraph button on the HTML Tools Palette or choose Paragraph from the Block Elements sub- menu. This opens the Paragraph dialog box (see Figure 140-1). Here you can modify the tag’s align, ID, class, and style attributes. Figure 140-1: Modifying the <p> tag with the Paragraph dialog box 2. To insert headings, click the Heading button and select one of the six heading tags from the submenu that appears. 3. To insert <font> tags, click the Font button to open the Font dialog box (see Figure 140-2). Specify values for the face, size, and color attributes by clicking the appropriate check boxes and entering values in the fields provided. Figure 140-2: Modifying the <font> tag with the Font dialog box 4. To insert physical style tags, click the Font Style Elements button and select the style of your choice from the submenu. note • All dialog boxes that deal with color have a color but- ton that you click to open the color picker. Simply choose a color from the picker to close it to return to the dialog box. 304 Part 13 Task 140 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • The Recent URLs menu allows you to select from a list of files you’ve recently linked to. Click the File button to browse your site folder for a file, or enter the complete URL of another site. 5. To insert logical styles, click the Phrase Elements button and select the appropriate style from the submenu. 6. To insert preformatted text (with the <pre> </pre> tags), click the Block Elements button and choose Preformatted from the submenu. 7. To modify the default body text and text link colors, click the Body Properties button to open the Body Properties dialog box (see Figure 140-3). Place check marks next to the attributes you want to specify and use the color tools to select a color. Figure 140-3: Modifying default body text and text link colors in the Body Properties dialog box 8. To format selected text as a hyperlink, click the Anchor button to open the Anchor dialog box (see Figure 140-4). Enter values for the appropriate attributes in the fields provided. Figure 140-4: Hyperlinking text with the Anchor dialog box Working with BBEdit 305 Task 140 cross-reference • To learn more about the tags that BBEdit inserts for each of these options, see Part 2. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Building Forms B BEdit makes inserting and formatting form controls easy using the Forms submenu of the HTML Tools palette 1 To generate the opening tag, click the Forms button and choose Form from the submenu to open the Form dialog box (see Figure 144-1) If submitting or resetting the form is supposed to invoke a JavaScript call, enter the appropriate code in the fields provided The Input... tools for defining each control’s attributes Each iteration provides fields for several values, including JavaScript event handler values Figure 144-1: Defining a form control in the Form dialog box 2 Click the relevant radio button for the Method attribute (Post or Get) 3 In the Action field, enter the URL of the processing CGI script that runs the form control 4 Click the Apply button to close the Form... dialog box, where you define the label and /or value attributes in the fields provided Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working with BBEdit 313 Task 144 Figure 144-2: Setting tag attributes in the Input dialog box Figure 144-3: Defining a selection list in the Select dialog box 9 To insert a text area, click Text Area on the Forms submenu to open the... of the HTML Tools Palette and choose one of the installed browsers on your system to open the HTML document (see Figure 142-4) cross-reference • To learn more about inserting images on Web pages in HTML, see Part 3 Figure 142-4: Options for previewing your page in a browser Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  310 Task 143 note • BBEdit provides fields for the... the Form dialog box and insert the generated code into the current document 5 To insert any of the form controls created with the tag, click the Forms button and choose Input from the submenu to display the Input dialog box (see Figure 144-2) 6 Select the type of form control in the Type pop-up menu Supply the value for the name and the value attributes, if applicable, in the fields provided... cell — which HTML defines with the or tag — click Tables and choose TD or TH to open the corresponding dialog box (see Figure 143-3) Specify the dimensions of the cell, the number of rows or columns the cell spans, its horizontal and vertical alignment, and its background color Figure 143-3: Setting table cells in the TD dialog box cross-reference • To learn more about building tables, see Part... Palette 5 Enter the text required for your list items 6 To modify the attributes of any tag in the list, place the cursor within the tag and click the Tag Maker button to view a list of possible attributes in the Insert Attribute dialog box (see Figure 141-4) Figure 141-4: Modifying attributes in the Insert Attribute dialog box cross-reference • To learn more about creating lists, see Tasks 22–28 Please... pixel or percentage value in the provided field 4 To specify values for cell padding and cell spacing, select the appropriate check boxes and supply pixel values in the associated fields 5 To specify the table’s alignment, click the Align check box and use the pop-up menu to the right to set the alignment to left, right, or center 6 To define a background color for the table, click the BGColor check... click the BGColor check box, click the color picker, and choose a color value from the palette Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working with BBEdit 311 7 Click Apply to close the dialog box and insert the opening and closing tags with your attributes already defined Task 8 To insert a new row — which HTML defines with the tag — click Tables and... Figure 142-2: Code inserted using the Images dialog box 8 To center-align an image, insert a tag with an align attribute set to “center” by selecting the tag, clicking the Div button, and modifying the align attribute in the Division dialog box (see Figure 142-3) Figure 142-3: Setting values for the tag using the Division dialog box 9 To see how the image appears in a browser, click . watermark. Building Forms B BEdit makes inserting and formatting form controls easy using the Forms submenu of the HTML Tools palette. 1. To generate the opening <form> tag, click the Forms button. watermark. Creating New HTML Documents Y ou can create an HTML document in any text editor just by entering markup code and saving the file with an .htm, or .html extension. However, using BBEdit. download for free at www.adobe .com/products/acrobat/ readstep2 .html. • If you’re interested in purchasing BBEdit, go to www.barebones.com/ store/index.shtml. Figure 136-2: Registering for BBEdit Figure