BBEdit HTML extensions home page

Starting on: the Template | Inserting tags | Comment | Heading | Paragraph | Anchor | Link | Style | Format | Image | Form | Form Input | Form Select | Form Text Area | Translating special characters | Previewing your document | Saving your document into a host account

Using the HTML extensions

Starting on: the Template

When you start with a new empty document, or a text document that you want to transform into a HTML document, you may want to use the Template extension. It inserts tags defining the basic structure of a HTML document: standard HTML prologue, head and body. Besides of that, the Template extension offers you some options that automate the conversion of plain text documents into HTML documents:

Template Extension Dialog Box

Options are:

Base URL: It is the base URL for the current document. If you leave it empty it isn't included in the header.
Title: It is the title for the document. If you have previously selected document's first line it will be taken as its title by default.
Mark first line as a level 1 heading: If it's checked then the first line in the document will be marked as a level 1 heading.
Translate Special Characters: It allows the translation of 8-bit characters (those ones used in latin languages such as Catalan, Spanish or French) found in the document. Useless if you start with an empty document.
< > & ": It allows the translation of these characters: < > & ". Don't use if your document already contains HTML tags.
Guess Paragraphs: It tells the extension to survey the text and insert  tags where paragraphs are supposed to start. Note that paragraphs must be separated by blank lines.
Closing  tags: Close paragraphs with the  tag
User's headline: It allows you to include a text file at the beginning of the body of your document (your logo, or a standard set of buttons, for instance).
User's signature: It allows you to include a signature text file at the end of document's body.

The Apply button executes your choices, formatting the document. The Set Prefs button only saves choices for later use (see the Paragraph extension).

The standard HTML prologue identifies a SGML document as being HTML. This string, which is pasted at the very beginning of your documents by the Template extension, is stored in the STR# resource ID 1000 in the Template extension file.

Once you have got your basic HTML structure you can edit the document. Then you may want to:

Insert tags

Translate special characters

Preview your document

Saving your document into a host account

Inserting tags

You may want to use the following extensions in order to insert the corresponding tags (all these operations are undoable).

Not supported tags, like <HR>,  , or individual <LI>, can be easily inserted using BBEdit glossary capabilities (but this feature is only found in the commercial version).

Comment

The Comment extension inserts tags at the beginning and end of the cursor line, defining it as a HTML comment.

Heading

The Heading extension inserts heading tags at the beginning and end of the cursor paragraph (note that the heading must be separated by blank lines, so that you can break long headings into two or more lines). A dialog box lets you choose the heading level.

Paragraph

The Paragraph extension inserts a  tag at the beginning of the cursor paragraph, or at the beginning of each selected paragraph (note that paragraphs must be separated by blank lines).

Paragraphs will be closed with  tags if you have checked this option in the Template dialog.

Anchor

The Anchor extension inserts tags around the selected text defining a name for that portion of the document. A dialog box asks you for that name.

Link

The Link extension inserts tags around the selected text so it becomes a link to a URL that you give via a dialog box. A Choose file button lets you select the linked file by means of a standard dialog box, instead of typing its name. If the linked file is in the path of the current document, you will get a relative URL to it. If it is out of the path, or there is no path because you have not saved the document yet, only the filename will be retained.

Style

The Style extension shows a dialog box to let you choose a style for the selected text:

Style Extension Dialog Box

Format

The Format extension shows a dialog box to let you choose the format you want for the selected text:

Format Extension Dialog Box

Formats that affect a series of lines, like lists, require that you have previously selected those lines. Note that list items should be separated by blank lines. If your have short item entries and don't want to waste space, check the 'One item per line' option.

Image

The Image extension inserts a tag for an inline image. You must type the image's URL in a dialog box that offers you some other options too:

Image Extension Dialog Box

Options are:

Alternative description: This is a text description for browsers that don't support images.
Align top/middle/bottom: This is the alignment of the text in relation to the image.
This is a map: Check it if the image is to be used as a sensible map.

The Choose file button lets you select the image file by means of a standard dialog box, instead of typing its name. If the image file is in the path of the current document, you will get a relative URL to it. If it is out of the path, or there is no path because you have not saved the document yet, only the filename will be retained.

Form

The Form extension inserts tags before and after the selected lines of texts, which must contain a form definition. You must give the URL for the form's action in a dialog box, as well as your desired method (GET/POST).

Form Input

The Form Input extension inserts a tag defining an input form field. A dialog box lets you type the field name and choose its type and other related options:

Form Input Extension Dialog Box

Form Select

The Form Select inserts tags before and after the selected lines of text, defining a pop-up menu field for a form. You must type the name of this menu in a dialog box, and you can also choose if you want to allow multiple selections in this field.

Note that options should be separated by blank lines. If your have short option messages and don't want to waste space, check the 'One item per line' box.

Form Text Area

The Form Text Area extension inserts tags around the selected text defining a text area field for a form. Selected text, if any, will appear in the field as default contents.

Translating special characters

The Specials Translation extension translates the selected text. A dialog box lets you translate Mac special characters into entity names (café is turned into café, for instance), or lets you do the reverse operation. Also, you can choose the translation of special characters (these ones: < > & ") and/or 8-bit characters (those ones used in latin languages such as Catalan, Spanish or French).

Translation Extension Dialog Box

Previewing your documents

If you are using BBEdit 3.1 or later, you can use the View HTML File command. If you're using a previous version of BBEdit, you can try my Preview extension, which opens your Web browser and instructs it via Apple Events to display the current document. The first time you use this extension a dialog box asks you for the location of the browser. You can locate it again at any time, if you want, by pressing the ctrl and option keys together as you select HTML Preview.

Preview works with Netscape. I cannot guarantee that it works with the other browsers.

Saving your document into a host account

The Send to Host extension sends the current document to a host via Anarchie. You must type the host name, directory, ftp user and password in a dialog box. All this info will be remembered the following times. Of course, it is never safe to store a password, so there is also a 'forget password' option that is checked by default.