Debra Cameron - Learning GNU Emacs, 3rd Edition

Serious web developers may want to investigate some of the cutting edge development going on to make Emacs even more powerful. Check out HTMLModeDeluxe (http://www.emacswiki.org/cgi-bin/wiki/HtmlModeDeluxe) and the Emacs WebDev Environment by Darren Brierton (http://www.dzr-web.com/people/darren/projects/emacs-webdev). Both of these tools support mmm mode (where mmm stands for "multiple major modes"). Using this feature, the cursor changes major mode depending on the section of the page you are editing. When you edit a script, the mode changes automatically to support that type of authoring. Both are excellent tools for building complex web pages.

In the following sections, we are not going to teach you to write HTML. (For more information on writing HTML, see HTML and XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy, O'Reilly) Rather, we're going to teach you the rudiments of using HTML mode and HTML helper mode to help you create HTML documents.

To start HTML mode, type M-x html-mode(or simply open an HTML file). Most authors use a standard template when they write HTML. You may already have one. If you don't, HTML mode is happy to supply one for you. Simply start by typing C-c C-t(for sgml-tag) or by selecting Insert Tag from the SGML menu. If you enter the tag that signifies the start of an HTML document, Emacs inserts a basic template in your buffer.

Type: C-c C-t html Enter

Emacs prompts for a title.

Type: A Tale of Two Cities Enter

Emacs inserts an HTML template.

Note that Emacs automatically creates a first-level header that is equal to the title you entered. It also inserts a hyperlink so that readers can email you. Depending on your spam tolerance, you may want to delete that line. Also, Emacs is just guessing at your name and email address. You can set these explicitly by adding two lines to your .emacs file. Change Mr. Dickens' information to settings appropriate for you.

(setq user-mail-address cdickens@great-beyond.com)

(setq user-full-name "Charles Dickens")

You could approach HTML mode in a couple of ways. You could learn the key bindings for various tags, or you could simply use the sgml-tagcommand for everything. It depends how many bindings you want to learn. A mixed approach may be best, where you learn keystrokes for the most common tags and use sgml-tagfor less common tags.

Key bindings are intuitive in HTML mode. Like most specialized editing modes, many functions are bound to C-c C- something . We've seen C-c C-tto insert a tag. You won't be too surprised to find that to move forward to the next tag you type C-c C-fand to move back to the previous tag you type C-c C-b. To insert an tag, type C-c C-h. You see what we mean.

HTML mode is designed for writing HTML, not XHTML. XHTML is stricter, requiring all tags to have a closing tag. The common

tag is a salient example. HTML authors would never use the closing tag

tag even when given a command, such as sgml-tag, that normally inserts a tag pair. If you want to write XHTML, use XHTML mode instead. Emacs starts this mode itself if your file contains a reference to an XHTML document type definition. Other than completion of tags, XHTML mode is very similar to HTML mode described here. [43]

Being able to hide the tags is a helpful feature. To hide HTML tags, type C-c Tab; use the same command to display the tags again. Let's say that we've inserted some of our dickens file into the dickens.html file we were just working with.

Initial state:

dickens.html with tags showing.

Type: C-c Tab

Emacs hides the tags.

You can keep typing text, concentrating on what you're writing rather than being distracted by the markup. Emacs protects you from deleting tags when you're writing by making hidden text read-only. If you move the cursor onto a hidden tag, Emacs displays it in the minibuffer.

Of course, the whole purpose of writing HTML is to display it in a web browser. Typing C-c C-v(for browse-url-of-buffer) opens the default web browser to view the web page you're writing.

If you'd like to look at the file in a web browser each time you save, you can turn on a function called html-autoview-mode, invoked by pressing C-c C-s. When you save the file, Emacs automatically opens it in the default browser.

What if you want to include special characters or characters from other character sets in your web page? The short answer is that you can enter a character's encoding explicitly. For example, to enter a capital Ü with an umlaut, you can type Ü. Many characters can also be represented as named entities, which are certainly easier to remember than numbers. For example, the named entity for a capital Ü with an umlaut is Ü.

But HTML mode does provide more support than this. We'll take the simplest case first. Let's say you can create a character with your keyboard; for a common case, take the ampersand, a character that must be encoded since it has a special meaning in HTML. Type C-c C-n & Enter. Emacs inserts the entity for an ampersand, &. You can insert entities for a wide variety of keyboard characters this way.

But let's say that you are inserting characters that are not on your keyboard. For example, perhaps you are in the U.S. writing up a list of contributors from Europe and many of their names have accent marks. The ISO Latin-1 character set will handle this.

If you have a keyboard that already emits Latin-1 characters and Latin-1 is your default coding system for keyboard input, inserting such characters is relatively straightforward. Simply press C-c 8to turn on a minor mode called SGML name entity mode. Emacs says sgml name entity mode is now on. [44] C-c 8toggles this state. Type Latin-1 characters as you normally would and Emacs inserts the named entities associated with those characters.

For those of us with other keyboard encodings, however, there's a bit more to do. To get bindings to insert entities into your HTML file, we discuss two options. The first is ISO accents mode. This mode provides support, as the name implies, for accented text. Whether you're typing umlauts, cedillas, circumflexes, acute, or grave marks, ISO accents mode is up to the task. The other option is to use the C-x 8prefix to insert a wide range of entities, including currency signs, mathematical symbols, and copyright signs (as well as all the accented characters ISO accents mode supports).

To use ISO accents mode to insert entities in your file, type C-c 8to turn on SGML name entity mode, then M-x iso-accents-mode Enterto turn on that mode. In ISO accents mode, certain characters (including /, ~, ', ", `, and ^) are interpreted as prefixes to create accented characters. SGML name entity mode captures these keystrokes and automatically inserts the appropriate HTML entity. For example, typing 'aproduces the HTML entity for á, á. For specific key bindings, see Table 8-2.