Tips and Tricks for Authoring Web-Clean AbiWord Documents

Introduction

When writing a document, many authors want to be able to present that document in a variety of media and formats.  AbiWord has a variety of file formats available for your use.

Often, a particular file format is naturally associated with a particular type of media.  For example, HTML is naturally associated with presentation on the World Wide Web.  If you are interested in presenting your document in a variety of media, there are issues of presentation which you should keep in mind.  This tutorial discusses how to create "Web-Clean" AbiWord documents.  A "Web-Clean" document is a document which will accurately be represented in HTML and which will be easy for you to modify for integration into your web-site.

Word Processing versus Content Authoring

When creating any document, there are two different approaches that an author can take.  The first is a concentration on presentation, where the author manually edits the visual details of his or her document until happy with the way it looks.  The second is a concentration on structure, where the author focuses on the content of the document, and then applies formatting based on what type of structure the content possesses.

In order to create a "Web-Clean" AbiWord document, you must engage in word processing while at the same time paying attention to the structure of the document which you are creating.  A typical document consists of a variety of structures, such a headers, lists, paragraphs, and so on.

To demonstrate what I'm talking about, let's look at the example of creating a header in a document.  Doing things the first way, concentrating on presentation, we would insert the cursor where we want the header, then select Times New Roman for the font, 20 for the font size, and bold, for emphasis.  Doing things the second way, concentrating on structure, we would select the style which best represents the structure we want from the drop down menu at the left of the Formatting toolbar.  In this case, we would select "Heading 1", and then this section of the document would have the "Heading 1" style.

Styles

What we notice first, following the instructions above, is that when we apply the "Heading 1" style to our header, we do not have the formatting which we had when we manually formatted our header by the first method.  By default, the built in formatting for the "Header 1" style is Arial, bold, 17 point font.  This is just the default, however; styles give an author a great deal of control over the appearance of a document.

A style is simply a description of a structural element in your document, such as a header.  Each style has an associated set of formatting instructions which apply to every element with that style.  The author can then manipulate these formatting instructions to control the visual presentation of all elements with the given style.

Why is this important?

There are two main reasons why utilizing styles is important for the authoring of your documents.  The utilization of styles allows you to make changes to the presentation of the document very easily.  For instance, if you need to make all headers of a certain type bigger, you just adjust the formatting instructions for that header, and the change is applied throughout the document.  To do this, go to Format > Style... to bring up the Styles menu.  Select the style you want to modify from the Available Styles list, and press Modify... to bring up the Modify Styles dialog.  From this window you can access the presentation information associated with the style that you chose.  As you can see, this technique is valuable for any type of document authoring.  This concept of styles is also utilized in the export to HTML, so that if you need to edit your HTML separately, you can change the presentation of one style by easily editing the formatting instructions, known as Cascading Style Sheets.

Additionally, using styles and formatting instructions gathers all presentation information into a centralized location, which greatly simplifies the content of your document.  This is particularly important when it comes to working with HTML, as you may need to work directly with the HTML markup at some point to integrate your document with your web-site.

HTML Formatting Instructions - Cascading Style Sheets (CSS)

By default, when you save your document as an HTML file, AbiWord places all formatting instructions into one block at the beginning.  These formatting instructions use the Cascading Style Sheet language, and are in the <style> tag in the <head> of your document.  From here it is easy to move the styles as a whole (copy and paste) into a new document which can then be externally linked or integrated with your web-site's style sheet.

Paragraphs & Indentation

Every time you press Enter or Return when you are editing an AbiWord document, you are creating a new content block in your document.  In order to create Web-Clean AbiWord documents, you should try to have only one content block for every section of content in your document.  Examples of sections of content include paragraphs, headers, and items in a list.

For example many authors, when using a word processor, will manually insert whitespace between paragraphs by pressing Enter repeatedly.  The amount of whitespace between paragraphs, however, is a detail about visual presentation which should be left to the formatting instructions of the paragraphs, as discussed in the section about styles, above.

You can also control indentation within paragraphs with formatting instructions.  It is often tempting to control the specific indentation of sections of text with multiple spaces or tabs.  In order to create Web-Clean documents, however, you should set the desired margins or indents using formatting instructions or the margin stops in the ruler:

Using this method enables the HTML to use the appropriate formatting instructions to properly indent the text, and saves you, the author, from having to repeatedly indent text manually.

Images

As an author using AbiWord and interested in presenting your content as a web-page, there is one issue you should be aware of with respect to using images in your document.  First, unlike AbiWord files, HTML files cannot store image information within the file itself.  Rather, they must refer to separate image files.  When you save an AbiWord file as an HTML file, then, all images are saved into a directory and referred to from there.  If the name of the HTML file to which you are saving is filename.html, then this directory will be called filename.html_d.  You will find all the images from your document in this directory.