BBEdit HTML extensions

Release 8, Feb 8 1995

This set of BBEdit extensions lets you convert plain text files into HTML documents and insert HTML tags inside of them, so that you can easily create hypertext documents with the Macintosh BBEdit text editor.

Use of these extensions together with a Macintosh Web browser in 'Open Local...' mode has proved to be a fast and easy way of editting HTML documents to be included in a www server.

Contents

  • Getting the HTML extensions package
  • Installing the HTML extensions
  • Using the HTML extensions
  • Aknowledgements
  • References
  • Getting the HTML extensions package

    These BBEdit HTML extensions are freeware. You can get the package for free at the following ftp sites:

  • Universitat Jaume I (Spain)
  • I started the development of this product when some people working on information systems at University Jaume I wanted to put their hands on the Web and found out that there was no easy way to edit HTML documents with their Macs. I choosed BBEdit because it was (it is) the best text editor for the Mac, and it was (it is) freeware/shareware. Then, I thought that these HTML extensions package could be useful for some other people too, so that I published it on the net. I only ask you for your comments, suggestions, complaints, congratulations, etc.

    Installing the HTML extensions

    Get BBEdit and install it. Get the extensions package and uncompress it (it's a self-extracting archive). Drag the resulting BBEdit extensions files onto the 'BBEdit extensions' folder that comes with BBEdit. From now on the HTML extensions will show under BBEdit 'Extensions' menu.

    BBEdit Icons

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

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

    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 documents
  • Inserting tags

    You may want to use the following extensions in order to insert the corresponding tags:

  • Comment
  • Heading
  • Paragraph
  • Anchor
  • Link
  • Style
  • Format
  • Image
  • 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.

    Heading

    The 'Heading' extension inserts heading tags at the beginning and end of the cursor paragraph (note that paragraphs must be separated by blank lines). A dialog box lets you choose the heading level.

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

    Paragraphs will be closed with </P> 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.

    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.

    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.

    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.

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

    Previewing your documents

    The 'Preview' extension opens your Web browser and instructs it via Apple Events to display your 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.

    Aknowledgements

    I am grateful to Jordi Adell for encouraging and testing the development of these tools.

    I want also to thank Bare Bones Software, publishers of BBEdit, for supporting this kind of extensions.

    References

    About BBEdit

    BBEdit is a powerful text editor for the Macintosh. It provides an extension mechanism so that you can develop your own external commands, like these HTML extensions.

    BBEdit is a commercial product. You can try a demo version. There is also a freeware, less complete version, called BBEdit Lite. The HTML extensions work with both versions, BBEdit and BBEdit Lite.

    About HTML

    HTML stands for 'HyperText Markup Language', the markup language used to create the hypertext documents shown on the WWW.

    (More info on HTML at CERN .)

    About WWW

    WWW stands for 'World-Wide Web'. The WWW project, started by CERN (the European Laboratory for Particle Physics), seeks to build a distributed hypermedia system.

    About Web browsers

    The World-Wide Web FAQ says:

    To access the web, you run a browser program. The browser reads documents, and can fetch documents from other sources. Information providers set up hypermedia servers which browsers can get documents from.

    Well known Macintosh browsers are Netscape, MacWeb and Mac Mosaic

    Note

    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.


    Carles Bellver <bellverc@si.uji.es>
    Universitat Jaume I, Spain