HTML in 10 Steps or Less- P17 potx

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.. Figure 138-1: The New HTM

Downloading and Installing BBEdit

Any 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.

• 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

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.

Configuring BBEdit for Web Site Development

Although 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.

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

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

Creating New HTML Documents

You 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.

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

cross-reference

• To learn how to define a Web site in BBEdit using file groups, see Task 155.

Using the Tag Maker Edit Tag Tools

BBEdit 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.

• 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

cross-reference

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

Formatting Text

If 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 styleattributes

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, andcolorattributes 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.

• 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

cross-reference

• To learn more about the tags that BBEdit inserts for each of these options, see Part 2.

Creating Lists

HTML requires a series of structured tag pairings to render lists in the browser BBEdit makes manipulating list code a pretty simple proposition

1. To convert existing text to a list, select the text comprising the list items and click the List button on the HTML Tools Palette to open the Lists submenu (see Figure 141-1)

Figure 141-1: The HTML Tools Palette List submenu

Select List from the submenu to open the Lists dialog box (see Figure 141-2)

Figure 141-2: Selecting list options in the Lists dialog box

2. Select the list type, attribute settings, and markup options using the radio buttons, check boxes, and pop-up menus in the dialog box

3. Click Apply to close the dialog box and wrap the selected text in the appropriate markup

note

• BBEdit does have options

for menu and directory

lists, but these list types

are not supported by

any Web browser.

4. To build a list from scratch, choose the list type from the List button

submenu to insert the appropriate opening and closing tags (<ul>

</ul>, <ol> </ol>, or <dl> </dl>), along with an empty pair of list items tags (<li> </li>, or <dt> </dt>and <dd> </dd>) (See Figure 141-3.)

Figure 141-3: List tags inserted using the HTML Tools 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 creat-ing lists, see Tasks 22–28.

Inserting Images

BBEdit makes it easy to insert images and enter values for the <img>tag’s associated attributes

1. Click the Image button on the HTML Tools Palette to open the Image dialog box (see Figure 142-1)

Figure 142-1: Inserting images using the Image dialog box

2. In the Src field, enter the pathname of the image file or click the File button to browse for one on your hard drive Alternatively, use the Recent URLs pop-up menu to select among image files you’ve recently inserted

3. In the Alt field, enter the alternate text you want to specify for the image

4. To specify the dimensions of the image, click the Size check box and enter width and height values in the W and H fields, respectively

5. To specify hspace and vspace attributes, click the Space check box and enter values in the H and V fields, respectively

6. To align the image, click the Align check box and choose an option from the pop-up menu to the right

notes

• Alternate text is helpful for

visually impaired visitors

who use speaking browsers

to experience the Web The

inclusion of the alt

attribute also satisfies a

federal requirement for

making a site compliant

with Section 508 (www

.section508.gov), which

states that all

govern-ment sites must be

handicapped-accessible.

• You don’t need to configure

BBEdit to work with your

browsers Once you install

them, BBEdit adds their

names to the list in the

preview menu.