Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt

Related items

You do have "CSSTYLE" with Emacs

HTML Editing With Emacs

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.

Introduction

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.

Notation

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.

Advantages Of Emacs Editor

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 : An Introduction

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:

Emacs with html-helper-mode

Requirements

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.

Obtaining And Installing

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

Configuration

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.

Using HTML Helper Mode

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.

Inserting HTML Tags

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.

New Document Templates

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.

Address

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

Text

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

Indentation

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.

Hyperlinks

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.

Timestamps

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.

Highlighting

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.

Extensibility

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.

Conclusion

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.

References

Appendix I : Sample .emacs File

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; 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 &lt;your_e-mail_address&gt;</a>")

;; Enable time stamp
(setq html-helper-do-write-file-hooks t)

;; Enable hyperlink prompt
(setq tempo-interactive t)

Appendix II : HTML Helper Mode Commands

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.

General

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

Mode Bindings

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

Common Insertions

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

Head Elements

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="">

Headers

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>

Anchors

All commands preceded by C-cC-a.

KEY         TEMPLATE                INSERTED TEXT
------------------------------------------------------------------

n           html-target-anchor      <a name=""></a>
l           html-anchor             <a href=""></a>

Logical Styles

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>

Physical Styles

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="">

Lists

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>

Annotations

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>

Forms

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>

Images

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="">

Text Elements

KEY         TEMPLATE                INSERTED TEXT
------------------------------------------------------------------

M-RET       html-paragraph          <p>
C-c-        html-horizontal-rule    <hr>
C-cRET      html-break              <br>

Entities

C-c&        html-ampersand          &amp;
C-c<        html-less-than          &lt;
C-c>        html-greater-than       &gt;
C-cSPC      html-nonbreaking-space  &nbsp;

Related items

You do have "CSSTYLE" with Emacs

View the profile on Pankaj Kamthan and the list of other Articles by Pankaj Kamthan.

©2013 Martin Webb