[icon] BBEdit HTML extensions Home Page

Starting on: the Template | Inserting tags | Comment | Meta-information | Division | Heading | Paragraph | Anchor | Link | Style | Format | Image | Horizontal Rule | Line Break | Form | Form Input | Form Select | Form Text Area | Translating special characters | Previewing your document |


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:

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.
Base URL
It is the base URL for the current document. If you leave it empty it isn't included in the header.
Allow queries (<ISINDEX>)
An <ISINDEX> element can be inserted into the header.
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 <P> tags where paragraphs are supposed to start. Note that paragraphs must be separated by blank lines.
Closing </P> tags
Close paragraphs with the </P> 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.
Lower case tags
If this option is checked then the HTML extensions will insert lower case tags.

The Apply button executes your choices, formatting the document. The Set Prefs button only saves choices for later use.

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

  • Inserting tags

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

  • Comment
  • Meta-information
  • Division
  • Heading
  • Paragraph
  • Anchor
  • Link
  • Style
  • Format
  • Image
  • Horizontal Rule
  • Line Break
  • Form
  • Form Input
  • Form Select
  • Form Text Area
  • Comment

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

    Meta-information

    The Meta-information extension allows you to add <META...> tags to the document's header. Each time you use this extension, a new Meta-information field is inserted into the header. A pop-up menu offers some short-cuts for http-equiv fields.

    Meta-information
extension dialog box

    Division

    Divisions are blocks of text. Optional attributes are a class ID and the text alignment.

    Division extension dialog box

    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 and the alignment. If the option key is pressed you will get default options without any dialog.

    Heading
extension dialog box

    Paragraph

    The Paragraph extension inserts a <P> 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). A dialog box asks you about the alignment and the closing <P> tags.. If the option key is pressed you will get default options without any dialog.

    Paragraph
extension dialog box

    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.

    Anchor extension
dialog box

    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.

    Link extension
dialog box

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

    Horizontal Rule

    This extension inserts a <hr> tag.

    Line Break

    This extensions inserts a <br> tag.

    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 or POST). You might also want to change the default encoding media type.

    Form extension
dialog box

    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.

    Form Select
extension dialog box

    Note that options should be separated by blank lines. If you have short option strings 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.

    Form Text Area
extension dialog box


    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&eacute;, 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.


    [icon] BBEdit HTML extensions Home Page

    CBT