You are here: irt.org | Articles | GNU Emacs | HTML Editing With Emacs [ previous next ]
Published on: Saturday 5th December 1998 By: Pankaj Kamthan
GNU Emacs is one of the most widely used and powerful editors today. The task of formatting HTML files can be greatly simplified by using editing modes available for HTML. Pankaj Kamthan briefly describes the use of editing mode html-helper-mode, supported by the modes tempo, and hilit19.
The World-Wide Web (WWW) communicates in Hypertext Markup Language (HTML). To create an HTML file, any text-editor can be used. However, inserting and validating tags, and browsing the resulting document for testing purposes can become a daunting task. To facilitate HTML editing, special-purpose editors have been developed. However, traditional text-editors, such as Emacs, can be configured to HTML editing.
Its many modes, perfected over the years by thousands of users around the world, make editing almost any language very convenient and time efficient.
In this article, we discuss HTML editing supported by various modes. We assume here that the reader has some basic knowledge of HTML. It is useful but not necessary to have experience with Emacs.
C-, M-, SPC and RET denote CONTROL, META (ESC), SPACE and RETURN (ENTER) key characters, respectively. There are various implementations of Emacs, of which GNU Emacs is the most widely used. Unless stated otherwise, by Emacs we mean GNU Emacs.
Emacs is a widely and freely available editor distributed by the Free Software Foundation (FSF) and runs under a wide variety of operating systems.
Basic editing in Emacs is simple. In general, the alphanumeric keys on the keyboard, when pressed, insert the corresponding character into the current buffer. Editing commands are invoked by holding down combinations of the C-, SHIFT, M-, and RET keys while pressing an alphanumeric key. Almost every command in Emacs is a little LISP program that acts upon your text files. To extend Emacs, you simply modify the existing programs or add your own.
For those who wish to learn more about Emacs, a list of references has been provided.
There are various advantages of using Emacs over special-purpose HTML editors:
Unlike many HTML graphics editors, Emacs has no support for inline display of graphics. Using Emacs in conjunction with a graphics editor, such as Netscape Composer (which is easy-to-use and is freely available for non-commercial purposes), can be quite optimal.
html-helper-mode at http://www.santafe.edu/~nelson/tools/ is an Emacs mode to make editing HTML files easier. It is inspired byMarc Andreessen's html-mode at http://indy.cs.concordia.ca/www/html/editors/emacs/lisp/html-mode.el. We describe here version 2.0 of html-helper-mode. html-helper-mode provides short keystroke combinations for the most frequently used HTML tags. For example, one key combination inserts the opening and closing tags for a level 1 header (<H1>and </H1>) and positions the cursor between the tags in the appropriate position to type the text for the header. It also adds many conveniences. For example, it automatically indents HTML lists, allows you to complete partially typed tags, and supports the creation of a template when opening a new HTML document. If you use X Window System interface to Emacs, the mode adds a pop-up menu of HTML tags. A shell-based view is shown below:
We assume that Emacs is already installed on your system. If you don't, you can obtain it from one of the WWW sites mentioned in the list of references. To make optimal use of the modes described here, it is recommended that you have version 19 or better.
html-helper-mode is not part of Emacs by default. You can obtain it through the WWW at the URL ftp://ftp.reed.edu/pub/src/html-helper-mode.tar.gz. Unpacking the file gives the following:
You can create a directory ~/emacs/lisp/ and move these files to it. There are also certain documentation files:
You can create a subdirectory doc/html-helper-mode/ of ~/emacs/ and move these files in it.
A simple way to load html-helper-mode is to put the following lines (after configuring the appropriate path) in your .emacs file on your system (if one doesn't exist, you will need to create one). Usually such a file resides in the home directory. A sample .emacs file has been provided in Appendix I.
(setq load-path (cons "path_to_html-helper-mode_directory/" load-path))
(autoload 'html-helper-mode "html-helper-mode" "Yay HTML" t)
(setq auto-mode-alist (cons '("\\.html$" . html-helper-mode) auto-mode-alist))To have the mode recognize any server-parsed HTML files (with extension .shtml), you need to add the following to the above:
(setq auto-mode-alist (cons '("\\.shtml$" . html-helper-mode) auto-mode-alist))html-helper-mode has several helpful features that are turned off by default, as well as several variables that the user might want to change for his or her own use. You can configure these variables by adding the appropriate setq forms in your .emacs:
(setq <variable name> <value>)
where <value> is one of t or nil if it is an on/off value, or a number or a quoted string. You can refer to the GNU Emacs Manual - Customization (see, for example, http://www.socs.uts.edu.au/doc/gnuinfo/emacs/emacs_34.html) to see how it can be done.
It is recommended that you turn on both html-helper-do-write-file-hooks and html-helper-build-new-buffer, and set html-helper-address-string to the value appropriate for you. We discuss the significance of these templates later.
In this section, we describe the basic functionality of using Emacs with html-helper-mode. A comprehensive list of html-helper-mode commands is given in Appendix II.
The main function of html-helper-mode is to make it easy to insert HTML tags. For every HTML tag, there is a template which contains the text of the tag itself and information as to where the fields are that the user might want to fill in.
Each template can be activated in one of two ways: by typing the key binding for the tag, or by completing the tag. For example, C-cC-bt will insert the string <title></title>, and position point where you want to type the title. Since every HTML tag has a keybinding, there are many key bindings for html-helper-mode, remembering all of which can become overwhelming. Using completion facilty of html-helper-mode can then be helpful.
When using completion, you type the first few characters of the tag and press M-TAB: Emacs either completes that tag for you or shows a window where you can see the possible completions. For example, insert a title tag, instead of typing C-cC-bt as we did previously, we can type <titlM-TAB. Emacs inserts the <title></title> tag, and position point where you want to type the title. Completion does not work in all cases but is useful for typing in partial tags and letting Emacs put in the rest.
If a command is called with by pressing C-u first (a prefix argument), then instead of inserting the tag at the point the tag is inserted around the region. Thus, C-uC-cC-pb will wrap the <b></b> token around region, thereby making it bold.
It is useful for a beginning HTML author to have a template to work with. When a new HTML document is created, html-helper-mode can insert a template HTML file with all the tags a valid HTML document should have (according to the HTML 3.2 standard) automatically. This feature is turned off by default. To use this feature add the following to your .emacs file:
(setq html-helper-build-new-buffer t)
Open a new file in Emacs, say new.html, by typing C-xC-f new.html. html-helper-mode inserts the template:
<html> <head> <title></title> </head> <body> <h1></h1> <hr> <address></address> <!-- hhmts start --> <!-- hhmts end --> </body> </html>
As one gets experienced, a library of such template files can be created.
To have html-helper-mode automatically insert your URL, name and e-mail address in the <address></address> tag, add the following to your .emacs file:
(setq html-helper-address-string "<a href=\"your_URL\">your_name <your_e-mail_address></a>")
You can type-in text as usual. First you insert the title. Then a level-one header by C-cC-t1. Paragraphs can be separated by using M-RET. To type special characters such as < or &, you need to enter appropriate HTML escape codes or entities (see, for example, http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_13.html). You can do that using C-c before the character. For example, to insert the escape code for <, (i.e., <) you can type C-c<. To create an unordered list, type C-cC-li. This creates the tag <ul> <li> </ul> and prompts the user to insert the item.
The source of HTML documents with nested lists can be hard to read. html-helper-mode indents lists to the appropriate depth depending on how deeply nested the list is. List tags are automatically indented when they are inserted. To indent a line by hand, press TAB. It also indents the <li> tag. If you create a nested list, it indents even more. This is useful for readability. Indentation can be turned off by putting the following line in .emacs file:
(setq html-helper-never-indent 't)
If you type the tags manually, Emacs provides a visual check by matching the angle brackets.
You can insert hyperlinks by typing C-cC-al. html-helper-mode puts in <a href=""></a> for you to insert the URL and the anchor text. By putting the following line in .emacs file:
(setq tempo-interactive t)
Emacs prompts you to insert the URL and the anchor text. It can help you to remember to enter all the necessary information for the tag.
It is "good" HTML practice to put in the date of last modification of your document. By putting the following line in .emacs file:
(setq html-helper-do-write-file-hooks t)
html-helper-mode automatically inserts and updates timestamps every time you edit and save an HTML file.
One of the most useful features of html-helper-mode is highlighting. For this you need to have a coloured monitor and the hilit19 mode. It is usually included in Emacs (19+) distribution.
If you have hilit19 loaded in your Emacs, then html-helper-mode will automatically set up regular expressions to colour links, HTML tags, included images, and comments. For these patterns to be installed correctly hilit19 must be loaded before html-helper-mode.
As HTML evolves, new HTML tags are being introduced. One way to extend the html-helper-mode to accept these new tags is to write your own named macros. Interested reader is referred to Chapter 10 of Learning GNU Emacs, 2nd Edition, by Debra Cameron, Bill Rosenblatt and Eric Raymond, O'Reilly & Associates, Inc., 1996.
Using Emacs in conjunction with html-helper-mode and other modes describe here can be quite useful, particularly for those who wish to typeset WWW documents themselves (instead of using a WYSIWYG editor) for learning the intricacies of HTML and for better control. Such an environment can be ideal for those using a text-based browser such as Lynx.
There are other useful modes which can be used together with the html-helper-mode, such as html-font for font lock support which we haven't described. For details, see the list of references.
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; File: .emacs
;; Author: Your Name
;; Description: Emacs Customizations
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; HTML Helper mode
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(setq load-path (cons "path_to_html-helper-mode_directory" load-path))
(autoload 'html-helper-mode "html-helper-mode" "Yay HTML" t)
(setq auto-mode-alist (cons '("\\.html$" . html-helper-mode) auto-mode-alist))
;; Recognize server-parsed HTML files
(setq auto-mode-alist (cons '("\\.shtml$" . html-helper-mode) auto-mode-alist))
;; Insert new document HTML template
(setq html-helper-build-new-buffer t)
;; Insert address
(setq html-helper-address-string
"<a href=\"your_URL\">your_name <your_e-mail_address></a>")
;; Enable time stamp
(setq html-helper-do-write-file-hooks t)
;; Enable hyperlink prompt
(setq tempo-interactive t)Keybindings for html-helper-mode version 1.34 are described here. You can check for the most recent list by using mode help by typing C-hm from within the mode.
KEY TEMPLATE ACTION
------------------------------------------------------------------
C-u universal-argument When used before any other tag
command, inserts tags around a
region
M-TAB tempo-complete-tag Complete the current tag
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ TAB indent line RET insert newline and indent M-TAB complete tag at point M-C-f move forward one mark M-C-b move backward one mark M-C-t insert the timestamp delimiter
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ M-RET html-paragraph <p> C-c- html-horizontal-rule <hr> C-cC-t# html-header-# <h#></h#> C-cC-al html-anchor <a href=""></a> C-cC-lu html-unordered-list <ul><li></ul> C-cC-ld html-definition-list <dl><dt><dd></dl> C-cC-li html-smart-insert-item <li> or <dt><dd> depending on context
All commands preceded by C-cC-b.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ t html-title <title></title> i html-isindex <isindex> n html-nextid <nextid> l html-link <link href=""> b html-base <base href="">
All commands preceded by C-cC-t.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ 1 html-header-1 <h1></h1> 2 html-header-2 <h2></h2> 3 html-header-3 <h3></h3> 4 html-header-4 <h4></h4> 5 html-header-5 <h5></h5> 6 html-header-6 <h6></h6>
All commands preceded by C-cC-a.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ n html-target-anchor <a name=""></a> l html-anchor <a href=""></a>
All commands preceded by C-cC-s.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ p html-preformatted <pre></pre> b html-blockquote <blockquote></blockquote> e html-emphasized <em></em> s html-strong <strong></strong> c html-code <code></code> x html-sample <samp></samp> r html-citation <cite></cite> k html-keyboard <kbd></kbd> v html-variable <var></var> d html-definition <dfn></dfn> a html-address <address></address> q html-quote <q></q> n html-person <person></person> y html-acronym <acronym></acronym> . html-abbrev <abbrev></abbrev> m html-cmd <cmd></cmd> g html-arg <arg></arg> l html-lit <lit></lit>
All commands preceded by C-cC-p.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ b html-bold <b></b> i html-italic <i></i> u html-underline <u></u> f html-fixed <tt></tt> x html-strikethru <s></s> ^ html-superscript <sup></sup> _ html-subscript <sub></sub> r html-render <render tag="" style="">
All commands preceded by C-cC-l.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ o html-ordered-list <ol><li></ol> u html-unordered-list <ul><li></ul> r html-directory <dir><li></dir> m html-menu <menu><li></menu> d html-definition-list <dl><dt><dd></dl> i html-smart-insert-item <li> or <dt><dd> depending on context l html-item <li> t html-definition-item <dt><dd>
All commands preceded by C-cC-n.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ a html-abstract <abstract></abstract> n html-note <note role=""></note> f html-footnote <footnote></footnote> m html-margin <margin></margin>
All commands preceded by C-cC-f.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ f html-form <form action=""></form> t html-input-text <input name="" size=""> i html-input-int <input type="INT" name="" size=""> . html-input-float <input type="FLOAT" name="" size=""> d html-input-date <input type="DATE" name="" size=""> u html-input-url <input type="URL" name="" size=""> c html-input-check <input type="CHECKBOX" name=""> r html-input-radio <input type="RADIO" name=""> g html-input-image <input type="IMAGE" name="" src=""> s html-input-scribble <input type="SCRIBBLE" name="" size=""> a html-input-audio <input type="AUDIO" name=""> b html-input-submit <input type="SUBMIT" value=""> x html-input-reset <input type="RESET" value=""> p html-input-textarea <textarea name="" rows= cols=></textarea> c html-input-select <select name=""></select>
All commands preceded by C-cTAB.
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ i html-image <img src=""> t html-alt-image <img alt="" src=""> a html-align-image <img align="" src=""> e html-align-alt-image <img align="" src="" alt="">
KEY TEMPLATE INSERTED TEXT ------------------------------------------------------------------ M-RET html-paragraph <p> C-c- html-horizontal-rule <hr> C-cRET html-break <br>
C-c& html-ampersand & C-c< html-less-than < C-c> html-greater-than > C-cSPC html-nonbreaking-space