Mac Mania 5

home *** CD-ROM | disk | FTP | other *** search

/ Mac Mania 5 / MacMania 5.toast / / Tools&Utilities / Alpha / Help / HTML Help < prev next >

Wrap

Text File | 1996-08-18 | 63.7 KB | 1,546 lines | [TEXT/ALFA]

HTML mode version 1.2 by Johan Linde August 1996 Use the marks menu [M] ------------------------------------------------- >> to quickly jump to different sections of this file. There is also a version of this manual in HTML format, with lots of screen shots. HTML Mode is for editing HyperText Markup Language documents (suffix ".html", ".htm" or ".shtml"). It is not a previewer, nor is it a verifier, and you have to know at least some HTML to use it. If you do not know about HTML, I recommend that you read "A Beginner's Guide to HTML". It is a good first text to read. You can find it at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html I have collected some other links to HTML guides, see the section on HTML Tutorials and references. The basic idea with this HTML environment is to save you time while typing, by having key bindings for all HTML elements. Also, you do not have to worry about misspelt HTML tags, missing end quotes, or missing end tags. HTML mode is probably most useful for HTML programmers with some experience of HTML, who are looking for an editor which makes the editing easier and faster. When you use this package, by default you will see bullet characters (•), called "tab marks", being dribbled near where you insert elements. These are supposed to be a feature. The tab key takes you to the next one, and automatically deletes the bullet. Read the section "How to use tab marks", to learn to use them in the best way. =============================================================================== = HTML mode features =============================================================================== • HTML mode knows HTML 3.2 as well as Netscape's extensions to HTML. • Tools to easily and quickly insert HTML elements and give them attributes. Each element has got its own key binding. • Tools to easily change or remove HTML elements. • Tools for building lists and tables. • You can define colors with a color picker to use on your web pages. • 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 editing of JavaScript. • Translation of special characters, å, ó, ü etc. to and from their HTML entities. • Files are sent to your browser with one key stroke. • 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. Acknowledgment First of all I would like to thank Pete Keleher for writing Alpha, the best editor in the world, without my TCL code would be pretty useless. I am also indebted to Scott Brim who wrote an earlier version of Alpha's HTML mode. Some ideas and tcl code were taken from html.el for GNU Emacs and latex.tcl for Alpha. I want feedback! All comments on HTML mode are welcome. In particular, please tell me • about bugs of any kind, • about some new feature you want to have included in the HTML mode, • if you think some function behaves stupidly, • if some HTML element is not defined correctly, • if something is not explained well enough in this help file. You may also tell me that you like HTML mode. :-) If you want to hear about beta releases, send me a mail and I will put you on the list. Johan Linde <jl@theophys.kth.se> If you like HTML mode and use it a lot, I would very much appreciate if you send me a postcard and tell me that. It would give me new energy to add new features to HTML mode. My address is Johan Linde Lojovägen 61 S-181 47 LIDINGÖ SWEDEN But don't give me credit for something I haven't done. =============================================================================== = Language =============================================================================== My mother tongue is Swedish. Therefore you will, no doubt, find grammatical and other errors in this document and in HTML mode. Please tell me about any such error you find, in a menu, dialog box, error message... But before you complain, I must tell you that I know that "color" is spelt "colour". :-) =============================================================================== = What's new in version 1.2 =============================================================================== • The package HTML 2.0 is removed, since it is out-dated. From now on there will only be two packages, one with the latest official HTML and one where extensions have been included. • There is now only two way to input attributes, the dialogs introduced in 1.1 and the status bar. • Improved behavior when attributes are given in the status bar. ctrl-z to cancel, ctrl-f for a file dialog or new color. When a value is chosen from a popup window, Alpha immediately jumps to the next attribute. • A new userfriendly way to add new HTML elements. • A function to move files between folders and automatically update all links to and in them. • Changed JavaScript coloring. Only reserved words are colored, not built in methods and properties. Comments in JavaScript are now colored. • A window cache just like the URL cache. Frame names are automatically added to this cache. • A new submenu with plug-ins. • JavaScript's event handlers can now optionally appear in the attribute dialog. • Only one menu item for <A>. • Added SRC to <SCRIPT>. • Added <NOSCRIPT>, <MULTICOL> and <SPACER>. • Added FRAMEBORDER, BORDERCOLOR to <FRAME>. • Added FRAMEBORDER, BORDERCOLOR, BORDER to <FRAMESET>. • Added FACE to <FONT>. • Added onMouseOut to <A>. • Added onAbort, onError, onLoad to <IMG>. • Added onClick, onMouseOver, onMouseOut to <AREA>. • When trying to add a link via a file dialog, windows with ' <n>' added to the window name were asked to be saved even if they already were saved. Fixed! • Send file to browser didn't work for windows with ' <n>' appended. Fixed! • Problems finding the browser fixed. • Reveal color didn't find color attribute if color wasn't quoted. Fixed! • Check links didn't find BASE if it was split into two lines. Fixed! • Check links and cmd-double-click now correctly interpret paths of the form "./file.html". • Check links and cmd-double-click now search for a file index.html when a link points to a folder. • Check links didn't work for files with UNIX or IBM newlines. (All links were found to be ok.) Fixed! • Some lists couldn't be inserted when using the status bar. Fixed! • 'Change opening' didn't work for INPUT elements in lower case. Fixed! • The variable htmlElemAttrsForAll is no longer supported. • Some other minor changes and bug fixes. =============================================================================== = What's new in version 1.1.1 =============================================================================== • Rewrote some of the code so that HTML mode loads faster. • The menu Use Attributes is disabled when it is not needed. • Added <U> and <NOEMBED>. • The new suffix mapping is used to determine if a file is a HTML file when deciding which files to scan to check the links. =============================================================================== = What's new in version 1.1 =============================================================================== • The HTML elements are put into three packages, HTML 2.0, HTML 3.2 and Extensions. • Support for JavaScript coloring and editing. • A function to check that all links between files in your home page are ok. • Attributes to an element can be input in one single dialog box, rather that giving the attributes one after another. • When you are asked about an URL attribute, you can choose a file via a file dialog. The relative path is automatically inserted. • "Fill paragraph" is now sensitive to HTML elements. • cmd-doubleclick on a relative URL opens the file, or if it does not exits, it can create a new file and save it in the right place. • You can define a new color when you are asked about a color attribute. • You can define files with footers, which can be automatically inserted when you create a new document. • Control that a value given to a number attribute is valid. • Control that a value given to a color attribute is valid. • New dialog box for "New document" where you can choose which elements you want in the head, and also select a file with a footer to insert in the end of the body. • Character translation can be done in a selection. The translation is also a lot faster. • Tab marks can be removed in a selection. • "Select container" and "Untag" now find the correct pair of tags when there are elements of the same kind within each other, like a <TABLE> within a <TABLE>. • "Select container" and "Untag" now ignores all tags without a closing tag. • A function to select a tag with no closing tag. • A function to untag a element with no closing tag. • A function to untag a container and automatically select the content. • A function to change an element in the document. • New key binding for untag: ctrl-F1. It has been bundled with the new functions just mentioned. • Mark file now finds headers with opening and closing tags on different lines. Each menu item is limited to 30 characters, not to make them too long. • If you use any of the two old ways of inputting attributes, you can set a flag for each element, so that you can optionally be asked about the attributes not chosen in the "Use attributes" menu. • A table template function, to quickly make tables. • With "Tabs to rows" you can now optionally put table headers in first row and/or column. • "Rows to tabs" now follow the HTML code, not the line breaks in the file. • A function to insert <BR> at the end of every line in a selection. • A function to remove every <BR> in a selection. • A function to insert <P> at empty lines in a selection. • A function to make a HTML list from a *'d list. • Undo is now easier, although you sometimes still have to make two "Undos" to undo something. • For attributes which can take any value, beginning and ending spaces are no longer removed. Sometimes these spaces are wanted. • When <A NAME="xxx"> or <MAP NAME="xxx"> is inserted, "#xxx" is added to URL cache. • New dialog box for cleaning up URL cache. • Two identical colors can no longer be defined. • New elements STRIKE and DFN. • New element <INPUT TYPE=BUTTON> in extensions package. To be used together with JavaScript. • A couple of new attributes added so some elements. • For the AREA element, a check is made that you use one of the attributes HREF and NOHREF is used, but not both. • The key binding for "Comment line" have been changed to ctrl-C-L to conform with other modes. =============================================================================== = What's new in version 1.0 =============================================================================== • A lot of new elements are included. • It's possible to define colors to use as background color, text color etc. from a color picker. • Translation of accented letters (é, á etc.) to HTML entities and vice versa. • The attributes of the elements are divided into required and optional ones. If you skip a required one, no element is inserted. You can no longer make elements like <A></A>. • For some elements there is a separate key binding as well as menu item to automatically skip all attributes. • Improved behavior when the status bar is used to input attributes. • Untagging works better. • Marking of the file works better. • Plus a number of other small changes. =============================================================================== = Configuring HTML mode =============================================================================== Home Page folder To be able to check all links between your files, and to be able to insert a link via a file dialog, you must set your Home Page folder. The idea is that this folder, together with its subfolders, should contain all your html files, and be a mirror of your home page at your server. The Home Page folder is set via the menu Config -> App Paths. Server URL To be able to check all links between your files, and and to be able to insert a link via a file dialog when you use the BASE element, you must set the URL to your server. This is set via the HTML Utilities menu. In the dialog box there are two field "Server URL" and "Path". If the URL to your home page is http://www.somewhere.net/~myplace/ then set things like this: Server URL: http://www.somewhere.net/ Path: ~myplace/ The URL has to be split in this way for HTML mode to correctly deal with relative URLs within your server. =============================================================================== = The HTML Packages =============================================================================== The HTML elements are put into two packages, with can be loaded separately. HTML 3.2 - Contains everything in HTML 3.2 as in the specification by World Wide Web Consortium released in June 1996. Extensions - Contains everything in HTML 3.2 plus Netscape's extensions to HTML. Some of Netscape's extensions are supported by other browsers than Netscape Navigator, such as Mosaic and Internet Explorer. You have probably heard of HTML 3.0. It was a proposal for extending HTML published in March 1995. HTML 3.0 was never widely deployed. HTML 3.2 on the other hand adds widely deployed features such as tables, applets and text flow around images, while providing backwards compatibility with the old standard HTML 2.0. =============================================================================== = How to use tab marks (•) =============================================================================== When you insert HTML elements via the HTML menu you will see bullet characters (•), called tab marks, being inserted after the element. These tab marks are supposed to be a feature. The way to use them is the following: Suppose you want to insert a header H1. First choose "Header 1" from the menu (and give the attribute a value if you want). In the document will now be inserted <H1></H1> • with the current position between the H1 tags. Now first type the header text: <H1>My header</H1> • When you have done so, hit tab and the current position will jump to the tab mark and delete it. You are now ready to continue typing. If your document have been cluttered with tab marks, which you do not want to use, you can remove them all with cmd-tab. If you do not want to use tab marks at all, you can unset the flag useTabMarks via the menu Config -> Current mode -> Flags. Then they will not be inserted. ================================================================================ = Text wrapping ================================================================================ It is very easy to insert a HTML element in an existing text. For example, suppose there is a word "important" in the text which you want in boldface. First select the word, then choose "Bold" from the menu (or type the equivalent key binding) and "important" will be wrapped by the HTML tags to give <B>important</B>. This behavior is the same for all elements which are containers. Inserting a HTML element never deletes a selection. =============================================================================== = Coloring =============================================================================== The text in your HTML files can be colored in two different ways. By default all HTML tags are colored blue, like <A HREF="file.html">a link somewhere</A> By setting the flag JavaScriptColoring the coloring changes. First of all, the key words in JavaScript are colored magenta. But the coloring of the HTML tags also changes, like <INPUT TYPE="BUTTON" VALUE="pi" onClick="piKnapp(this.form)"> While this coloring is primarily intended to be used for files with JavaScript, it can also be a better choice for files with very little text and almost only HTML tags. Have in mind though that JavaScript keywords (if else this...) will be colored also when they are part of ordinary text. ================================================================================ = Marking the file ================================================================================ If you choose "mark file" in the marks menu, this menu will get a new item for each header H1-6 in your file. You can then easily jump to a header by selecting it in the menu. The menu items are truncated after 30 characters, to prevent them from becoming too long. ================================================================================ = How HTML mode behaves when it asks for attributes to a HTML element. ================================================================================ If a HTML element has attributes, it can be asked about in two different ways, either in a dialog box with all attributes (the default), or in the status bar. The flag useBigWindows determines which of these two ways you want to use. If useBigWindows is set the attributes will be asked about in a dialog box (the default), and otherwise in the status bar. The attributes can be divided into seven categories: URLs, colors, target windows, predefined choices (for example ALIGN=LEFT|CENTER|RIGHT), numbers, flags and other. The category other contains attributes which can take any value plus some which does not fit into any of the other categories. Using dialog boxes. If you set the flag inclEventHandler, JavaScript's event handlers will be included in the dialog. By default they are not. URLs - You can give 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. (You are only allowed to select a file in your home page folder.) The file you have selected will be put in the menu. It is probably much faster to type the URL, than selecting a file from a file dialog, but the advantage about the file dialog is that it will automatically determine the relative path. If you use a BASE element in the current window it will be noticed, and the relative path will be relative to it. If you use the file dialog, you must set your home page folder and if you use the BASE element you must also set your server URL (see the section on how to configure HTML mode). You can only make links to files in the home page folder, or any of its sub folders, because otherwise the relative path would not be possible to determine. If you type a URL in the text box, it will be used, even if you choose something from the menu. Colors - You can give 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 put in the menu. If you type something in the text box, it will be used, even if you choose a color from the menu. Window - You can give the target window in two ways: 1) type the window name in the text box, 2) choose a window name from the menu with your window cache. If you type something in the text box, it will be used, even if you choose a window from the menu. Predefined choices - Select a choice from the menu. Numbers - Attributes which take an integer value. The numbers will be checked that they are in the valid range. Other - Attributes which can take any value. Note that spaces in the beginning and end of what you type are not removed. (This is always done otherwise.) This is because sometimes such spaces are wanted. Flags - These are attributes which does not take any value. Check the checkbox to use it. If an element has very many attributes, the dialog box may have to be divided into two, or possibly three, pages to fit your screen. Then there will be a menu in the upper left corner of the dialog box to switch between the pages. The dialog box is made as large as possible before being split into two or three pages, so if your screen is large enough this will never happen. Alpha will complain if you forget a required attribute, or give a value to an attribute which is not valid (not true in all cases but there are some controls). Using the status bar. By default not all attributes are asked about. Use the menu Use Attributes to determine which attributes you want to be asked about. There you can also set a flag 'Ask for more?' for each element. If you answer yes, the following will happen when you are asked about attributes for this element: *) You are first asked about the ones you have selected via this menu. *) Then you get a question "More attributes?" *) If you answer yes, you will then be asked about the rest of the attributes. The idea is that you can put a kind of half way mark. First you are asked about the ones you always want to be asked about, and then you are optionally asked about the rest. If you set the flag inclEventHandler, JavaScript's event handlers will be asked about for those elements you have set 'Ask for more' to yes. By default, Alpha beeps for each attribute it asks you about. You can turn off the beeps by unsetting the flag promptNoisily. You can simply type the value you want for an attribute (for colors you can either type a number #RRBBGG or a color name), but some keys have special functions to speed up your work. tab - If you are asked about an attribute with predefined choices, for example ALIGN=LEFT|CENTER|RIGHT, tab will match what you have typed against your options, and complete what you have typed as much as possible. Suppose you type C and then tab. The letters ENTER will then automatically be inserted. The same is true if you are asked for a URL, a target window or a color. Tab will then match against your URL cache, the window cache or the color names defined. double tab - If there are predefined choices or you are asked for a URL, a color or a target window, double tab will put up a list with everything that match what you have typed so far. If you for example have forgotten which choices there are, hit double tab without typing anything to get a list with all possible choices. Once you have chosen something from the list, Alpha immediately jumps to ask you about the next attribute. cmd-v Pastes the clipboard into the status bar. This is most useful if you want to insert a URL which you for example has in another file. ctrl-f - If you want to select a file via a file dialog, when asked for a URL, or define a new color, when asked for a color, type ctrl-f in the status bar. Once you have selected a file or defined a new color, Alpha immediately jumps to ask you about the next attribute. escape - Deletes everything written. ctrl-z - Cancel everything. If there are predefined choices, only the letters which match a choice can be typed. If you type anything else you just get a beep. Also, if there are predefined choices, and you have typed a unique subset of one of them and hit return, the rest will be added. For example, if the choices are ALIGN=LEFT|CENTER|RIGHT and you type R and then return, you will get ALIGN=RIGHT. If what you have typed is not unique, the attribute will be skipped. There are a few cases when two letters are needed to get a unique choice. Giving no value at all to an attribute means that you skip it. If you skip a required attribute, no tags will be inserted. =============================================================================== = Editing JavaScript =============================================================================== HTML mode has support for editing and coloring of JavaScript. To use this you have to set some flags via the menu Config -> Current mode -> Flags, which are not set by default. The following flags and variables concern JavaScript: JavaScriptColoring - when set, key words and comments in JavaScript will be colored. The way the HTML tags are colored is also changed, because the old way does not work well together with JavaScript. For the HTML tags to be colored nicely, all their attributes must be quoted. elecLBrace - when set, the left braces, {, will be electric like in C mode. elecRBrace - when set, the right braces, }, will be electric like in C mode. JavaScriptColor - the color of the key words in JavaScript, if JavaScriptColoring is set. Default is magenta. stringColor - the color of text between quotes, if JavaScriptColoring is set. Default is green. inclEventHandler - when set, the event handlers (onFocus, onSelect etc.) will appear in the attribute dialog. By default they will not do so. Set this flag when you are editing files with JavaScript. If you do not have an American keyboard, you may have to set two key bindings to be able to use the electric left and right braces. For example, on my Swedish keyboard { is shift-opt-8 and } is shift-opt-9. To use the electric braces I have to bind these keys with bind '8' <so> electricLeft HTML bind '9' <so> electricRight HTML This is put in HTML's preference file, via the menu Config -> Current mode -> Edit prefs. Change your key bindings similarly if needed. =============================================================================== = The HTML Menu =============================================================================== The menu described here is the menu for the Extensions package. In the smaller package some menu items are absent. The menus are dynamical. Holding down the option key changes some menu items. Send file to browser - Launches your browser and sends the document to it. Help - Opens this file. Palette - Makes a floating palette with the HTML menu. This palette will be closed whenever the HTML menu is changed. Packages - To choose which package with HTML elements to use. (See the section abut the HTML packages.) If you change package, the HTML menu is rebuilt. HTML Utilities - Colors - You can define and name colors to use as background, text and link color etc. on your www page. Later when you insert a element with a color attribute, you can choose the color for the attribute from a menu. A set of eight basic colors is provided by default. 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. 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. New color - To define and name a color, to use as color attribute. Change color - To change a color you have previously defined. If you rename it, the old one will be removed. Remove color - To remove colors previously defined. Have in mind that once you have changed or removed a color, Alpha does not remember the old one, and therefore "Reveal color" does not work for it. Character translation - To translate characters to and from their HTML entities. åäö -> HTML - translates characters to HTML entities. HTML -> åäö - translates HTML entities to characters. The characters which are translated are all you find in the "small chars" and "capital chars" menus (except eth, thorn and y´) plus the Spanish ¡ and ¿. If some text is selected, the characters are translated within the selection, otherwise they are translated in the whole document. URLs - Everything for managing the URL cache. HTML mode accumulates a list of the URLs you use in your HREFs SRCs etc., and saves the list across invocations of Alpha, so it can help you to put in new URLs rapidly. Add selection - Adds the current selection to the URL cache. Add clipboard - Adds the clipboard to the URL cache. Clean Up - After a while the URL cache can get very large, and you may want to remove some URLs you do not need. You will be presented with a dialog box with a checkbox for each URL in your cache. Uncheck the ones you want to remove. Click "Uncheck all" to, guess what, uncheck all checkboxes. If there are more URLs in your cache than fit the window, there is a button "More" to take you to the next ones. Clear - Removes all URLs from your cache. Windows - Everything for managing the window cache. HTML mode accumulates a list of the window names you use as target windows , and saves the list across invocations of Alpha, so it can help you to put in new window rapidly. Clean Up - Works in the same way as Clean up for the URL cache. Clear - Removes all windows from your cache. Footers - A footer is a file with text which you automatically can put into the BODY of the document when you create a new document. To use this function, *) first create a file with text which you want on many of your pages, for example, directory buttons, your address etc. *) then choose "New footer" to define the file to be a footer. When you later use "New document" you can select this file from a menu, and its content will be put inside the BODY element. These files can of course contain any kind of text, but I call them footers because my basic idea is that they should contain things you put at the bottom of every page. New footer - Presents you with a file dialog to pick a file with a footer. This does not insert any text in your document, it only defines a file to be a footer. Remove footers - To remove footers previously defined. Note: this does not delete the file, it is just no longer a footer. Insert footer - To insert the text in a footer file at the current position. Check links in - Functions to scan files in your home page folder and check that all links, HREFs SRCs etc. point to files which exist. The files which are scanned are the text files in your home page folder which are HTML files (the ones which have any of the suffixes as specified by the suffix mapping). For this to be useful the files in your home page folder must be a mirror of the files at your server. If you use this function as intended you never have to worry about dead links between your files anymore. To use this function you have to set your Home Page folder and Server URL. (See the section on how to configure HTML mode.) It works as follows: In every file scanned Alpha looks for all HREFs, SRCs etc in the file. If you use the BASE element it will be noticed and used to determine where a link is pointing. For all links which point to a file in your home page, Alpha checks if the file exists. Links outside your home page are ignored. If a link includes an anchor (href="file.html#anchor"), Alpha only checks that the file exists, not if it contains an anchor with the correct name. If any invalid links are found, which points to files which not exists, a window is opened where the lines look as follows: file.html ; Line 8: HREF="otherfile.html" folder:file2.html ; Line 17: (BASE used) SRC="pic/coolpic.gif" In the first column is the name of the file with the link, including the path relative to your home page folder. In the second column is the line number where the invalid link is, and in the third column is the link itself. If it says (BASE used) it means that the file contains a BASE element. Use the up and down arrows to select a line in this window, and carriage return to open the file and select the line with the invalid link. Limitation: If a link is within a comment, , it is still checked. home page - Check links in all html files in the home page folder and its sub folders. folder - To check links in all files in one folder. The sub folders are not scanned. If you have very many files, you may want to scan one folder at a time. file - To check links in a single file. Extend - To add new HTML elements, or new attributes to existing element, to HTML mode. HTML is continuously evolving and many browsers have introduced their own extensions. Here you can add what is missing. New elements will be put in a new submenu 'Custom' of the HTML menu. You can only add new elements to the extensions package. HTML 3.2 is complete as it is. IMPORTANT! If you have previously defined new HTML elements in the preferences file HTMLPrefs.tcl, make sure you remove all of them and restart Alpha before using this function. Otherwise there is a risk for conflicts between the two ways of adding elements. If you have element definitions in your prefs file and you already have loaded HTML mode, you may have seen a warning message that the way to add new elements has changed. This warning message is shown if you call the function htmlNewElemVar of define the variable htmlCustomMenuList. Remove all such things from the prefs file and restart Alpha to avoid this warning. New element - To add a new HTML element. The elements are divided into three categories. *) Normal. All which are not of one of the other two categories. *) Input element. A <INPUT TYPE="xxx"> element for forms. *) Plug-in. A plug-in using <EMBED>. In the first dialog you specify the following. *) The name of the element. For 'normal' elements simply give the name, for example to define <IMG> you would use 'IMG'. For 'input elements' give the type, for example to define <INPUT TYPE=CHECKBOX> use 'CHECKBOX'. For 'plug-ins', use any descriptive name you like. *) If the element has a closing tag </TAG> or not. This only applies to 'normal' ones as neither <INPUT> nor <EMBED> has a closing tag. *) A key binding for the element. Type one character in the text box, and select which of the modifiers shift, control, option and command you want. It is no good idea to choose a key binding which conflicts with another one, but if it turns out that you have made a bad choice you can change it later. If you do not want any key binding, leave the text box blank. Next you are asked to specify all the attributes to the element. (I would say that it is a good idea to write down the complete definition on a piece of paper before you start.) In the first dialog for each attribute you specify: *) Its name. *) If it is a required attribute or not. *) Its type. Make sure you specify the correct type for each attribute. For some types additional information must be given. This is explained in detail below. The attributes you define will be displayed in the dialog window as you go along. Then click *) OK when you have given the above information for the current attribute. *) 'No more attributes' *after* you have clicked OK for the last attribute. *) 'Remove last' to remove the last attribute you just defined. You can remove them all one after another to correct a mistake somewhere. The different types are *) 'Other'. Attributes that can take any value or do not fit into any of the other seven categories. No additional information is needed. *) 'Number'. Attributes which take an integer value. For these, a second dialog box is shown, where you must specify the range of values accepted. A minimum value must be given, but if there is no maximum value, leave the text box for this blank. You should also specify if the value may be given in percent or not. *) 'Choices'. Attributes which can only take certain predefined choices, such as ALIGN=LEFT|CENTER|RIGHT. For these attributes you must specify all valid choices in a second dialog box. The choices you define will be displayed in the dialog window as you go along. Click *) 'OK' for each choice *) 'No more choices' *after* you have clicked OK for the last one. *) 'Remove last' to remove the last choice you just defined. You can remove them all one after another to correct a mistake somewhere. *) '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. No additional information is needed. *) 'URL'. Attributes which take a URL as value, like HREF, SRC etc. No additional information is needed. *) 'Color'. Attributes which take a color as value. No additional information is needed. *) 'Window'. Attributes which take a target window as value, like the attribute TARGET. No additional information is needed. *) 'Event handler'. Attributes which are event handlers for JavaScript. No additional information is needed. Once you have specified all attributes you will be presented with a final dialog box, where you are asked which layout you want in the html documents. (This layout only determines how the tags are inserted in te text document, and affects, of course, not how the text is displayed by the browser.) For elements without a closing tag you can specify if you always want a carriage return inserted before and/or after the tag. For elements with a closing tag, you can choose between four different layouts, whether you want the tags to be on lines of their own and if you want blank lines before and after them. The new element is now saved, and after that, if you use the status bar to input attributes, you will be asked to select which optional attributes you want to be asked about (as described here). New attributes - To add new attributes to an existing HTML element. You are first presented with a list from which you choose an element to add attributes to. In this list LI IN UL and LI IN OL are the LI element for UL and OL lists respectively. BUTTON, CHECKBOX, FILE, HIDDEN, IMAGE, PASSWORD, RADIO, RESET, SUBMIT and TEXT are the INPUT element with different TYPEs. LIVEAUDIO, LIVEVIDEO, QUICKTIME MOVIE, QUICKTIME VR and REALAUDIO are different plug-ins. All the rest are the usual names of the elements. Then you specify the attributes in the same way as you specify the attributes to a new element as described above. New choices - To add new choices to an attribute with predefined choices. You are first presented with a list from which you choose the element with the attribute to add to. Second you are presented with a list from which you select the attribute. Then you specify new choices in the same way as described above. Change key binding - To change a key binding for a custom element. To remove the key binding, leave the text box blank. Note that you can only change the key bindings for the elements you have added yourself. Change type and layout - To change the layout of a custom element, to change whether it has a closing tag or not, and to change its type (normal, input element or plugin). Remove attributes - To remove one or more of the attributes you have added to some element, or to remove choices you have added to an attribute. You are first presented with a list of all elements you have added attributes to. Select the element you want and you are then presented with a list with all attributes you have added to this element, where you can select the ones you want to remove. If you have only added new choices to an attribute, only these choices are removed, not the attribute itself. There is no function to directly change an attribute. (This is something I, most likely, will add to the next version of HTML mode.) To change an attribute you have to first remove it and then add a new one again. Remove additions - To remove an element you have added or to remove additions you have made to a predefined element. With this function you remove all additions you have made to an element. 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. <opt>Select Opening - If the first tag to the left of the current position is a tag without a corresponding closing tag, it is selected. Repeated it jumps to the next one. Untag - Removes a tag pair surrounding the current position or selection. All tags without a corresponding closing tag are ignored. <opt>Untag and Select - Same as Untag, but the text inside the container is selected. Use this if you want to change one container to another. Remove opening - If the first tag to the left of the current position is a tag without a corresponding closing tag, it is removed. Change container - To change the attributes of the element enclosing the current position or selection. A dialog box appears where the current values of all attributes are shown. Change the ones you want and a new tag will be inserted in the text. 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. If you are using JavaScript, the event handlers will only be shown in the dialog if the flag inclEventHandler is set. If inclEventHandler is not set, the event handlers are left untouched in the document. <opt>Change opening - Same as change container, but for an element with no closing tag. The tag must be the first one to the left of the current position to be found. As you probably have noticed the logic for finding tags is the same for "Select" "Untag/Remove" and "Change". *) Container: the tags enclosing the current position or selection. All tags without a corresponding closing tag are ignored. *) Opening: the first tag to the left must be a tag without a corresponding closing tag. It can be a good idea to first select the container or opening tag, before removing or changing them, to make sure you select the one you want. Remove marks - Remove tab marks, (•). If some text is selected, the tab marks are removed within the selection, otherwise they are removed in the whole document. Move files - To move files between different folders and automatically update all links, which points to any of these files, in every file in your home page folder, as well as updating all links in the files moved. To use this function you have to set your Home Page folder and Server URL. (See the section on how to configure HTML mode.) *) First you are 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. *) And then you are asked to select the destination folder. Alpha now moves the files, and then asks you if you want to update all links (this is the whole point of this function, so a 'yes' should be appropriate). Alpha now scans all HTML files (as determined by the suffix mapping) in your home page folder and changes the links which need to be changed. This may take a little while if you have very many files, but should in most cases be a lot faster than to make the changes manually. Limitation: Links within comments , , are also updated (which is a bug or a feature, depending on how you see it). Set Server URL - Set the URL to your server. See the section on how to configure HTML mode. Use Attributes - If you choose to input attributes from the status bar, you can select which ones you want to be asked about. If you choose to be asked about attributes in a dialog box you will always be asked about everyone. Note: This menu is disabled if you choose to input attributes in a dialog box with all attributes (the default). For inputting attributes in the status bar, HTML mode is by default set to ask about the ones which I think is the most popular ones. If you choose to use the status bar to input attributes I recommend that you go through the list and choose the ones you want. In this list LI IN UL and LI IN OL are the LI element for UL and OL lists respectively. BUTTON, CHECKBOX, FILE, HIDDEN, IMAGE, PASSWORD, RADIO, RESET, SUBMIT and TEXT are the INPUT element with different TYPEs. LIVEAUDIO, LIVEVIDEO, QUICKTIME MOVIE, QUICKTIME VR and REALAUDIO are different plug-ins. All the rest are the usual names of the elements. There is also a question "Ask for more?" If you answer yes, the following will happen when you are asked about attributes for this element: *) You are first asked about the ones you have selected via this menu. *) Then you get a question "More attributes?" *) If you answer yes, you will then be asked about the rest of the attributes. The idea is that you can put a kind of half way mark. First you are asked about the ones you always want to be asked about, and then you are optionally asked about the rest. Note: The settings only affect the current HTML package. You have to set everything for both packages even if an element is in both of them. This is because some elements have different attributes in the different packages. New document - To insert the elements HTML, HEAD, TITLE, BODY in a new HTML document. If you have a text file which you want to make a HTML file of, this function lets you put the text into the document's BODY element. Before choosing "New document", open a new empty window or a text file which you want to make a HTML document of. First a dialog box is presented where you can: *) give the document a title, *) choose elements you want, which can be in the HEAD. (These elements can of course be inserted later.) *) choose a footer which is inserted in the end of the BODY element. You define a file to be a footer via the menu Footers. When you are finished with the first dialog box you are then asked about attributes for each element you have chosen to put in the HEAD, and finally you are asked about attributes for the BODY element. The elements <HTML>, <HEAD>, <TITLE>, your chosen ones, and <BODY> are now inserted in the text. If there were text in the document, it is put in the BODY before the text in the footer. Now comes the part of the menu with all HTML elements. Some of the menu items for the elements are dynamical. Hold down the option key and you see that some menu items change. The new ones which appear insert the same element as the other ones but with all attributes automatically skipped. ("No attr" in the menu stands for "no attributes"). The elements which this concerns are <H1>-<H6>, <P>, <DIV>, <BR>, <HR>, <UL>, <OL>, <TR>, <TH> and <TD>. This can be very useful if you for example are making a table and only for a few cells want to set some attributes. Headers - Insert section headers, from H1 to H6. Header n - <Hn>. <opt> Hn no attr - <Hn> without attributes. Blocks and Dividers - These are various text-blocks and elements to control line breaks. Insert line breaks - Insert 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. <opt>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. Insert paragraphs - Insert <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. Paragraph - <P> <opt>P no attr - <P> without attributes. Division - <DIV> <opt>DIV no attr - <DIV> without attributes. Block quote - <BLOCKQUOTE> Address - <ADDRESS> Center - <CENTER> Preformatted - <PRE> Multi column - <MULTICOL> Spacing - <SPACER> Line break - <BR> <opt>BR no attr - <BR> without attributes. Horizontal rule - <HR> <opt>HR no attr - <HR> without attributes. No linebreak - <NOBR> Word break - <WBR> Styles - Elements for different text styles. The ones above the line in the middle of the menu are physical styles, while the other ones are logical styles. Font - <FONT> Basefont - <BASEFONT> Bold - <B> Italic - <I> Strike out - <STRIKE> Underlined - <U> Superscript - <SUP> Subscript - <SUB> Bigger - <BIG> Smaller - <SMALL> Typewriter - <TT> Blinking - <BLINK> Emphasis - <EM> Strong - <STRONG> Definition - <DFN> Code - <CODE> Variable - <VAR> Citation - <CITE> Keyboard - <KBD> Sample - <SAMP> Links - Hypertext links to and from other points, plus images. Link or Anchor - <A> Image - <IMG> Plug-ins - Different plug-ins all using <EMBED> General - General <EMBED> tag. LiveAudio etc. - Plug-ins with more attributes to <EMBED>. No embed - <NOEMBED> Lists - All kinds of lists. Make list - Makes list item , <LI>, of the text in a selection. If your, for example, have a list * item one * item two * item two and a half * item three you can make HTML list items of them. First select the lines with the items, before you choose "Make list" from the menu. You are then asked about a string with which all list items must begin, is this case *. You cannot transform a list where the items begins with 1), 2) etc. All items must begin with the same string. The result in this case will be <LI>item one <LI>item two <LI>item two and a half <LI>item three The element for the list itself is not inserted. The idea is that you should be able to put new items into an existing list in this way. To insert the list element, select all items and make a list with zero items. Bulleted - <UL> list. <opt>UL no attr - <UL> without attributes. New bulleted item - <LI> with attributes corresponding to an <UL> list. Ordered - <OL> list. <opt>OL no attr - <OL> without attributes. New ordered item - <LI> with attributes corresponding to an <OL> list. Directory - <DIR> list. Menu - <MENU> list. New list item - <LI> without attributes. Discursive - <DL> list. New discursive entry - <DT> and <DD> 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. Forms - The elements for building forms. Form - <FORM> Text - <INPUT TYPE=TEXT> Checkbox - <INPUT TYPE=CHECKBOX> Button - <INPUT TYPE=BUTTON> Radio - <INPUT TYPE=RADIO> Submit - <INPUT TYPE=SUBMIT> Reset - <INPUT TYPE=RESET> Password - <INPUT TYPE=PASSWORD> Hidden - <INPUT TYPE=HIDDEN> Image - <INPUT TYPE=IMAGE> File upload - <INPUT TYPE=FILE> Select - <SELECT> Option - <OPTION> Textarea - <TEXTAREA> Tables - The elements for building tables. Table template - A function to easily build a table if it does not have too complicated structure. You are presented with a dialog box where you can specify: *) the number of rows and columns you want. *) if you want table headers (TH) in the first row and/or the first column. The rest will be table cells (TD). *) vertical and horizontal alignment for the rows. These are attributes to the TR element and will be the same for all rows. When you are finished with this dialog box, you will be asked about the attributes for the TABLE element, before everything inserted in the document. You cannot use this function to build more complicated tables which requires attributes such as ROWSPAN and COLSPAN. Tabs to Rows - Takes a tab-delimited table and make HTML table rows of them. To use this, first select the text to make table rows of before you choose "Tabs to Rows" from the menu. You will first be asked about attributes for the table row (TR) element. These attributes will be used for every row. Then you are asked if you want table headers in the first row and/or the first column. Example: If you have the lines a b c d e f in your document, "Tabs to Rows" will transform them into <TR> <TD>a</TD><TD>b</TD><TD>c</TD> </TR> <TR> <TD>d</TD><TD>e</TD><TD>f</TD> </TR> Do not put more than one tab between each table cell. Alpha makes one table cell for each tab in each row. The TABLE element is not inserted. The idea is that you should be able to insert new rows in an existing table in this way. It can be useful to change the tab size before using this function. <opt>Rows to Tabs - Converts table rows in a selection to a tab-delimited format. (This is exactly "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. Table - <TABLE> Row - <TR> <opt>TR no attr - <TR> without attributes. Header - <TH> <opt>TH no attr - <TH> without attributes. Cell - <TD> <opt>TD no attr - <TD> without attributes. Caption - <CAPTION> Frames - The elements for building frames. New doc. with frames - The same as New document, with the difference that BODY is replaced by FRAMESET. Frameset - <FRAMESET> Frame - <FRAME> No frames - <NOFRAMES> Image maps - The elements for client side image maps. Map - <MAP> Area - <AREA> Java - The elements for Java and JavaScript. Applet - <APPLET> Parameter - <PARAM> Script - <SCRIPT> No script - <NOSCRIPT> Other - Things which do not fit elsewhere. Comment - Inserts a HTML comment  Base - <BASE> Isindex - <ISINDEX> Link - <LINK> Meta - <META> Comment line - Inserts a commented line with = signs. Use it if you want to divide the document into different parts. The key binding for this is ctrl-C-L. Character Entities - The entities for characters, for example ü is ü. All possible entities are divided into three submenus. To pick a character from these menus is only useful if you only want a single character. If you write in a language which use a lot of these characters, type them in the document as usual and then use the character translation. Add - Letters can be added to the short list at the top. Choose the ones you want from a list pick. Default - Sets the short list at the top back to the default setting, less than, greater than, ampersand. Clear - Removes all letters from the short list. small chars - Inserts the character entity for a letter, for example, á inserts á. capital chars - Inserts the character entity for a capital letter. other chars - Character entities for other characters. The reason for the accent being beside some letters is that the font used in the menus, Chicago, does not have these accented letters. ================================================================================ = Key Bindings ================================================================================ All HTML elements have got their own key bindings. You can find them all in the HTML menu. I have tried to group them as much as possible so that they are easy to learn. Some of the key bindings: tab Jump to the next tab mark (•) shift-tab Jump to the previous tab mark (•) opt-tab Literal tab cmd-tab Remove all • shift-ctl-opt-, inserts < shift-ctl-opt-. inserts > shift-ctl-opt-7 inserts & All other key bindings can be found in the menu. =============================================================================== = Command-double-click =============================================================================== Command-double-clicking on an absolute URL sends the URL to your web browser. This is not specific for the HTML mode, it is a general feature of Alpha. Command-double-clicking on a relative URL opens a new window with the file if the file exists in your home page folder and it is a text file. If it does not exist, 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 cmd-double-clicking let Alpha make empty files which are saved where you want them. ================================================================================ = User-Settable Flags and Variables ================================================================================ HTML mode is highly customizable. You can modify its behavior in several ways. Most of the flags and variables are discussed in other places in this manual, in the context where they are used. Flags The flags can be set in the menu Config -> Current mode -> Flags... JavaScriptColoring - if set, key words and comments in JavaScript will be colored. The way the HTML tags are colored is also changed, because the old way do not work well together with JavaScript. The default is 0, do not color JavaScript's key words. browseInForeground - if set, 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. The default is 1, bring browser to foreground. elecLBrace - when set, the left braces, {, will be electric like in C mode. Set this if you are editing JavaScript. The default is 0, { is not electric. elecRBrace - when set, the right braces, }, will be electric like in C mode. Set this if you are editing JavaScript. The default is 0, } is not electric. lidtAreContainers - If set, <LI>, <DT> and <DD> have corresponding closing tags. If not set the optional closing tags are skipped. The default is 0, do not insert a closing tag. inclEventHandler - when set, the event handlers (onFocus onSelect etc.) will appear in the attribute dialog. The default is 0, no event handlers in attribute dialog. pIsContainer - If set, the <P> element has a corresponding closing tag. If not set it does not. The default is 1, it has a closing tag. promptNoisily - If you input element attributes from the status bar, Alpha will beep when asking for element attribute information there. The default is 1, do beep. The value of this flag is only used if useBigWindows is not set. useBigWindows - If set, element attributes will be asked about in a a dialog box with all attributes, otherwise they will be asked about in the status bar. The default is 1, use dialog boxes. useLowerCase - If set, elements will be like <P>; if 1, like <p>. The default is 0, upper case. useTabMarks - If set , will not insert the • characters. The default is 1, to insert them. Variables The variables can be set in the menu Config -> Current mode -> Flags... prefixString - The string to begin a comment, and the one to suffixString - end a comment. Change these if you want to make comments in JavaScript, but do not forget to change them back when you want to make a HTML comment again. JavaScriptColor - The color of keywords in JavaScript. These are only colored if the flag JavaScriptColoring is set. The default is magenta. stringColor - The color of everything between quotes. Only used if the flag JavaScriptColoring is set. The default is green. tagColor - The color of the HTML tags. The default is blue. wordBreak - These two control which characters build up words, wordBreakPreface - wrapBreak - and these ones control word wrapping. wrapBreakPreface - Read about them in the general manual if you want to change them (should usually not be needed). Internal variable which you may change HTMLwords - keywords which you want to be highlighted when editing HTML in Alpha. They are colored with the same color as the HTML elements. If you want the words "cool" and "nifty" to be highlighted, add the following to your preferences file: lappend HTMLwords cool nifty htmlColorizing The first line defines the words, and the second one tells Alpha to color them. The default is {}, i.e. no keywords. Defining your own key bindings. It is possible to change the key bindings by using the Alpha "bind" command. Here are some simple bindings, included as samples of what is possible. For example, if you don't use an American keyboard, you maybe want to change the bindings for < > and & to where they actually are on your keyboard. For example, to get it right on my Swedish keyboard I put the following lines in my preferences file. bind '<' <o> {insertText "<\;"} HTML bind '<' <so> {insertText ">\;"} HTML bind '6' <so> {insertText "&\;"} HTML Read more about how to define your own key bindings in the general manual. =============================================================================== = HTML Tutorials, References and Validation =============================================================================== A Beginner's Guide To HTML, http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html Introducing HTML 3.2 http://www.w3.org/pub/WWW/MarkUp/Wilbur/ Introduction to HTML and URLs http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/intro.html Guide to HTML Commands http://www.woodhill.co.uk/html/html.htm Creating HTML - A simple guide http://www.netusa1.net/~jbornema/html.html Creating Net Sites http://home.netscape.com/assist/net_sites/ The Bare Bones Guide to HTML http://werbach.com/barebones/ JavaScript http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/ HTML Validation http://www.webtechs.com/html-val-svc/