Sams Teach Yourself Emacs in 24 Hours
Hour 17: Editing LaTeX/HTML Files
Previous
Hour
|
Sections in this Hour: |
|
|
|
||
|
||
|
||
|
|
Sams Teach Yourself Emacs in 24 Hours |
|
||||||||||||||||
|
Hour 17: Editing LaTeX/HTML Files |
|
||||||||||||||||
|
|
||
|
||
|
In an Emacs window, type C-x C-f and then type trial.html. Notice that two new menu names appear on the menubar, HTML and SGML. I'll discuss the SGML menu later; for now, click the HTML menu. You'll see the drop-down menu that appears in Figure 17.1. Many of the most commonly used tags can be selected with the mouse and inserted in your document.
Figure
17.1
Skeleton
HTML file
with HTML menu.
There is no point in repeatedly typing in the same basic HTML framework for every new file. In order to save time, I recommend loading a simple skeleton template file rather than creating an empty file. After editing this template file, simply save it under a new name (select Save Buffer As in the Files menu) and you will be able to use it again. A template file should look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html> <head> <title></title> </head> <body> <h1></h1> </body> </html>
Type the previous lines and save the file, perhaps naming it template.html. Now you can fill in a title between the <title> tags; this appears in the title bar of the browser window. The remainder of the contents of your file should be between the two <body> tags. Notice that the second tag of each pair has a forward slash before the identifying name.
The main header of your file should be inserted between the <h1> tags. Subsidiary section and subsection headers are usually enclosed within <h2> or <h3> tags, which are also available from the menu. The menu is also available on UNIX-like systems by pressing the Ctrl key along with the right mouse button.
Probably the most frequently used tag is <p>, used at the beginning of each new paragraph. This particular tag is unusual in that a closing </p> tag isn't required, although putting one in won't cause problems. Because the paragraph tag is used so often, using the mouse to insert the tag from the menu can be distracting while typing. Fortunately all of the tags in the HTML menu have keybindings associated with them, such as C-c Enter for the paragraph tag. The keystrokes needed are listed in the menu as an aid to learning them.
Not appearing on the menu are several other HTML tags that have their own keystrokes. Type C-h m.to split the Emacs window horizontally; the new lower half of the window now displays basic help for the active editing modes (as shown in Figure 17.2). Scroll to the bottom of the Help display to find other keybindings that can be used in your HTML files--for example, keystrokes for the smaller subsection headers such as <h6>.
Figure
17.2
Help
window showing mode information.
The commonly used character formatting tags such as <b> for bold, <i> for italic, and <u> for underlining don't appear on the HTML menu. These tags can be selected from the Edit, Text Properties, Face submenu, and they can also be accessed by typing M-g, which causes these choices to appear in the minibuffer. These commands are designed to work on selected regions.
The two varieties of lists used in HTML files are ordered and unordered. An ordered list has its items sequentially numbered, whereas an unordered list is just a list. Typing C-l-c C-l-c o inserts the following ordered list in your file:
<ol> <li>(the cursor will be left here) </ol>
A list item is one of the individual members of a list. A browser indents the entire list to set it off from the remainder of the page. Each item in an unordered list is displayed with a bullet in front of it, which is either a large dot or a circle, depending on the browser. Items in an ordered list are prefixed with a number.
The list item tag <li> is like the paragraph tag in that it doesn't need a matching closing tag. Type a few words after the <li> tag and type C-c C-c i; the result looks like this:
<ol> <li>words you typed <li>another item </ol>
There can be as many list items as you like. The only restriction is that they all have to be between the <ol> and </ol> tags. In a browser, the second example would look like this:
1. words you typed 2. another item
Unordered lists are just like ordered, but without the numbers before each item. Type C-c C-c-u for this type of list. Lists are displayed in a browser indented from the main text in order to set them apart.
One of the contributing factors to the explosive growth of the Internet is HTML's capability to reference external files with links. It's all done with a simple little tag containing the URL (uniform resource locator) of another HTML file, either a file on your machine or a file on a remote Internet site.
The URL is always between quotes, whereas the section just before the </a> end tag is actually visible when the file is viewed with a browser. Just type C-c C-c h and Emacs prompts you in the minibuffer for the URL. Type it in and your cursor ends up before the end tag, enabling you to type in the name for the link. A link looks something like this:
){kind=link}
){kind=link}
<a href "http://www.mcp.com>">[the cursor is placed here]</a>
What would a Web page be without images? For one thing, pages would load more quickly, but when used discreetly images can greatly enhance a Web page. There are several tags that are used to display images both inline (right on the page) and externally (as a hyperlink). The simplest one looks like this, which can be inserted by typing C-l-c C-c i:
<img src="another.gif">
Note - If your image is not in the same directory on the server as your HTML file, a path might have to be appended to the image's filename. |
Not everyone browses the Web with a computer capable of displaying images well. Rather than using the bare image tag, as in the previous example, it's a good idea to use the <img alt> tag, which looks like this:
<img alt="Here's another photo!" src="another.gif">
Visitors to your page who, for whatever reasons, aren't displaying the images will at least see a short text description of the image, and the site will probably make more sense to them.
GNU Emacs's default HTML mode doesn't have a keybinding for this second tag, but it's easy enough to add the alt= section manually.
It's generally preferable (and courteous) to keep the size and number of inline images to a minimum. Larger images can be linked to your page with a hyperlink rather than inline with an <img> tag. This gives the visitor to your site the option of either clicking on the image link (if they really want to see it) or ignoring it.
To create an image link, first type C-c C-c h. You are prompted in the minibuffer for a URL, but in this case you don't need one. Just press Enter, and you see this in your file:
<a href "http://"></a>
Delete the http:// characters between the quotes and insert the filename of your image.
Depending on which version of Emacs you have installed, the various tags and their contents might or might not be displayed in a combination of bold, italic, and colored fonts.
It takes a little work with Customize to set up a pleasing combination of highlighting colors that works with your default background and foreground colors, but it's worth the trouble if you will be working with tagged files such as HTML and LaTeX. All you need to do is click the Help menu, move the mouse cursor to Customize and select Browse Customization Groups. When the Customize Browser buffer opens, find Font Lock Highlighting Faces (in the Font Lock category, shown in Figure 17.3) and try some different color combinations.
Figure
17.3
Font-highlighting
Customize buffer.
Another method to access and modify the relevant Customize settings is useful if you already know the name of the Customization group you want to affect. Just type M-x (customize-group). Remember that after typing M-x, any further commands appear in the minibuffer rather than in the main text area. The response from Emacs is Customize Group (Default Emacs). If you just type Enter at this point a Customization buffer appears with all groups listed under the broad category Emacs. Instead type font-lock, and just the font-lock customization settings appear. One of these is Global Font Lock Mode, along with the option to either toggle the setting on or off. Toggle it on, click State, and in the resulting menu select Save for Future Sessions. This action causes this particular setting to be saved in your .emacs initialization file, so that each time you start up Emacs it causes all files in formats recognized by Emacs to be fontified, which is Emacs jargon for syntax highlighting.
Writing HTML is much easier if the file can be periodically viewed in a browser such as Netscape, Lynx, or Internet Explorer.
This is a quick way to determine whether links are working correctly, and any mismatched or missing tags are glaringly obvious. The Emacs HTML mode provides a quick method to either send your file to a running browser or to start the browser with the file displayed. Whenever you have made several changes to a file, just click View Buffer Contents in the HTML menu and your file is visible in your browser. When the browser has loaded your file the display can be periodically updated by reloading the file, either using the Reload icon or the equivalent keystroke (Alt-R in Netscape).
Next to the HTML menu on the menubar is the SGML menu. SGML stands for Standard Generalized Markup Language , an international document standard. HTML is a smaller subset of SGML that was developed for use on the Internet. The only SGML menu item of immediate interest is Toggle Tag Visibility (as shown in Figure 17.4), which enables you to hide all of the angle-bracketed tags and view just the bare text. This is very useful in longer HTML documents; being able to review the text without the distracting tags can be a help while editing. The keystroke C-c Tab.is another way to hide the tags.
The final, somewhat-cryptic item on this menu deserves at least a mention. Validate allows Emacs to call an external SGML parser that checks your file for correct HTML syntax. One of the commonly used parsers is James Clark's sgmls. Frankly, though, this is of limited use for beginners, because nearly all Web browsers are very lenient about bad HTML syntax and attempt to display just about anything between <html> tags. If you would like to pursue this further, a search on the Internet for SGML, James Clark, or sgmls will likely yield a bounty of avenues to follow.
Figure
17.4
The SGML
menu.
|
Sams Teach Yourself Emacs in 24 Hours |
|
||||||||||||||||
|
Hour 17: Editing LaTeX/HTML Files |
|
||||||||||||||||
|
© Copyright Macmillan USA. All rights reserved.
){kind=link}
){kind=link}