Kompozer

Download and Installation

KompoZer is a free, open source HTML editor that can be downloaded from:
http://www.kompozer.net/

After downloading the .ZIP file, you will need to unzip the file. If you have downloaded the file to your desktop, click on the .ZIP file icon, and the file will open in a folder window (Windows XP). Click "Extract all files" on the left, and the Extraction Wizard will open. Click Next, and then browse to a folder. After clicking the Browse button, you can either select a destination or click the Make New Folder button.

Site Manager

KompoZer's site manager is on the left of the screen. Click and drag the edge of the frame to resize, close, or open the panel. Once you have set up your site in KompoZer, you can view a listing of the files and folders on your account, and you can use the site manager to open pages, rename files and folders, delete pages, and create new folders. To create a new site, click the Edit Sites button. The Publish Settings will require a Site Name which can be named anything, the Publishing address, and a User name and Password. The publishing address is the FTP address of the server; if you are publishing to comp.uark.edu, the publishing address will be:
ftp://comp.uark.edu
If you are publishing to comp.uark.edu, the User name and Password will be your UARK username and password.

Creating New Pages and Editing Existing Pages in KompoZer

When you open KompoZer, you are given a new blank page. To create another new page, click File, New, and choose to create a new blank page, a page using a template, or a new template. If other pages are open in KompoZer, the new page will create a new tab.

If you have set up the site manager, you can double-click the site name to open a file (double-click) from the listing. You can also click File, Open Web Location and type the URL of an existing (live) web page in the web location field. Clicking File, Open File will let you open a page from your local drive.

Text Formatting

Use the heading tags for headings throughout your page. Click the dropdown menu which is defaulted at “Body Text” from the toolbar or click Format, Paragraph on the menu bar to choose a heading (1-6); heading 1 is the largest. To apply a heading to existing text, click within the paragraph and select a heading.
ADA Note: Use the heading tags for actual headings, not just for the way it looks.

To bold, italicize, emphasize, or underline text, select the text and click the Bold, Italics, Emphasize, Strong Emphasize, or Underline button on the toolbar or click Format, Text Style on the menu bar. Other styles are available from the menu bar including subscript, superscript, and strikeout. Multiple styles can be applied to the same text. To turn off the style, select the text and click the button again, or click Format, Style and uncheck the style.
Note: It is best not to use underlining on a web page because underlining looks like a link and can be confusing.

Change the font face of the text by selecting the text and clicking the Choose a Font dropdown menu or by clicking Format, Font on the menu bar. If you set a font face that the computer on which the page is being viewed does not have installed, that font face will not be available, and the text will be in the default font when viewed on that computer.

Change the font size by clicking Format, Size on the menu bar and choosing a size. See the following list for the relative font sizes that correspond with the font size selections in KompoZer.
x-small = -2
small = -1
medium = 0 (or none or default)
large = +1
x-large = +2
xx-large = +3
You can select a size and then type the text or select existing text and apply a size. Do not use the Larger Font Size and Smaller Font Size buttons on the toolbar or Smaller or Larger under Format, Size as they will use tags that will not be read by all browsers.

Change the font color by selecting the text and then clicking the Choose Color for Text button on the toolbar or by clicking Format, Text Color on the menu bar and choosing a color from the palette. This will affect selected or new text.

Align text and other elements on your page by placing the cursor within a paragraph or selecting an image and clicking one of the Alignment buttons on the toolbar or by clicking Format, Align on the menu bar. Choose Align Left, Align Center, Align Right, or Align Justified.

To create a number or bullet list on your page, place the cursor where the list should begin and click either the Bulleted List or Numbered List button on the toolbar or click Format, List from the menu bar and choose a list. This will place the first bullet or number. Type the first list item. Pressing Enter will move the cursor to the next line and will insert the next bullet or number. When the list is finished, press Enter again to insert an extra bullet or number. Click the Bulleted List or Numbered List button again or click Format, List on the menu bar and uncheck the appropriate list to toggle the list off and remove the extra bullet or number. You can change between types of lists by selecting the entire list and selecting the other type of list. If the list items are already typed on the page, select the items and select the bullet or numbered list. You can create subsets within a list by selecting the subset items and clicking the Indent Text button; pull the list back out of a subset by clicking the Outdent Text button. You can change the number style by clicking at the beginning of the list and clicking Format, List, List Properties from the menu bar.

ADA Note: Use the numbered list HTML element (ordered list) instead of typing numbers for lists, and use the bullet list element (unordered list) instead of using characters or images for bullets.

Note: Numbered lists are used for items that should be listed in a specific order; if the listing doesn't have an order, use bullets.

Linking

To create a link on your page, place the cursor on the page where the link will begin and click the Link button on the toolbar, or click Insert, Link from the menu bar. In the Link Text field, type the text that will appear on the page as the link. In the Link Location field, type the full URL of the page to which you are linking. Be sure to include the “http://” portion of the URL. If you are linking to a file of your own (on the same account), just type the exact filename in the field; if it is in a different subdirectory on your account, you will need to include the relative path (the path from page to page). You can also select existing text to create a link. The selected text will be in the Link Text field.

ADA Note: Use text for links that makes sense when read out of context (for instance, do not use only "click here" or "more" as links).

You can use an image as a link by selecting the Link tab when inserting an image and entering the URL (or filename, anchor, or email address) in the field. You can double-click the image to add a link later.

ADA Note: The alt tag is especially important for images used as links; be sure to duplicate the text in the image in the alt tag.

A mailto is a link that when clicked will open the default email application with your email address in the To: field of the message composition. To create a mailto on your page, click the Link button and type the email address in the Link Location field. In the Link Text field, type the text that should appear on your page as the mailto text (or select the link text or image initially). Place a checkmark in the "The above is an email address" checkbox.

Named anchors work like links, but instead of going to another page, clicking on a link to a named anchor will take you to another location within the same page. (You can also combine a link to another page with a named anchor.) You will often see named anchors used in tables of content and in “Go back to the top of the page” links. To create a link to a named anchor, you must first set up the target location. This is where the browser will go when the link is clicked. To do this, place the cursor on the page where the link should go when clicked, and click the Anchor button. Name the target; do not use spaces or punctuation in your target name. You will see an icon marking the location of the anchor on the page, but this will not show on the live page. Create the link that will go to the target location by clicking the Link button. In the Link Text field, type the text that should appear on your page as a link (or type the text first and select it). Select the target name that you created from the dropdown menu in the Link Location field.

Images

To place an image on your page, click the Image button on the toolbar or click Insert, Image from the menu bar. Click the Choose File button and select an image from your hard drive or from a disk, CD, or other location. Type the alternate text in the Alternate text field.

ADA Note: The alternate text attribute is necessary to make your page ADA compliant. The alternate text should be a good description of the image and should include any information that would be lost if someone cannot view the image. This is especially important if the graphic contains text. Any text in the graphic should be duplicated in the alternate text attribute.

To change the image size, click the Dimensions tab. Click the Custom Size radio button to change the width and/or height. Click the Constrain checkbox to keep the width and height proportional. If you resize the image this way using the HTML width and height attributes, the result can be a poor quality image. Also realize that the actual size of the graphic does not change when using these attributes. The actual image size will be displayed in the Image Preview section.

Under the Appearance tab, you can change the spacing around the image or change the border size. You can also set the alignment of text to the image. Wrap to the Left and Wrap to the Right will cause the text to wrap around the image.

Under the Link tab, you can add a URL or path to make the image a link. By default, there will be no border placed around a linked image; check the Show Border Around Linked Image checkbox to add the border (to designate that the image is a link).

To change any of the image attributes, double-click on the image to reopen the Image Properties window with that image’s attributes. To remove an image from your page, select the image by clicking on it and press the Delete key on the keyboard. If you have already uploaded that image to your account, the file will still exist there.

Page Properties: Title, Page Colors, and Background

All web pages need a title. The title will appear in the title bar of the browser window, will be used as the page’s bookmark label, and could show up as a search result heading, but does not appear on the actual page. To give your page a title, click Format, Page Title and Properties from the menu bar. In the Title field, type an appropriate title for your page. The title can contain spaces and/or special characters, but cannot utilize HTML tags (so it can't be bolded, colored, italicized, etc.).

The background of your page, the text color for the page, the link color, active link color, and visited link color can be changed from their default colors. Changing the text color will affect all of the text on the page except for any font colors you have used from the Choose Color for Text button on the toolbar or by clicking Format, Text Color on the menu bar; these will override this global text color. Visited links are links to other pages that the computer you are using has previously loaded into the browser that you are using. The active link color is the color of the link text when it is being clicked.

To change the text, link, and/or background colors, click Format, Page Colors and Background from the menu bar. First select the Use Custom Colors radio button. Then click on the color box next to Normal Text, Link Text, Active Link Text, Visited Link Text, and/or Background. Choose a color from the palette. You can also enter an RGB color code. To set a background image for your page, click the Choose File button under the Background Image field of the Page Colors and Background dialog box and select an image from your hard drive or from elsewhere. Background images are tiled. You should try to use a small image for the background to reduce your page’s load time. A background image will override a background color; although, the color will still show before the image loads and will show through transparent backgrounds of background images and around or in some page elements. To remove a background image, delete the filename (and path) from the Background Image field.

Tables

A table can be created for use as an actual table or to be used for page layout. They can also be used as “decoration” around graphics. You can also create “text boxes” using a table with a colored background.

ADA Note: It is recommended that layout be done using style sheets instead of tables. When using tables for layout, make sure they are readable from left to right. When using tables as data tables (not for layout), make sure to use the SCOPE and TH tags and include a summary and caption.

To create a table, first place the cursor (click) on the page where you want the table. Click the Table button on the toolbar or click Insert, Table… on the menu bar. You can create the table using the Quickly tab by dragging the cursor (without clicking) to indicate the number of rows and columns and clicking on the last cell. You can also click the Precisely tab and type the number of rows and columns in the appropriate fields (you can add or remove rows and columns later if needed), set the width of the table, and set the border size. For the width, you can choose between a pixel size and a percentage of the window. If the Width field is left blank, the table will conform to whatever is put in it (text, images, objects). Select a pixel size for the table’s border. Typing a 0 will cause the table lines to be invisible. The table border will show in KompoZer as dotted lines, but will not show when the page is loaded into a browser.

ADA Note: Use only percentages for table/cell heights and widths.

To set the other table attributes, open the Table Properties dialog box. Select the table by clicking on it and then click the Table button on the toolbar, or double-click the table, or right-click inside the table or click Table on the menu bar and select Table Properties, and the Table Properties dialog box will open. Under the Table tab are the properties which affect the entire table. These include number of rows and columns and the table width. The pixel size for the table’s border, spacing, and padding (cell margins) can also be set (these cannot be set for individual cells). You can also set the table alignment; this refers to the placement of the table on the page. The Caption dropdown menu allows you to choose if you want a caption on your table and, if so, the location of the caption. Clicking the Background Color box will allow you to select a background color for the entire table. Clicking the Cells tab will show properties that will affect only the cell (or row or column) in which the cursor is when you opened the Table Properties dialog box; although, you can click the Previous and Next buttons to move among the table cells. Here you can select a cell Height and Width (pixels or percentage) and set the Vertical and Horizontal Content Alignment of the text and/or images that are inside that cell. You can also set the Cell Style to Header, set text not to wrap, and set the background color (which will override the table background color) for that cell, row, or column.

ADA Note: If the cell is a row or column header cell in a data table, be sure to select Header as the Cell Style.

To delete a table, row, or column, click within the table or row or column to be deleted and click Table, Delete, and choose what to delete. To insert rows or columns, click Table, Insert, and choose what to insert and where. To join multiple cells, select the cells to be joined and click Table, Join Selected Cells from the menu bar. You can use the arrow keys or Tab key to move between cells in the table. Pressing Tab in the last cell will create a new row for the table.

Characters and Symbols

Special characters and symbols include letters with accents, umlauts, diphthongs, the copyright and trademark symbols, mathematical symbols, some fractions, and many more. To place special characters and symbols on your page, place the cursor where you want the character and click Insert, Characters and Symbols… on the menu bar. Choose a category and then select the letter and/or character from the dropdown menus and click the Insert button.

Viewing the HTML Source

In the status bar of KompoZer are four tabs, Normal, HTML Tags, Source, and Preview. Clicking the Normal tab will show the normal editing mode for your page. Clicking the HTML Tags tab will show icons for each of the HTML tags on your page; although, attributes of the tags will not show. Clicking the Source tab will show the HTML source code for the page which can be edited. Clicking the Preview tab will display the page as it would appear in some web browsers.

Saving and Publishing

Saving your page will only save the file to your local drive. To put the page on the web (upload), you must publish the page. Saving the page can provide a backup, but is not necessary.

The first time that you publish a page, KompoZer will display the Publish Page dialog box. After that, you will be able to choose a site to which to publish and will still have your publishing information for that site.

KompoZer Publishing Information Needed for the comp.uark.edu server

Under the Settings tab:

• Site Name: Your site can be named anything. The naming requirement is in case you have more than one site.
• HTTP address of your home page: This field is not necessary for publishing. On comp.uark.edu, your home page will typically be:
  http://comp.uark.edu/~username
  where "username" is your actual comp.uark.edu (UARK) username.
• Publishing address: It is important that this field be typed exactly. The address for comp.uark.edu is:
  ftp://comp.uark.edu
• User name and Password: If you are publishing to comp.uark.edu, you will type your UARK username and password.

Under the Publish tab:

• Page title: The title should reflect the topic of the page.
• Filename: Home pages are typically named index.html. Your other pages can be named anything with the extension of .html or .htm. If you are publishing to comp.uark.edu or another Unix server, make sure that there are no spaces or characters in the filename. Unix is case sensitive and the filename will be a part of the page's URL. If you give the page the same filename as an existing page, the new page will overwrite the existing page when uploaded.
• Site subdirectory for this page:
  public_html
  If you are publishing to comp.uark.edu, you will need to upload all web page files into the public_html directory or a subdirectory of public_html.
• Include images and other files: Make sure that this checkbox is checked so that your images will be uploaded (published) along with your page.