• Introduction
  • HTML mode
  • JavaScript and CSS modes
  • HTML mode features
• Server Side Scripting
• Getting started
• Configuring Home Pages
• Giving attributes to HTML elements
  • Using dialog boxes
  • Using the status bar
    • Other things to note
• Deciding which attributes to be asked about
  • Individual settings
  • Global vs individual settings
• Document type declaration
  • XHTML 1.1
  • Deprecated elements and attributes
  • Extensions to HTML 4.01
  • Preferences related to DTDs
• How to use template stops
• Text wrapping
• Contextual menu
• Shift-Command-double-clicking
  • Shift-Command-double-clicking on an opening tag
  • Shift-Command-double-clicking on a color attribute
  • Shift-Command-double-clicking on a URL attribute
  • Shift-Command-double-clicking on a CSS URL
  • Shift-Command-double-clicking on an include tag
  • Shift-Command-double-clicking in home page windows
• Controlling the layout of the code
  • Element layout preferences
    • Elements without a closing tag
    • Elements with a closing tag
  • Indentation preferences
    • The Formatting menu
• Word Completion
  • Word completion when typing attribute values
  • Word completion when editing CSS and JavaScript
• Electrics - automatic typing by Alpha
• Other editing features
• Coloring
• Functions popup
• Creating a new document - templates
  • A template example
• Sending the window to your browser
• Paragraph utilities
• Creating lists
• Table utilities
• Image maps
• Character entities
• Validating the code
• Character translation
• Color Sets
  • Predefined colors
  • Editing color sets
• URL and frame target sets
  • Active URL sets
  • Add New URLs To submenu
  • Editing URL sets
• Checking links
  • Fixing a broken link
  • Link checking preferences
• Includes
  • Including a file
  • Using place holders
  • Using scripts
  • Inserting include files with place holders
  • Updating the files
• Uploading files with FTP
• Home page windows
• Extending HTML mode
  • Adding a new element
  • Editing an element
  • Adding a new attribute
  • Editing and deleting attributes
  • Saving
• Moving and renaming files and folders
• Document utilities
• Key bindings
  • Key bindings for character entities
• Preferences
  • General Dialog
  • Attributes Globally Dialog
  • Use Attributes Dialog
  • Indentation Dialog
  • Layout Dialog
  • Optional Closing Tags Dialog
  • Home Pages Dialog
  • Menu Shortcuts Dialog
  • Coloring Dialog
  • Checking Links Dialog
  • Word Wrapping
  • Content Types, Media Descriptors, Link Types Dialogs
• JavaScript mode
  • Word completion
  • Parse menu
  • Shift-Command-double-clicking
  • Preferences
  • JavaScript in HTML mode
• CSS mode
  • CSS in HTML mode
  • Shared key bindings with HTML mode
• CSS property dialogs
  • The !important directive
  • The property dialogs
• Word completions in CSS
• CSS electrics
  • Shift-Command-double-clicking
    • Shift-Command-double-clicking on a CSS property
    • Shift-Command-double-clicking on a URL attribute
  • Parse menu
  • Reload in browser
• CSS preferences
• Power user
  • Defining your own formatting tags
• References
• Known problems
• License and Disclaimer

Introduction

• HTML mode 4.1
• CSS mode 3.1
• JavaScript mode 9.1.3

HTML mode

• The first one is called the CSS menu and contains functions for editing Cascading Style Sheets (CSS).
• The second one is called the HTML menu
• the last one the HTML Utilities menu.

JavaScript and CSS modes

HTML mode features

• HTML mode knows HTML 5, and some of Netscape's and Microsoft's extensions to HTML.
• Tools to easily and quickly insert HTML elements and give them attributes.
• Many smart shortcuts for quick editing of HTML code.
• A clever word completion feature to save you time while typing.
• Customizable indentation of the code and a feature to reformat messy code to make it more readable.
• You can open windows with lists of files from where you can easily copy and paste to make links.
• Validation of the HTML code.
• Tools for building lists and tables.
• You can check that all links between your files are OK.
• You can move files between folders and automatically update all links between and in them.
• Support for dynamically included files.
• Conversion of NCSA and CERN image map files to client side image maps.
• Support for editing JavaScript code.
• Support for editing of Cascading Style Sheets (CSS).
• Uploading of complete sites with FTP.
• Files are sent to your browser with one key stroke.
• Any menu item can be attributed a keyboard shortcut.
• You can define new HTML elements. Therefore you don't have to wait for Alpha to be updated to use it for new HTML.
• etc. etc.

Server Side Scripting

• To avoid that HTML mode reformat the scripting code and make it unreadable and perhaps non-functional, insert formatting tags in the document. Two different tags are available, one to prevent formatting completely, and one for C style formatting. See the Power user section to learn how to write your own formatting tags.
• If the scripting language makes use of tags which look like HTML tags, use the Extend menu to add these tags to HTML mode.

Getting started

Giving attributes to HTML elements

You can obviously insert new tags in an HTML document simply by typing them, but Alpha can help you to do it more efficiently. Alpha can let you give values to the attributes of an HTML element in two different ways. Either you can use traditional dialog windows, or you can let Alpha ask you to type the attribute values in the status bar. Try both ways to see which you like best. You find all HTML elements in the various submenus of the HTML menu.

How to use template stops

If you now have inserted a couple of HTML tags you should have noticed the black bullets (•). They are called template stops and are supposed to help you navigate in the document. The tab key lets you jump to the next bullet and automatically deletes it.

Text wrapping

It's easy to insert a pair of tags around some text. First select the text. Then choose an HTML element from a menu and the tags are inserted around the selection.

Word completion

Sometimes it's more convenient to simply type the code rather than using a dialog window. To help you there is a clever word completion mechanism. Type a few letters, hit Ctrl-Tab and Alpha tries to complete what you have typed as much as possible. This has two advantages: it saves you key strokes and it makes sure you don't misspell anything.

Editing submenu

Writing HTML code is not only a matter of inserting tags in a document. You often want to delete tags or modify them. Many of the items in the Editing submenu of the HTML Utilities menu makes it easier to modify the code.

Shift-Command-double-click

Shift-Command-double-clicking is useful for many things. For example, Shift-command-double-clicking on a link opens that file, Shift-command-double-clicking on an opening tag lets you change the attributes.

Configuring HTML mode

If you have read the sections referred to above you should have got a feeling about the basic concepts of this HTML environment. The next thing you should do before you go on is to give Alpha some information about your home page. This information is needed to use HTML mode in the best way.

Deciding on which attributes to be asked about

Most HTML elements have very many attributes. Therefore you can configure which attributes to be asked about for the various elements. This is not something you have to do immediately while you're still learning to use HTML mode, but it is strongly recommended that you do that before beginning to use it seriously.

Configuring Home Pages

URLs

a menu with all home pages you have a folder for on your disk. The rest of the items are information related to this home page and are described in detail below.

New

To define a new home page folder. You are presented with a second dialog as shown below.

Change

To change the home page selected in the menu.

Remove

To remove the home page selected in the menu.

Home Page Folder

The folder containing all the files of your home page.

Include Folder

A folder where you can put your files to be dynamically included. To define an include folder is optional and only needed if you want to use dynamically included files. Read about dynamically included files in the Includes section.

Template folder

A folder with templates to use when creating new HTML documents. To define a template folder is optional. Read about how to use templates in the section Creating a new document.

URL

The URL to your home page, for example https://alphacocoa.sourceforge.io.

Default file

The file which is used if a link points to a directory. This name depends on the configuration of your server, but is often called index.html.

Ftp Server

The ftp server which you upload your files to. If you specify one, you can upload your files using the submenu FTP in the HTML Utilities menu.

User ID

The name of your account on the machine you upload files to.

Password

Your password. Note: only specify your password here if it's safe to do so. Alpha saves the password in plain text in its preference file. If you don't specify it here, you can enter it when you want to upload a file.

Directory

The directory of your home page relative to your home directory.

Giving attributes to HTML elements

Using dialog boxes

URL

You can specify the URL in three ways:

1. type the URL in the text box,
2. choose one from the menu with your URL cache,
3. select a file via a file dialog. The file you have selected will be added to the popup menu.

Note: If you type a URL in the text box, it will be used even if you choose something from the menu.
It is probably much faster to type the URL than selecting a file from a file dialog, but the advantage of using the file dialog is that it will automatically insert a correct absolute or relative URL depending on which is appropriate. If you use a BASE tag in the current window, it will be noticed.
Alpha calculates the URL as follows. Files inside home page folders are mapped to a URL http://as.you.have.defined.it/file.html and files outside the home page folders are mapped to a URL file:///path/to/file.html
Alpha first determines the URL of the two files, and then determines the URL to link between them.

• If you link within a home page folder, you will get a relative URL.
• If you link between two different home page folders like http://here.net/ and http://there.net/, you will get an absolute URL.
• If you link between two different home page folders like http://www.net/~me/ and http://www.net/~you/ (at the same server), you will get a relative URL.

You can also make links between files which are not in a home page folder, but linking between files, where one is inside a home page folder and the other one is not, may not always make sense.
If you select a GIF, JPEG, or PNG file for the attribute SRC of IMG via a file dialog, the attributes WIDTH and HEIGHT are automatically determined.

Color

You can specify the color in three ways:

1. type a hexadecimal number #RRBBGG, which defines the color, in the text box,
2. choose a color from the menu,
3. define a new color. The color so defined will be added to the popup menu.

Note: If you type something in the text box, it will be used, even if you choose a color from the menu.
The menu contains first your own colors and then the 16 predefined colors in HTML. See the Color Sets section about how to define your own colors and how to group them into sets.

Target window

You can specify the target window in two ways:

1. type the window name in the text box,
2. choose a window name from the popup menu with your window cache.

Content type

You can specify the content type in two ways:

1. type the content type in the text box,
2. choose one from the popup menu.

Media descriptors, Content types, Link types

These are attributes which takes a list of values. Media descriptors and content types should be a comma separated list, while the link types should be space separated. You can either type the value you want directly into the text box, or select values from the popup menu. Clicking the Add button will add the selected item to the text box.
Note: If there is something selected in the menu when you leave the dialog, it will automatically be added to the attribute value. Thus if you only need one value, it is enough to select it in the menu without having to click Add.
The values in the menu can be edited by using the commands Content Types, Media Descriptors, and Link Types in the Preferences menu.

Predefined choices

Attributes which take a value from a predefined list of choices. Select a value from the popup menu.

Integer, Length, Multilength

Attributes which take a numerical value. Alpha will check that it is in the valid range and that it is of the right type, e.g. if a percentage value is allowed.

Flag

These are attributes which do not take any value. Check the corresponding checkbox to use any of them.

Date and time

These are attributes which take a date and time in ISO format as their value. Either specify the value or check Current time to have Alpha insert the value of the current time.

Using the status bar

Tab

If you type Tab, Alpha will look at what you have typed so far and match it against the possible options and attempt to complete it as much as possible. If Alpha cannot complete anything it will beep. Let us illustrate this with an example. If you are asked about the value for the attribute ALIGN of the P element, the possible values are LEFT, CENTER, RIGHT, and JUSTIFY. If you now type C and then tab, Alpha will complete this for you by adding ENTER giving the value CENTER.
Tab can be used for the following types of attributes:

Predefined choices

Alpha attempts to match against the list of predefined choices.

URL

Alpha attempts to match against your your URL cache.

Target window

Alpha attempts to match against your window cache.

Color

Alpha attempts to match against the list of color names.

Content type(s)

Alpha attempts to match against the list of content types. If you type a list of content types, Alpha will attempt to complete the one after the last comma.

Media descriptors

Alpha attempts to match against the list of media descriptors. If you type a list of media descriptors, Alpha will attempt to complete the one after the last comma.

Link types

Alpha attempts to match against the list of link types. If you type a list of link types, Alpha will attempt to complete the one after the last space.

Double Tab

As just explained, when you type Tab, Alpha will try to complete what you have typed as much as possible. Sometimes there are several possible options and Alpha can only complete partially. Then if you immediately type a second Tab, Alpha will open a window with a list of everything that match what you have typed so far. If you choose something from the list, Alpha will use that value and immediately jump to ask you about the next attribute.

Ctrl-F

Ctrl-F (⌃F) can be used for attributes of the types URL and Color. If you are asked for a URL, typing Ctrl-F will let you select a file from a file dialog. If you are asked for a color, typing Ctrl-F will let you define a new color from a color picker. Once you have selected a file or defined a new color, Alpha immediately jumps to ask you about the next attribute.
If you select a GIF, JPEG, or PNG file for the attribute SRC of IMG via a file dialog, the attributes WIDTH and HEIGHT are automatically determined. Just hit return for the WIDTH and HEIGHT attributes and the automatically determined values will be used.

Cmd-V

Pastes the clipboard into the status bar.

Ctrl-Q

Skips the current and subsequent attributes. This saves you from going through the whole list of attributes.

Ctrl-D

Sometimes there is a default value for an attribute. In particular when you are changing an existing tag, the current value is given as default. This default value is given within brackets in the prompt, like for instance:

If you type a new value, it will be used and if you just hit return without giving a value, the default one will be used. In this case, if you do not want any value at all and want to remove this attribute, type Ctrl-D (⌃D) to skip this attribute.

Ctrl-Z

Deletes everything written.

Escape

Cancel everything and exit the status editing mode.

Other things to note

Deciding which attributes to be asked about

• The document type declaration in the file, if there is one. Alpha recognizes HTML 5, HTML 4.0, HTML 4.01, XHTML 1.0, and XHTML 1.1 document type declarations.
• Preferences set using the menu item Attributes Globally in the Preferences submenu of the HTML menu.
• Individual settings for each HTML element using the menu item Use Attributes in the Preferences submenu of the HTML menu.

Individual settings

Always ask about

Attributes you always want to be asked about. They always appear in the attribute dialog box or are always prompted for in the status bar.

Don't ask about at first

Attributes you don't use so often but still want to be able to be asked about.
If you use dialog boxes, the dialog box will first only contain the attributes which you have told Alpha to Always ask about. Then there will be a button More… in the dialog box. Clicking this button will open a new larger dialog box which includes the attributes for which you have told Alpha: Don't ask about at first.
If you use the status bar, you are first asked about the attributes you have told Alpha to Always ask about. Then you are asked about the attributes for which you have told Alpha: Don't ask about at first. In this way you will be asked about the attributes you use most first. Remember that you can always skip all the subsequent attributes with Ctrl-Q (⌃Q).

Never ask about

Attributes you never want to be asked about. They never appear in the attribute dialogs or are prompted for in the status bar. No attributes have this setting by default.

Global vs individual settings

Document type declaration

• The menu items for those elements not in the HTML or XHTML version specified are disabled.
• The attributes not in the HTML or XHTML version specified are treated as if they belonged to the category Never ask about as discussed in the previous section. Thus Alpha treats them as non-existing.

    <!DOCTYPE HTML>

Strict

Includes all elements and attributes that have not been deprecated (see below) or do not appear in frameset documents. For HTML documents that use this DTD, use this document type declaration:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

For XHTML documents that use this DTD, use this document type declaration:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Transitional

Includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation such as alignment and colors). For HTML documents that use this DTD, use this document type declaration:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

For XHTML documents that use this DTD, use this document type declaration:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Frameset

Includes everything in the transitional DTD plus frames as well. For HTML documents that use this DTD, use this document type declaration:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

For XHTML documents that use this DTD, use this document type declaration:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">

This document type declaration must be used and should only be used for documents defining the frames layout, i.e. documents containing FRAMESET and FRAME elements. For documents defining the content of the frames, use either the strict or transitional DTD. If you want to use the attribute TARGET, then you have to use the transitional DTD.

XHTML 1.1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

Deprecated elements and attributes

Extensions to HTML 4.01

Preferences related to DTDs

Don't use extensions to HTML 4.01

HTML elements not included in HTML 4.01 will be disabled in the menu, and attributes not included in HTML 4.01 will not be asked about. Exactly the same set of elements and attributes are used as if the document had included a frameset document type declaration.

Don't use deprecated elements and attributes

Deprecated elements will be disabled in the menu and deprecated attributes will not be asked about (this includes the extensions). The set of elements and attributes and those in the strict DTD plus the ones used for frames. Use this setting when you are defining frames documents but don't want to use deprecated elements or attributes.

How to use template stops

    <H1>|</H1>•

    <H1>My header|</H1>•

    <H1>My header</H1>|

Text wrapping

    <B>important</B>

Contextual menu

Html Attributes

The Html Attributes submenu lets you insert new attributes in a tag. Note that attributes which have already been used do not appear in the menu. In this example, we have the attributes of the FRAME element. Let us say you select SCROLLING= from the menu. This attribute is then inserted into the tag with the insertion point between the quotes to let you type the attribute's value:

    <FRAME SRC="file.html" SCROLLING="|"•>

But before you type the value of the SCROLLING attribute, control-click the tag again, and select TITLE= from the submenu. This attribute is now inserted into the tag, but the insertion point is still between the quotes of the SCROLLING attribute.

    <FRAME SRC="file.html" SCROLLING="|" TITLE="•"•>

Edit Tag...

To change the attributes of the tag which you have clicked on. This is done in the way explained in the section Giving attributes to HTML elements, but this time the dialog box (or status bar) contains the current attribute values as default values.
If the element you want to change contains anything HTML mode does not understand, a warning message will first be shown. If you decide to insert a new tag, everything HTML mode does not understand will be removed.

Follow Link

This lets you follow a link of a URL attribute.
A remote URL is opened in you web browser. A relative URL attribute opens a new window with the file (if it exists and is a text file). If it does not exist, a dialog box appears as the one shown below. As you see, a new empty window can be opened with the name of the file. This window is automatically saved in the right place, and if necessary new folders are created. Thus, if you are making a new set of pages, you can make links to the ones you have not written yet and then, by control-clicking, let Alpha make empty files which are saved where you want them to be.

Following an anchor link <A HREF="#anchor"> jumps to the corresponding <A NAME="anchor"> in the file.

Shift-Command-double-clicking

Shift-Command-double-clicking on an opening tag

Shift-Command-double-clicking on a color attribute

Shift-Command-double-clicking on a URL attribute

Shift-Command-double-clicking on a CSS URL

Shift-Command-double-clicking on an include tag

Shift-Command-double-clicking in home page windows

Controlling the layout of the code

• the Element Layout… command in the Preferences submenu, which lets you define how you prefer blank lines and carriage returns to be inserted around each HTML element.
• the Indentation… command in the Preferences submenu, which lets you choose elements to indent the content of.
• the Formatting submenu where you find functions for reformatting the document according to your layout and indentation preferences. With this menu you also insert special formatting tags, which define how a section of the document should be formatted. This is useful for example if your document contains some server side scripting code, which you would like to have a special layout.

Element layout preferences

Elements without a closing tag

    some text before the tag
    <TAG>
    some text after the tag 

Elements with a closing tag

With the first option, Alpha will format the code like this:

    some text before the tag <TAG>text between tags</TAG> some text after the tag

With the second option, Alpha will format the code like this:

    some text before the tag
    <TAG>text between tags</TAG>
    some text after the tag

With the third option, Alpha will format the code like this:

    some text before the tag
    
    <TAG>text between tags</TAG>
    
    some text after the tag

With the fourth option, Alpha will format the code like this:

    some text before the tag
    
    <TAG>
    text between tags
    </TAG>
    
    some text after the tag 

Indentation preferences

    some text before the tag
    
    <TAG>
    text between tags
    </TAG>
    
    some text after the tag 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
    
    <TR VALIGN="TOP">
        <TH ALIGN="LEFT">ELEMENT may not have a closing tag.</TH>
        <TD>A closing tag for an element which may not have one has been 
        found, like  </BR></SPAN>.</TD>
    </TR>
    
</TABLE>

The Formatting menu

Reformat Paragraph

If there is a selection, the code is reformatted within the selection, otherwise it is reformatted in the paragraph of the current position. A paragraph is in this case defined to be everything between the nearest blank lines.

Reformat Document

The same kind of reformatting applied to the entire document.
The reformatting is basically done such that the document would look as if you had typed it from top to bottom without changing anything. The following is performed using the following rules:

• Everything between SCRIPT, STYLE, and PRE tags as well as everything inside comments is left untouched.
• The content of formatting tags (see below) in indented according to the tags, but is otherwise not changed.
• Line breaks are never inserted inside attribute values. If there is an attribute ATTR="blah blah", then "blah blah" is never broken into two lines. This is in particular to prevent that the event handlers be broken into two lines.
• Provided these constraints, Alpha inserts line breaks and blank lines and indents the code according to your layout and indentation preferences, and otherwise tries to make the lines approximately equally long.

Unfortunately reformatting of the code is rather complex and therefore not lightning fast.

No Formatting

Insert formatting tags around the selected text indicating that the content between the tags should not be reformatted at all, but be left as it is. You can for example use this around server side scripting code, which Alpha has no special support for. For instance:

 <!-- #NO-FORMATTING -->
some text which should left untouched
<!-- /#NO-FORMATTING --> 

C Style Formatting

Insert formatting tags around the selected text indicating that the content between the tags should be formatted like C code. This is the same way as both JavaScript code and CSS code get formatted. For instance:

<!-- #C-FORMATTING -->
if (a == 17) {
    return;
}
<!-- /#C-FORMATTING -->

Word Completion

<ta

<TABLE|>
    •
</TABLE>
•

<TABLE ce|>
    •
</TABLE>
•

<TABLE CELLSPACING="|"•>
    •
</TABLE>
•

<TABLE CELL|>•
    •
</TABLE>
•

Word completion when typing attribute values

Predefined choices

Alpha attempts to match against the list of predefined choices.

URL

Alpha attempts to match against your your URL cache.

Target window

Alpha attempts to match against your window cache.

Color

Alpha attempts to match against the list of color names.

Content type(s)

Alpha attempts to match against the list of content types. If you type a list of content types, Alpha will attempt to complete the one after the last comma.

Media descriptors

Alpha attempts to match against the list of media descriptors. If you type a list of media descriptors, Alpha will attempt to complete the one after the last comma.

Link types

Alpha attempts to match against the list of link types. If you type a list of link types, Alpha will attempt to complete the one after the last space.

    <FONT COLOR="ye|">

    <FONT COLOR="#FFFF00">

Word completion when editing CSS and JavaScript

Electrics - automatic typing by Alpha

Electric braces

Enabling Electric braces tells Alpha to treat the left or right brace '{', '}' keys as special keypresses which enter the '{' or '}' character, followed by a carriage return and then indent the following line correctly. In HTML mode the braces are only electric inside SCRIPT and STYLE elements. Outside SCRIPT and STYLE elements typing '{' or '}' simply inserts a '{' or a '}'. Note: for the electric braces to work, you must select your keyboard in the dialog Alpha ↣ Preferences ↣ System Preferences ↣ International.

Electric semicolon

Enabling Electric semicolon tells Alpha to treat the semicolon key ';' as special keypresses which enters the ';' character followed by a carriage return and then indents the following line correctly. The ';' key is context-dependent so you can still enter a for( ; ; ) loop in JavaScript code without Alpha messing things up. In HTML mode the semicolon is only electric inside SCRIPT and STYLE elements. Outside SCRIPT and STYLE elements, typing ';' simply inserts a ';'.

Indent on return

Enabling Indent on return tells Alpha to indent the following line automatically whenever you press return.

Auto-indent when typing > of a tag

Enabling this feature will tell Alpha to indent the current line when you type the > of a HTML tag at the beginning of a line. This will make sure that the code is correctly indented when you simply type the code without using the menu items for HTML elements.

Other editing features

Select Container

Selects matching tags which include the current position or selection. Repeated, it expands the selection. Like the "Balance" item under the Edit menu. All tags without a corresponding closing tag are ignored. As a simple example let us say you have the text

• here is some text <B>blah| blah</B> some more blah

then Select Container will select

• here is some text <B>blah blah</B> some more blah

Select in Container

Selects the content of matching tags which include the current position or selection. As a simple example let us again say you have the text

• here is some text <B>blah| blah</B> some more blah

then Select in Container will select

• here is some text <B>blah blah</B> some more blah

Select Tag

Selects the first tag at or to the left of the current position. Repeated, it will jump to the next tag to the left. As a simple example let us again say you have the text

• here is some text <B>blah| blah</B> some more blah

then Select Tag will select

• here is some text <B>blah blah</B> some more blah

Untag

Removes a tag pair surrounding the current position or selection. All tags without a corresponding closing tag are ignored. As a simple example let us again say you have the text

• here is some text <B>blah| blah</B> some more blah

then Untag will remove the tags to give you

• here is some text blah| blah some more blah

Untag and Select

Removes a tag pair surrounding the current position or selection and selects the content of the tag pair. All tags without a corresponding closing tag are ignored. As a simple example let us again say you have the text

• here is some text <B>blah| blah</B> some more blah

then Untag and Select will remove the tags and select the text to give you

• here is some text blah blah some more blah

In this example this would be useful if you want to change the B tags to I tags. Then you have the text selected and can easily wrap it with I tags.

Remove Opening

If the first tag to the left of the current position is a tag without a corresponding closing tag, it is removed. As a simple example let us say you have the text

• here is some text <IMG SRC="pic.gif"> blah| blah

then Remove Opening will remove the tag to give you

• here is some text blah| blah

Edit Tag...

To change the attributes of the tag above or to the left of the current position. This is done in the way explained in the section Giving attributes to HTML elements, but this time the dialog box (or status bar) contains the current attribute values as default values.
If the element you want to change contains anything HTML mode does not understand, a warning message will first be shown. If you decide to insert a new tag, everything HTML mode does not understand will be removed.

Change Choice

To change an attribute with predefined choices, without bringing up a dialog box. Put the insertion point at an attribute with predefined choices. Change Choice will then change the attribute to the next choice in the list of choices. Use Change Choice several times to go through the list. As a simple example <P ALIGN="CENTER"> is changed to <P ALIGN="RIGHT"> which is changed to <P ALIGN="LEFT"> etc.

Reveal Color

If you move the current position to, or select any part of, a color attribute in the document and then choose Reveal color, the number will be replaced with its name, and if you choose Reveal color again, the number appears again. For example "#0000FF" is changed to "blue" and back again. This is useful if you want to know what a cryptic color number stands for. Do not forget that the browser only understands the number so do not leave the name in the document.

Insert Attributes

To insert new attributes in a tag at the current position. Let's say that the current position is at a TABLE tag. If you now use Insert Attributes a window is opened where you can pick new attributes for TABLE. Shift-click to select the ones you want. The new attributes are now inserted like this:

• <TABLE CELLSPACING="|" CELLPADDING="•">•

You can now type the attribute values and use tab to jump between the attributes. The attributes are inserted exactly in the same way as when you use the contextual menu.

Tags to Uppercase

Transforms all tags to uppercase. If there is a selection, the code in the selection is transformed, otherwise the whole document is transformed.

Tags to Lowercase

Transforms all tags to lowercase.

Quote All Attributes

Puts quotes around all attribute values, changing <TAG ATTR=VAL> to <TAG ATTR="VAL">. This is intended to be used to make the coloring work better (see the Coloring section). If there is a selection, this function applies to the selection, otherwise it applies to the whole document.

Remove Tags

Removes all tags from the text. If there is a selection the tags are removed in that selection, otherwise they are removed in the whole document. If tags are removed in the whole document, the text without tags can optionally be put in a new window.

Coloring

Color of HTML tags

The color of the HTML tags. The default is blue.

Color of attributes

The color of the HTML attributes. The default is dodgerblue.

Color of strings

The color of everything between quotes. The default is green.

Color of HTML comments

The color of the HTML comments enclosed between <!-- and --> tags. The default is red.

Color JavaScript keywords

If checked, keywords and comments in JavaScript will be colored. These keywords also include the event handlers. By default JavaScript keywords are not colored. Coloring of JavaScript keywords is not possible if 'simple coloring' is used.

Color of JavaScript keywords

The color of keywords in JavaScript. Applies only if you choose to color JavaScript keywords. The default is magenta.

Color CSS keywords

If checked, keywords and comments in CSS will be colored. By default CSS keywords are not colored. Coloring of CSS keywords is not possible if 'simple coloring' is on.

Color of CSS keywords

The color of keywords in CSS. Applies only if you choose to color CSS keywords. The default is cyan.

Color of JavaScript and CSS comments

The color of comments in JavaScript and CSS. Applies only if you choose to color JavaScript or CSS keywords. The default is red.

Functions popup

Creating a new document - templates

• For each home page folder, you can optionally specify a template folder containing all templates for that home page (see the Configuring HTML mode section).
• To select the template, you have to first select the right home page in the top popup menu.
• The second popup menu is now modified to contain the names of all text files in the template folder of the home page you have chosen.
• Now pick a template from the second popup menu. Note: using a template is optional.

• give the document a title,
• choose elements to insert in the documents HEAD,
• insert a document type declaration,
• specify the encoding in the XML declaration when XHTML is used.

A template example

    <!DOCTYPE HTML>
    <HTML>
    
    <HEAD>
    <TITLE>Default title</TITLE>
    <LINK HREF="mystyle.css" REL="stylesheet">
    
    </HEAD>
    
    <BODY BACKGROUND="bg.jpg">
    
    #CONTENT#
    
    </BODY>
    </HTML> 

Sending the window to your browser

• The browser currently marked in this menu is the one your documents will be sent to when you use Browsers ↣ Send File to Browser or Browsers ↣ Send URL to Browser .
• To change browser, select the browser's menu item to mark it.
• If you want Alpha to also send the window to the browser when you change it, press the Option (⌥) key simultaneously.
• To send the URL to the browser automatically when you select a browser in the menu, hold down both the Option (⌥) and the Shift (⇧) keys.

Send File to Browser

Launches your browser and sends the document to it.

Send URL to Browser

Launches your browser and sends the document URL to it. The URL is defined in the Home Pages dialog. This feature is useful when you edit the document directly on the server and the document contains server side scripting. Note: some browsers may not reload the page if you send the same URL several times.

Paragraph utilities

Insert Line Breaks

Inserts a <BR> tag at the end of each line in a selection. To use this, first select the text where you want the <BR> tags. For example, the text

    one line of text
    another line of text
    a third line of text

will be changed to

    one line of text<BR>
    another line of text<BR>
    a third line of text<BR>

Remove Line Breaks

Removes all <BR> elements in a selection (not only the ones at end of lines). To use this, first select the text where you want to remove the <BR> tags. This is the opposite of the command above. For example, the text

    one line of text<BR>
    another line of text<BR>
    a third line of text<BR>

will be changed to

    one line of text
    another line of text
    a third line of text

Insert Paragraphs

Inserts <P> elements at each empty line in a selection, and one just before the selection. To use this, first select the text where you want the <P> elements. For example, the text

    blah blaha
    more text
    
    and yet some more 
    and <B>this is bold</B>

will be changed to

    <P>
    blah blaha
    more text
    </P>
     
    <P>
    and yet some more 
    and <B>this is bold</B>
    </P>

Creating lists

Make List…

Makes a list from the text in a selection. For example, if you have a list

* item one
* item two 
* item two
and a half
* item three

you can make an HTML list of them. First select the lines with the items, before you choose Make list from the menu. You are then presented with a dialog shown below where you can specify

• a string with which all list items must begin, in this case *. You cannot transform a list where the items begins with 1), 2) etc. All items must begin with the same string.
• Which kind of list you want. Choose 'None' if you don't want the list tags to be inserted, for example if you are inserting new items in an existing list.

The result in this case will be

<UL>
    <LI>item one
    <LI>item two
    <LI>item two and a half
    <LI>item three
</UL>

Unordered List, Ordered List, Directory, Menu

Commands to create list of the types UL, OL, DIR, and MENU respectively.
When you make a list you are first asked how many items you want and, in some cases, if you want to be asked about attributes for each list item. You are then asked about attributes for the list element and finally, if you have said so, about attributes for each list item.

For example, choosing three list items would insert the template

<UL>
    <LI>|
    <LI>•
    <LI>•
</UL>•

If you select some text before creating the list it will be inserted as the first list item.

List Item

Inserts an <LI> element. Alpha checks in which list this item will appear and ask you about the appropriate attributes.

Definition List

Function to create a definition list, DL. As for the other lists, Alpha asks you how many items you want and then asks you about the attributes for DL, and optionally for each DD and DT.

Choosing three items, you would get the following template:

<DL>
    <DT>|<DD>•
    <DT>•<DD>•
    <DT>•<DD>•
</DL>•

Definition Entry

Inserts a template for a new entry in a definition list.

<DT>|<DD>•

Table utilities

Table Template...

A function to easily build a table if it does not have too complicated a structure.

• the number of rows and columns you want.
• whether you want table headers (TH) in the first row and/or the first column. The rest will be table cells (TD).
• whether or not you want TABLE tags. Skip the table tags if you want to insert new rows in an existing table.
• attributes for TABLE.
• attributes for TR. These attributes will be the same for every row.

<TABLE>
    
    <TR>
        <TD>|</TD>
        <TD>•</TD>
    </TR>
    
    <TR>
        <TD>•</TD>
        <TD>•</TD>
    </TR>
            
</TABLE>•

Tabs To Rows…

Takes a tab-delimited table and makes HTML table rows. To use this function, first select the text to make table rows of before you choose Tabs to Rows from the menu.

• Whether you want table headers (TH) in the first row and/or the first column. The rest will be table cells (TD).
• Whether or not you want TABLE tags. Skip the table tags if you want to insert new rows in an existing table.
• Whether several tabs after each other shall be treated as a single tab or not. You can put extra tabs between the cell to obtain straight columns and then check this option to get the HTML table you want.
• Attributes for TABLE.
• Attributes for TR. These attributes will be the same for every row.

a   b   c
d   e   f

<TABLE>
    
    <TR>
        <TD>a</TD>
        <TD>b</TD>
        <TD>c</TD>
    </TR>
    
    <TR>
        <TD>d</TD>
        <TD>e</TD>
        <TD>f</TD>
    </TR>
    
</TABLE>

Rows To Tabs

Converts table rows in a selection to a tab-delimited format. (This is Tabs to Rows… backwards.) To use this, first select the table rows you want to convert. This function will remove the elements TR, TH and TD, and put one tab between each table cell. Everything in each table row will be put on one line. If the table contains cells of varying length you may have to change the tab size for the table to look pretty. This function does not remove the surrounding TABLE tags.

Import Table…

Function to import a tab delimited table from a file. This works just like Tabs to Rows… except that the table is read from a file rather than being selected in the document.

Image maps

Convert NCSA Map…

Lets you select an image map file for the NCSA server, converts it to a client side image map definition, and inserts it at the current position in the document.

Convert CERN Map…

The same function for image map files for the CERN server.

Character entities

Validating the code

• Always try to fix the first error first. Often one error can produce more than one error message.
• Some elements have optional closing tags, P for example. That Alpha says there is a closing tag without a matching opening tag may be because a closing tag has been implicitly inserted.
• The element TBODY has both optional opening and closing tags. Therefore you may see error messages referring to TBODY although you have no TBODY elements in your document.
• The Web Design Group has very good documentation about in which context each element may appear.

Find Unbalanced Tags

This is the simplest of the three validating functions. It looks for opening tags without a matching closing tag and vice versa. When checking, Alpha knows which elements have optional opening tags, which have optional closing tags and which may not have closing tags. Alpha does not check if the elements are valid HTML elements. The possible error messages are:

ELEMENT may not have a closing tag.

A closing tag for an element which may not have one has been found, like </BR>.

ELEMENT1 must be closed before ELEMENT2.

A closing tag is missing, like in this case: <B><I></B>.

Closing ELEMENT tag without a matching opening tag.

A tag </ELEMENT> has been found with no corresponding <ELEMENT>.

The ELEMENT tag is not an empty element tag.

A tag of an empty element, such as <br>, has been found in an XHTML document but the tag doesn't use the minimized syntax <br/>. (This is strictly not an error, since <br></br> is valid in XHTML, but the minimized form is preferred for compatibility with some browsers.)

No element name in tag.

Alpha could not find the element name in a tag.

Check Tags

A more complete validation, and therefore more time consuming. Alpha checks all tags in the document, but ignores the attributes.
Alpha can only validate the code according to the three HTML 4.01 document type declarations. If there is an HTML 4.0 or HTML 4.01 document type declaration in the beginning of the document, Alpha will use it to determine which elements are legal. Currently all document type declarations other than HTML 4.0 and HTML 4.01 are ignored. Alpha treats HTML 4.0 and HTML 4.01 declarations as equivalent and validates according to HTML 4.01. If there is no document type declaration at the beginning of the document, Alpha will make a clever guess and use either the transitional or the frameset declaration. General error messages are:

No element name in tag.

Alpha could not find the element name in a tag.

Unmatched <.

A single < has been found.

ELEMENT is unknown.

An unknown HTML element not part of HTML 4.01 or XHTML 1.0 or 1.1 has been found.

ELEMENT may not be used with the strict DTD.

ELEMENT is part of HTML 4.01 or XHTML 1.0 but may not be used if you use the strict document type declaration.

ELEMENT may mot have a closing tag.

A closing tag for an element which may not have one has been found, like </BR>.

The ELEMENT tag is not an empty element tag.

A tag of an empty element, such as <br>, has been found in an XHTML document but the tag doesn't use the minimized syntax <br/>. (This is strictly not an error, since <br></br> is valid in XHTML, but the minimized form is preferred for compatibility with some browsers.)

Closing ELEMENT tag without a matching opening tag.

A tag </ELEMENT> has been found with no corresponding <ELEMENT>.

ELEMENT1 must be closed before ELEMENT2.

A closing tag is missing, like in this case: <B><I></B>.

Text after </HTML>.

No text may appear after the final </HTML> tag, except for comments.

ELEMENT1 may not contain ELEMENT2.

ELEMENT2 may not appear as a child element of ELEMENT1. For example <TABLE><B> is invalid. TABLE may not contain B elements as child elements.

ELEMENT may not contain text.

Plain text has been found inside an element which may not contain text. Example: <UL>text. UL may only contain LI elements.

ELEMENT1 may not appear anywhere inside ELEMENT2.

The error messages above only concern the case when an element may not be a child element of another element. This error message tells that ELEMENT1 may not appear inside ELEMENT2 at any level of nesting. For example <A><B><A></A></B></A> is invalid. <A> elements cannot be nested at any level.

The ELEMENT tag must be in lowercase in XHTML.

In XHTML all tags must be in lowercase.

In addition there are a large number of error messages specific to an HTML element.

Check Tags and Attributes

The most complete validation, and therefore the most time consuming. Alpha checks all tags in the document including the attributes. The possible error messages are the same as when using Check Tags plus a number of error messages for the attribute values.

Character translation

åäö -> HTML

Translates characters to HTML entities. The characters which are translated are all that you find in the Character Entities menu except <, >, and & and a few characters which have no Mac equivalent.

HTML -> åäö

Translates HTML entities to characters.

<>& -> HTML

Translates the characters <>& to their HTML entities.

HTML -> <>&

Translates them back again.

Color Sets

Predefined colors

Editing color sets

New…

To define a new color with a color picker and choose a name for it.

Change…

To change a color with a color picker and optionally change its name.

Remove

To remove the color selected in the menu.

URL and frame target sets

Active URL sets

Add New URLs To submenu

Editing URL sets

Import…

Lets you select a file and scans it to import all URLs found into a URL set.

Add Folder…

Adds the names of all files in a folder to a URL set. You can optionally add a path before the file name. For example, if you have a folder pics with images, you might want to add pics/file.gif to the set rather than only file.gif.

Checking links

file.html                Line 8:   HREF="otherfile.html"
file2.html               Line 23:  (anchor missing) HREF="file.html#anchor"
folder:file3.html        Line 17:  (BASE used) SRC="pic/coolpic.gif"

• (anchor missing) means that the file exists but that the anchor is missing in the file.
• (BASE used) means that the file contains a BASE element.

Fixing a broken link

• Browse to the line with the link you want to fix in the window with invalid links.
• Hit Option-Return. You can now select a new file from a file dialog.
• The link is now changed in your HTML document and it is removed from the list of invalid links.

Link checking preferences

Check anchors

When this option is checked, the commands in the Check links menu will check that there is an anchor <A NAME="anchor"> in file.html if a link <A HREF="file.html#anchor"> points to it. By default anchors are checked.

Case sensitive checking (slower)

When this option is checked, the commands in the Check links menu will check that the case in the links match the case in the file and folder names. Case sensitive checking is slower, and therefore not done by default.

Includes

Including a file

• If you have defined a Home Page Folder (via Preferences ↣ Home Pages), the include tags look like this:

  <!-- #INCLUDE INCLPATH="myfile.html" -->
  content of myfile.html will go here
  <!-- /#INCLUDE -->
  

• Otherwise they look like:

  <!-- #INCLUDE PATH="myIncludeFolder/myfile.html"-->
  content of myfile.html will go here
  <!-- /#INCLUDE -->
  

  where myIncludeFolder is an absolute or relative path calculated by ALpha when the include tag is created.

• Suppose you have a home page folder for http://www.net/ and have defined a corresponding include folder.
• Open a new file include.html in the include folder.
• Make a couple of links from include.html. Use the file dialog and select files in the home page folder. The links will now be like HREF=":HOMEPAGE:somefile.html".
• Now open a new file hi.html in the home page folder. Use Insert Include Tags and select the file include.html in the include folder. The part :HOMEPAGE: in the links will now be replaced by the correct relative path pointing to somefile.html.

• If you check links in include.html, Alpha will look for files in the home page folder.
• If you shift-cmd-double-click a link in include.html, Alpha will open the file in your home page folder.

Using place holders

My name is ##NAME##. 

<!-- #INCLUDE INCLPATH="myfile.html" NAME="Johan" -->
My name is Johan.
<!-- /#INCLUDE -->

NAME="J\$h\[a\]n\\s"

Using scripts

set myname Johan

proc myproc {} {
    return Johan
}

subst $myname

subst [myproc]

<!-- #INCLUDE INCLPATH="myfile.html" NAME="$myname and he is another [myproc]" -->
My name is Johan and he is another Johan.
<!-- /#INCLUDE -->

Insert Include Tags…

Asks you for a file to include, and inserts two tags inside comments. These tags look a little different depending on where the included file is relative to the current document. We begin with the case where there are no place holders.

• Included file is in the include folder:

  <!-- #INCLUDE INCLPATH="path to file relative to include folder" -->
  content of file
  <!-- /#INCLUDE -->
  

• Included file is somewhere else on the same disk.

  <!-- #INCLUDE PATH="relative path to file" -->
  content of file
  <!-- /#INCLUDE -->
  

• Included file is on another disk.

  <!-- #INCLUDE FILE="path to file" -->
  content of file
  <!-- /#INCLUDE -->
  

Inserting include files with place holders

Updating the files

Update Window

Replaces the text between all pairs of include tags with the content of the file specified in the opening tags.

Update Home Page…

Replaces the text between all pairs of include tags in HTML files in a Home Page Folder with the content of the file specified in the opening tags. This works for files which belong to a Home Page created via Preferences ↣ Home Pages (see Configuring Home Pages).

Update Folder…

The same function for a folder (not necessarily corresponding to a Home Page folder).

Update File…

The same function for a single file.

• If you write anything between the include tags, it is only a temporary change. The next time you update your document everything between the tags is replaced.
• If you remove include tags from a document, make sure you remove both the opening tag and the corresponding closing tag.
• If a file contains last modified date tags, the date is changed if the file has been modified.

Uploading files with FTP

Save to FTP Server

This is the basic function for uploading files. It first saves the current window to the disk and then uploads it to your ftp server.
If Alpha doesn't know your password you are asked for it.

Forget Passwords

Makes Alpha forget all passwords, except those which you specified when you configured HTML mode.

Upload Home Page...

This function lets you intelligently upload all files in a home page folder by uploading only those which are locally modified. This function works a little differently depending on which ftp application you use together with Alpha.

Uploading with Interarchy

This works in the same way as using the FTP Mirror item in Interarchy's File menu and choosing your home page folder as source folder. See Interarchy's documentation for details how the mirror upload works with Interarchy. Warning: note that Interarchy deletes remote files not found locally.

Uploading with Fetch

Fetch does not have a built in mirror function and therefore uploading with Fetch is more primitive. You have to specify yourself which files to upload by telling it to upload those files which have been modified within a certain period of time. When using Fetch, a dialog box is first opened asking you about this before the upload starts.

Uploading with NetFinder

This works in the same way as NetFinder's built in mirror functionality, but there are some technicalities you need to be aware of. NetFinder uses mirror lists to do the mirroring. Therefore Alpha needs to know which mirror list file to use when telling NetFinder to start uploading. There are two options:

• For each home page folder, you can select a mirror list file which contain a mirror item for this home page. Note: this mirror list file may only contain one single item, because I have only been able to make Alpha tell NetFinder to simultaneously mirror all items in a mirror list.
• You can let HTML mode create a mirror list file each time you upload. This file contains the server, user name, password, and path, and otherwise uses the default settings that NetFinder uses when you create a new mirror item.

Home page windows

• Key combinations with special functions in the home page windows

cmd-shift-C

Copies the path of the file at the current line. The line doesn't have to be selected. Alpha grabs the file anyway. This copying does not use the clipboard. The file can then pasted into an HTML document as a link using Paste URL or as an include file using Paste Include Tags.

return

Return on a text file opens the file in Alpha. Return on a folder opens a new home page window with the contents of the folder (or brings it to front if it is already open).

cmd-downarrow

The same as return.

cmd-double-click

Works like return.

option-return

The same functionality as return and in addition closes the current home page window.

cmd-option-downarrow

The same as option-return.

cmd-return

Opens the parent folder of the window, or brings it to the front if it's already open.

cmd-uparrow

The same as cmd-return.

cmd-option-return

The same as cmd-return and in addition closes the home page window.

cmd-option-uparrow

The same as cmd-option-return.

cmd-R

Refreshes the window, i.e. it removes or adds lines if you have removed or added any files in the folder.

• Menu items

Open…

Opens a file dialog and lets you select a folder. A home page window for this folder is then opened.

Paste URL

Pastes the URL which you previously have copied with Cmd-Shift-C (⇧⌘C) from the home page window. If the file is an image, an IMG tag is inserted, otherwise an A tag is inserted.

Paste Include Tags

Inserts include tags for the file you have previously copied from a home page window.

Refresh Windows

Refreshes all open home page windows by removing or adding lines to them if any files have been removed or added in the corresponding folders.

Extending HTML mode

New Element

to add a new element

Edit Element

to add new attributes to an existing HTML element, or one you have previously added.

Remove Additions

to delete a new element or to remove the new attributes you have added to an existing element.

Adding a new element

• The name of the element.
• Whether the element has a closing tag or not. (Applies only if the type below is Normal.)
• The type of the element. There are three available types:
  • Normal. This is the option you would normally use.
  • A new type of INPUT element. This option is here for technical and historical reasons. In the Forms menu the INPUT element is available for each value of the TYPE attribute. This is because the other attributes vary depending on the value of the TYPE attribute. Here you can add another variant of the INPUT element, and in this case you give the value of the TYPE attribute as the element name.
  • A plug-in using EMBED. Most plug-ins have their own specific attributes. Here you add a new EMBED element with all these attributes. By default all attributes of the generic EMBED element are added.

Editing an element

• First we have the attribute name - a bullet to the left of the name indicates that it is provided by HTML mode and cannot be edited.
• Then comes the attribute type.
• The text required indicates that the attribute is required.
• For attributes of the type Choices all available choices are listed below.
• For attributes taking numerical values the minimum and maximum allowed values are given below.

Adding a new attribute

• The attribute name.
• The attribute type.
• Whether the attribute is required or not.

Flag Attributes

which are flags and don't take any value, like ISMAP for <IMG> or NOHREF for <AREA>. These attributes will be checkboxes in the attribute dialog.

URL Attributes

which take a URL as value, like HREF, SRC, etc.

Color Attributes

which take a color as value.

Frame Target Attributes

which take a target window as value, like the attribute TARGET.

Choices Attributes

which can only take certain predefined choices, such as ALIGN.

Length Attributes

which take an integer or percentage value.

Integer Attributes

which take an integer value.

Other Attributes

which do not fit into any of the other categories or can take any value.

Content Type Attributes

which take a content type as value, like TYPE of STYLE.

Content Types Attributes

which take a comma separated list of content types as value.

Event Handler Attributes

which are event handlers for JavaScript.

Link Types Attributes

which take a space separated list of link types as value, link REL and REV of LINK.

Multi length Attributes

which take a length value or a Value of the form 2*, like WIDTH of COL.

Multi Lengths Attributes

which take a comma separated list of multi length values, like COLS and ROWS of FRAMESET.

Language Code Attributes

which take a language code as value, like LANG.

Character Set Attributes

which take a character set as value, like CHARSET.

Character Sets Attributes

which take a space separated list of character sets as value, like ACCEPT-CHARSET of FORM.

Lengths Attributes

which take a comma separated list of integer values, like COORDS of AREA.

Date and Time Attributes

which take a date and time value on ISO format, like DATETIME of INS and DEL.

Character Attributes

which take a single character as value, like ACCESSKEY.

Media Descriptors Attributes

which take a comma separated list of media descriptors as value, like MEDIA of STYLE.

Editing and deleting attributes

Saving

Moving and renaming files and folders

Move Files…

Lets you move a set of files from one folder to another within a home page folder or within an include folder.
When moving files, you are

• first asked to select the folder which contains the files you want to move;
• then you are asked to select the files you want to move from this folder;
• finally you are asked to select the destination folder.

Rename File…

Lets you rename and move a single file within a home page folder or within an include folder.

Rename Folder…

Lets you rename and move a folder within a home page folder or within an include folder.

• first asked to select the file or folder to rename and move;
• then you are asked to select a new name and the destination folder.

Document utilities

Last Modified…

Adds tags to the document which makes it possible to automatically update the date and time when the document is saved. Two tags inside HTML comments are inserted:

<!-- #LASTMODIFIED TEXT="some text" FORM="date format" LANG="language"-->
some text and date
<!-- /#LASTMODIFIED -->

Whenever the document is saved the date is updated. Do not write anything between the comment tags. It will be removed when the document is saved.
Character translation is done automatically for the text and the date.

When you use Last Modified… in the HTML Utilities menu a dialog box is opened where you can specify:

• the text before the date (Default: Last modified). You can change the default text in the General Preferences dialog box.
• the date format, relaxed ISO, strict ISO, long, abbreviated or short. Relaxed and strict ISO are universal while the other three formats are language dependent. (We here show the U.S. format.)
  • Relaxed ISO 2001-01-14 15:07
  • Strict ISO 2001-01-14T15:07:18+01:00
  • Long Sunday, January 14, 2001 3:07 PM
  • Abbreviated Sun, Jan 14, 2001 3:07 PM
  • Short 1/14/01 3:07 PM
• if the weekday should be included in the date. It applies to the Long and Abbreviated formats.
• if the time should be included in the date. It applies to all except the Strict ISO format.
• if the time should be given in seconds. It applies to all except the Strict ISO format.
• the language of the date format. It applies to the Long, Abbreviated, and Short formats. If no language is specified, the format in the Date and Time control panel is used.

Note: The short time format can be confusing. For example 4/5/66 means 4 May 1966 in some parts of the world and April 5, 1966 in other parts.

Document Type…

Inserts a document type declaration at the top of the document. If there is one already, it is replaced.

Document index…

Makes an index of the document with an item for each header H1-6. If there already exists an index in the document, it is replaced, otherwise a new one is inserted at the current position.

The index can be done using either PRE or an UL list. When Alpha makes the index, it goes through the window and looks for all headers. If there is an anchor <A NAME="..."> inside a header that anchor is used when building the index, otherwise an anchor is inserted inside the header. Alpha then inserts

<!-- #DOCINDEX TYPE="PRE,3" DEPTH="6" -->
the index
<!-- /#DOCINDEX -->

The index consists of a list with links to the various headers.

Key bindings

Key bindings for character entities

Preferences

General Dialog

Bring browser to front when sending a window to it

If checked, when you send a file to the browser, the browser will be brought to the foreground. If you have lots of screen space and are just validating, uncheck this flag to leave the browser in the background and Alpha in the foreground. By default the browser is brought to the foreground.

Save window without asking when sending it to the browser

If checked, when you send a file to the browser, the window is saved automatically without asking you. By default you are asked if you want to save the window.

Set tags in lower case

If not checked, elements will be like <P>; if checked, like <p>. By default upper case is used in HTML. In XHTML lowercase is required.

Add extra space before /> in empty XHTML elements

If checked, elements such as <br/> will get an extra space before />, like <br /> in XHTML. This for better compatibility with some browsers.

Use template stops (•)

If checked, will insert the • characters. By default the • characters are inserted.

Electric Braces, Electric Semicolon, Indent On Return

See the section Electrics - automatic typing by Alpha.

Give attributes in dialog boxes/status bar

To choose whether you want to use dialog boxes or the status bar when you give attributes to an HTML element. By default dialog boxes are used.

Change attributes in dialog boxes/status bar

To choose whether you want to use dialog boxes or the status bar when you change the attributes in an existing HTML element by using Edit Tag in the Editing menu or by shift-command-double clicking on an opening tag. By default dialog boxes are used.

Beep for first attribute (applies only if you use the status bar)

If checked, and you input element attributes from the status bar, Alpha will beep when asking for element attribute information there. By default Alpha will beep. This applies only if you use the status bar.

Use old style Comment Paragraph

In HTML mode 3.0 I made a change in (Un)Comment Paragraph, which made Uncomment Paragraph incompatible with comments created by Comment Paragraph in older versions of HTML mode. If you have old paragraph comments, enable this preference to ignore the change in (Un)Comment Paragraph.

Spell Check Comments

This option indicates if spell checking should apply to comments. This setting is only supported by Alpha's internal spell checker. By default, it is enabled.

Spell Check HEAD

This option indicates if spell checking should also apply to the HEAD section of the document. This setting is only supported by Alpha's internal spell checker. By default, it is disabled.

Auto-indent when typing > of a tag

See the section Electrics - automatic typing by Alpha.

Adjust current line indentation when inserting a template

If this preference is enabled, Alpha adjusts the indentation of the current line when inserting a template at the beginning of the line. This applies both when you insert a template using a menu item and when you use word completion. This behavior helps you making sure the code is indented according to your preferences. By default Alpha adjusts the indentation.

Open attribute dialog after completing an element

When checked Alpha will open an attribute dialog - or ask you for the attributes in the status bar - when you uniquely word complete an opening element tag <ELEM to a template including a closing tag. Uncheck if you prefer to type the attributes too, and do not want the dialog.

Create missing file without asking when shift-command-double-clicking a link

If checked and you shift-command-double-click a link pointing to a file which does not exist, Alpha will create an empty file and open it without first asking you if you want to create the file. By default you are asked before the file is created.

'Insert include tags' only insert tags

If checked, Alpha will only insert the include tags when you use 'Insert include tags', and not insert the file to be included until you update the window. By default only the tags are inserted.

Preserve line endings when updating includes or moving files

If checked, Alpha will make sure the type of line endings used in each file - Mac, Windows, or Unix - is preserved when updating files with include tags or when moving files. By default line endings are not preserved, because this slightly slows down the updating.

Update META tags with NAME="DATE" attributes when saving

If checked, HTML mode will look for tags like <META CONTENT="2001-01-14" NAME="DATE"> in the document every time you are saving and update the date. By default this is not done.

'Last modified' text

The default text when you insert last modified tags.

HTML menu icon

The icon for the HTML menu.

HTML Utilities menu icon

The icon for the HTML Utilities menu.

Attributes Globally Dialog

Use Attributes Dialog

Indentation Dialog

Layout Dialog

Optional Closing Tags Dialog

Home Pages Dialog

Menu Shortcuts Dialog

Coloring Dialog

Checking Links Dialog

Word Wrapping

Line width

Determines at which position lines are wrapped. This is the HTML mode specific version of the variable Fill Column in the global settings dialog Alpha ↣ Preferences ↣ Global Preferences ↣ Text.

wordBreak

This controls which characters build up words,

wrapBreak, wrapBreakPreface

These preferences control word wrapping.

Content Types, Media Descriptors, Link Types Dialogs

JavaScript mode

Word completion

for

for (|; •; •) {
    •
}
•

while

while (|){
    •
}
•

Parse menu

Shift-Command-double-clicking

Preferences

Electric braces

Enabling Electric braces tells Alpha to treat the left or right brace '{', '}' keys as special keypresses which enter the '{' or '}' character, followed by a carriage return and then indent the following line correctly. Note: for the electric braces to work you must select your keyboard in the dialog Alpha ↣ Preferences ↣ System Preferences ↣ International.

Electric semicolon

Enabling Electric semicolon tells Alpha to treat the semicolon key ';' as special keypresses which enters the ';' character followed by a carriage return and then indents the following line correctly. The ';' key is context-dependent so you can still enter a for( ; ; ) loop in JavaScript code without Alpha messing things up.

Indent on return

Enabling Indent on return tells Alpha to indent the following line automatically whenever you press Return.

Special indent for case label

Enabling Special indent for case label tells Alpha to indent the case lines inside a switch statement differently.

JavaScript in HTML mode

CSS mode

CSS in HTML mode

Shared key bindings with HTML mode

CSS property dialogs

H1 {
    color: #123456;
    text-align: right;
}

The !important directive

H1 {
    color: #FF0000 ! important;
}

The property dialogs

• When you specify a length or size, like for the font-size property, you can type the unit in the textbox rather than selecting it in the menu (faster). If you type a unit the one in the menu is ignored.
  
• In some cases there is a shorthand for a set of properties. Then there are two checkboxes at the bottom of the dialog window.
  
  Inherit all means that you give the value inherit to the shorthand property and ignore the individual values. Checking Use shorthand form if possible will make Alpha try to express the properties using the shorthand. Otherwise all individual properties are inserted into the document.
• For some properties, like margin, you can specify values for one or two sides and let these values also apply to the other sides. For such properties, there will be two radio buttons where you can choose if you want to set the values individually or if you want the specified values to also apply to the other sides.
  

Word completions in CSS

blo

BLOCKQUOTE

BLOCKQUOTE {
    vert

BLOCKQUOTE {
    vertical-align:

BLOCKQUOTE {
    vertical-align: bas

BLOCKQUOTE {
    vertical-align: baseline

CSS electrics

Electric braces

Enabling Electric braces tells Alpha to treat the left or right brace '{', '}' keys as special keypresses which enter the '{' or '}' character, followed by a carriage return and then indent the following line correctly. Note: for the electric braces to work you must select your keyboard in the dialog Alpha ↣ Preferences ↣ System Preferences ↣ International.

Electric semicolon

Enabling Electric semicolon tells Alpha to treat the semicolon key ';' as special keypresses which enters the ';' character followed by a carriage return and then indents the following line correctly.

Indent on return

Enabling Indent on return tells Alpha to indent the following line automatically whenever you press return.

Shift-Command-double-clicking

Shift-Command-double-clicking on a CSS property

Shift-Command-double-clicking on a URL attribute

Parse menu

Reload in browser

CSS preferences

Create missing file without asking when cmd-double-clicking a link

If checked and you shift-cmd-double-click a link pointing to a file which does not exist, Alpha will create an empty file and open it without first asking you if you want to create the file. By default you are asked before the file is created. This setting is synchronized with the same setting in HTML mode.

Use lowercase for HTML element names

If checked, Alpha will insert HTML names in lowercase when you use the key binding for an HTML element, or when you use word completion to complete an HTML element name. By default uppercase is used.

Electric Braces, Electric Semicolon, Indent On Return

See the CSS electrics section.

Color of keywords

The color of keywords in CSS. The default is blue.

Color of comments

The color of comments. The default is red.

Color of HTML

The color of HTML elements. The default is magenta.

wordBreak

This controls which characters build up words. Do not change it unless you know what you are doing.

Power user

Defining your own formatting tags

proc myScriptIndent {} {
    code goes here
}

proc myScriptIndentRegion {} {
    code goes here
}

html::RegisterFormattingStyle "style" "menu item text" "indent line proc" "reformat region proc"

html::RegisterFormattingStyle "MY-SCRIPT-FORMATTING" "My Script Formatting" "myScriptIndent" "myScriptIndentRegion"

html::RegisterFormattingStyle "MY-SCRIPT-FORMATTING" "My Script Formatting" "myScriptIndent"

References

• The Web Design Group
• HTML 5 Specification
• XHTML 1.0 Specification
• CSS Specification
• Mozilla Developer Network
• HTML Validation
• CSS Validation

Known problems

License and Disclaimer

• Copyright (c) 1996-2004, Johan Linde
• Copyright (c) 2005-2020, the Alpha Community

• Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
• Neither the name of the Alpha Community nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.