Learning HotMetal Pro 6 - 132

Copyrights and Trademarks
No part of this document may be reproduced, stored in a retrieval system, or

transmitted in any form or by any means electronic, mechanical, recording, or
otherwise without the prior written consent of the publisher.
Netscape Navigator is a trademark of Netscape Communications Corp.
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of
Microsoft Corporation.
All trademarks and brand names are acknowledged as belonging to their
respective owners.
Published by
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail: info@xnu.com
Copyright 1999 by XtraNet

All Rights Reserved
January 1999
First Edition
123456
Copyrights and Trademarks

No part of this document may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means electronic, mechanical, recording, or
otherwise without the prior written consent of the publisher.
Netscape Navigator is a trademark of Netscape Communications Corp.
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of
Microsoft Corporation.
All trademarks and brand names are acknowledged as belonging to their
respective owners.
Published by
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail: info@xnu.com
Copyright 1999 by XtraNet

All Rights Reserved
January 1999
First Edition
1234567
Table of Contents
Chapter 1 - HTML Introduction.......................................................................................1
Linear Media ......................................................................................................................2
Hypermedia........................................................................................................................2
What is HTML Markup ........................................................................................................3
A Basic Document ..............................................................................................................4
Review Questions ...............................................................................................................5
Summary ...........................................................................................................................6
Chapter 2 - Overview of the HoTMetaL Editor ............................................................7

Launch Screen ...................................................................................................................8
Initial Screen ......................................................................................................................9
Editor Window .................................................................................................................. 10
Docking Windows ............................................................................................................. 11
Left Windows .................................................................................................................... 12
Assets View............................................................................................................................................................. 12
Document Windows .......................................................................................................... 15

Editor Views ..................................................................................................................... 16
Source View ............................................................................................................................................................ 17
Tags On View.......................................................................................................................................................... 18
WYSIWYG View...................................................................................................................................................... 19
WYSIWYG-Frames View ........................................................................................................................................ 19
Page Preview View ................................................................................................................................................. 20
Editor Preferences ............................................................................................................ 21

Menu Items ...................................................................................................................... 21
Toolbars ........................................................................................................................... 22
Selecting Toolbars................................................................................................................................................... 22
Moving Toolbars...................................................................................................................................................... 23
Customizing Toolbars.............................................................................................................................................. 23
Toolbar Functions ............................................................................................................. 24

Review Questions ............................................................................................................. 27
Summary ......................................................................................................................... 28
Chapter 3 The Anatomy of an HTML Document ...................................................29

Document Structure.......................................................................................................... 30
Head Elements................................................................................................................. 31
Document Properties ........................................................................................................ 32
Inserting Elements and Attributes....................................................................................... 33
Modifying an Elements Attributes ....................................................................................... 34
Removing Elements.......................................................................................................... 35
Exercise........................................................................................................................... 36
Optional Exercise ............................................................................................................. 36
Summary ......................................................................................................................... 38
Chapter 4 - Headings, Paragraphs, Breaks and Horizontal Rules.........................39

Headings, <Hx> </Hx>...................................................................................................... 40
Paragraph, <P> </P>........................................................................................................ 41
HoTMetaL Tip .................................................................................................................. 41
Horizontal Rule, <HR> ...................................................................................................... 43
Exercise Headings ......................................................................................................... 44
Exercise Horizontal Rules ............................................................................................... 45
Exercise Paragraphs & Breaks ....................................................................................... 46
Summary ......................................................................................................................... 48
Chapter 5 - Character Formatting ................................................................................49

Bold & Italic and other Character Formatting....................................................................... 50
Font Element .................................................................................................................... 52
Alignment ......................................................................................................................... 54
Special Characters & Symbols........................................................................................... 54
Special Characters Toolbar..................................................................................................................................... 54
SoftQuad HoTMetaL PRO Training
Table of Contents
Symbols Toolbar ..................................................................................................................................................... 54
Additional Character Formatting Elements.......................................................................... 55

HoTMetaL Tip .................................................................................................................. 57
Exercise 1........................................................................................................................ 58
Exercise 2........................................................................................................................ 59
Summary ......................................................................................................................... 61
Chapter 6 - Lists .............................................................................................................62

List Elements.................................................................................................................... 63
Unordered List......................................................................................................................................................... 63
Ordered List............................................................................................................................................................ 64
Definition List........................................................................................................................................................... 65
Other Lists............................................................................................................................................................... 66
HoTMetaL Tip .................................................................................................................. 66

Nesting Lists..................................................................................................................... 67
Exercise Ordered List..................................................................................................... 68
Optional Exercises ............................................................................................................ 68
Summary ......................................................................................................................... 70
Chapter 7 Anchors and URLs ...................................................................................71

Link Elements <A Href=> </A> .......................................................................................... 72
Link Types ....................................................................................................................... 72
Internal Links.................................................................................................................... 73
Creating Local Links ......................................................................................................... 74
URLs Uniform Resourced Locators ................................................................................. 75
HTTP HyperText Transport Protocol.................................................................................................................... 75
FTP File Transfer Protocol................................................................................................................................... 75
News News Groups.............................................................................................................................................. 75
Gopher.................................................................................................................................................................... 76
E- mail ...................................................................................................................................................................... 76
Telnet Remote Terminal Emulation ...................................................................................................................... 76
Link Colors ....................................................................................................................... 77

HoTMetaL Tip .................................................................................................................. 78
Exercise Mailto and HTTP Link ....................................................................................... 79
Summary ......................................................................................................................... 81
Chapter 8 Images and Image Maps.........................................................................82

Supported Image Formats................................................................................................. 83
GIF.......................................................................................................................................................................... 83
JPEG....................................................................................................................................................................... 84
Limited Support or Non-Supported Image Formats ............................................................. 84

Inserting Images <IMG> .................................................................................................... 85
Image Attributes ............................................................................................................... 86
Inserting Images using the Asset Manager ......................................................................... 88
HoTMetaL Tip .................................................................................................................. 88
Using Images as Links ...................................................................................................... 89
Image Maps ..................................................................................................................... 90
Server-side Image Maps ......................................................................................................................................... 90
Client-side Image Maps........................................................................................................................................... 91
How to create a Client-side Image Map.............................................................................. 92

Exercise 1........................................................................................................................ 95
Summary ......................................................................................................................... 97
Chapter 9 - Tables .........................................................................................................98

Tables <TABLE> </TABLE> .............................................................................................. 99
Inserting a Table ............................................................................................................. 100
Table of Contents
Table Attributes..................................................................................................................................................... 101
Table Captions ...................................................................................................................................................... 103
HoTMetaL Tip ................................................................................................................ 103

Table Header ........................................................................................................................................................ 104
Editing the Table ................................................................................................................................................... 105
Tables Toolbar ...................................................................................................................................................... 105
Table Properties............................................................................................................................................... 106
Row Properties ................................................................................................................................................ 108
Column Properties ........................................................................................................................................... 109
Cell Properties ................................................................................................................................................. 110
Exercise Add and customize a table .............................................................................. 112

Review Questions ........................................................................................................... 113
Summary ....................................................................................................................... 114
Chapter 10 - Converting Legacy Documents and Using Templates....................115

Converting Legacy documents......................................................................................... 116
HoTMetaL Tip ................................................................................................................ 117
Using Templates ............................................................................................................. 118
Exercise Converting a legacy document ........................................................................ 120
Exercise Creating a new document using a template...................................................... 120
Summary ....................................................................................................................... 122
Chapter 11 - Frames....................................................................................................123
Frames .......................................................................................................................... 124
Frames Architecture........................................................................................................ 125
Creating a Frames Page ................................................................................................. 126
Frameset............................................................................................................................................................... 127
Frame .................................................................................................................................................................... 129
Noframes............................................................................................................................................................... 131
Targets.................................................................................................................................................................. 132
Special Targets ..................................................................................................................................................... 133
Frame Editor .................................................................................................................. 134

Exercise Using a Framed page ..................................................................................... 135
Exercise Creating a link in a framed environment ........................................................... 135
Exercise Creating a Frames Based Page ...................................................................... 136
Exercise Creating Three Panels.................................................................................... 137
Summary ....................................................................................................................... 139
Chapter 12 - Forms ......................................................................................................140

Forms <FORM> </FORM> .............................................................................................. 141
Form Attributes...................................................................................................................................................... 142
HoTMetaL Tip ................................................................................................................ 142

Form Elements ............................................................................................................... 143
Hidden Values....................................................................................................................................................... 144
File Upload ............................................................................................................................................................ 146
Text area............................................................................................................................................................... 148
Select.................................................................................................................................................................... 149
Drop down list....................................................................................................................................................... 149
List box.................................................................................................................................................................. 149
Options ............................................................................................................................................................ 150
Common Gateway Interface - CGI ................................................................................... 151

CGI Scripts..................................................................................................................... 151
Simple CGI Program ....................................................................................................... 152
Three-Tier Web Application Development ........................................................................ 153
Four-Tier Web Application Development .......................................................................... 154
Exercise Creating an Order Form.................................................................................. 155
Summary ....................................................................................................................... 170
Chapter 13 - Special Elements ..................................................................................171

Uses of the Meta Element ............................................................................................... 172
Client Pull, Server Push........................................................................................................................................ 172
Table of Contents
Description............................................................................................................................................................ 172
Keywords .............................................................................................................................................................. 172
Author.................................................................................................................................................................... 173
Company............................................................................................................................................................... 173
Copyright............................................................................................................................................................... 173
Adding sound to an HTML page....................................................................................... 174

Embed................................................................................................................................................................... 174
BGSound............................................................................................................................................................... 174
Marquee ........................................................................................................................ 175

Blink .............................................................................................................................. 175
Exercise Adding Client Pull, Server Push....................................................................... 176
Optional Exercise ........................................................................................................... 177
Summary ....................................................................................................................... 179
Chapter 14 - Page Layout and Design Considerations ..........................................180

Technical Design Considerations ..................................................................................... 181
Screen Resolution................................................................................................................................................. 181
Color Depth ........................................................................................................................................................... 181
Document Size vs. Download Time ....................................................................................................................... 182
Page Loading HTTP 1.0 vs. HTTP 1.1 ............................................................................................................... 183
Browser Compatibility & Quirks ............................................................................................................................. 183
Page layout .................................................................................................................... 184

Page Layout Guidelines ........................................................................................................................................ 184
Site Design Factors and Criteria ...................................................................................... 186

Site Layout and Navigation .............................................................................................. 186
Summary ....................................................................................................................... 188
Chapter 15 - Cascading Style Sheets .......................................................................189

Introduction to Cascading Style Sheets ............................................................................ 190
Inline Styles.................................................................................................................... 191
Embedded Style Sheets.................................................................................................. 193
Creating an Embedded Style ........................................................................................... 194
Linked Style sheets......................................................................................................... 195
Creating a Linked Style Sheet.......................................................................................... 196
User Defined Selectors ................................................................................................... 197
Classes ................................................................................................................................................................. 197
IDs......................................................................................................................................................................... 198
Creating Classes and IDs ................................................................................................ 199

HoTMetal PRO Display Styles ......................................................................................... 200
DIV and SPAN................................................................................................................ 201
Cascading and Inheritance.............................................................................................. 202
Exercise Inline Styles ................................................................................................... 204
Exercise Embedded Styles ........................................................................................... 205
Exercise Linking in a Cascading Style Sheet .................................................................. 207
Exercise Editing a Cascading Style Sheet ..................................................................... 209
Optional Exercise ........................................................................................................... 212
Summary ....................................................................................................................... 214
Chapter 16 - JAVA and JavaScript Introduction......................................................215

JAVA ............................................................................................................................. 216
Applet ............................................................................................................................ 216
<PARAM> Element ............................................................................................................................................... 217
JavaScript ...................................................................................................................... 218

Exercise Inserting a JAVA Applet .................................................................................. 220
Optional Exercise Adding JavaScript to a page .............................................................. 221
Summary ....................................................................................................................... 223
Chapter 17 - ActiveX Objects and VBScript introduction.......................................224

4
Table of Contents
ActiveX Support .............................................................................................................. 225
<OBJECT> ..................................................................................................................... 225
VBScript......................................................................................................................... 229
Exercise Adding an ActiveX Object to a page ................................................................ 230
Optional Exercise Adding VBScript to a page................................................................. 233
Summary ....................................................................................................................... 235
Chapter 18 - High Speed Publishing .........................................................................236

Keeping HoTMetaL PRO Current ..................................................................................... 237
URL Hot List................................................................................................................... 238
Macros ........................................................................................................................... 240
Customizing Toolbars ..................................................................................................... 242
Creating Toolbars ........................................................................................................... 243
Creating New Menus ...................................................................................................... 245
Menu Customization Options ........................................................................................... 246
Working with Image Libraries & Other Web Components................................................... 247
Image Explorer...................................................................................................................................................... 247
Asset Manager...................................................................................................................................................... 248
Assets ................................................................................................................................................................... 249
Assets - adding................................................................................................................................................ 250

Summary ....................................................................................................................... 254
Chapter 19 From Web Pages to a Web Site ........................................................255

Designing a Web Site...................................................................................................... 256
Planning the Directory Structure for a Web Site ................................................................ 257
Establishing Document Standards ................................................................................... 258
Using Templates ............................................................................................................. 259
Summary ....................................................................................................................... 261
Chapter 20 Site Management Overview ...............................................................262

Site Management Tools .................................................................................................. 263
Creating New Project ...................................................................................................... 264
Opening an existing project ............................................................................................. 266
Project Tab..................................................................................................................... 267
Page and Site Views ....................................................................................................... 268
Right Click Menus & Functions ........................................................................................ 270
Summary ....................................................................................................................... 272
Chapter 21 Using Site Management tools to Manage a Web Site ..................273

Creating a New Folder .................................................................................................... 274
HoTMetaL Tip ................................................................................................................ 274
Importing Content ........................................................................................................... 275
Import Site............................................................................................................................................................. 275
Choosing a Destination ......................................................................................................................................... 277
Level Selection...................................................................................................................................................... 277
Content Selection.................................................................................................................................................. 277
Creating Links by Dragging and Dropping ........................................................................ 279

Managing Files and Links Between Files .......................................................................... 280
Moving Files .......................................................................................................................................................... 281
Copying Files ........................................................................................................................................................ 282
Deleting Files ........................................................................................................................................................ 283
Renaming Files ..................................................................................................................................................... 284
Find and Replace across Multiple Documents................................................................... 285

File Selection......................................................................................................................................................... 286
Search Options ..................................................................................................................................................... 286
Project Maintenance ....................................................................................................... 287

Finding Broken Links ............................................................................................................................................. 288
Fixing Broken Links ............................................................................................................................................... 289
Table of Contents
Testing External Links ........................................................................................................................................... 291
Locating Orphan Files ........................................................................................................................................... 293
Project Summary ............................................................................................................ 294

Summary ....................................................................................................................... 297
Chapter 22 Publishing a Web Site with HoTMetaL PRO ...................................298

Pre Publishing Procedures .............................................................................................. 299
Changing your URLs for the Web.......................................................................................................................... 299
Changing to Complete URLs ........................................................................................... 300

Changing to Relative URLs ................................................................................................................................... 302
Site Wide Changes to URLs ............................................................................................ 303

Configuring a Site for Publishing...................................................................................... 304
Site Properties....................................................................................................................................................... 304
Viewing Remote Files ..................................................................................................... 311

Publishing Files to Remote Sites...................................................................................... 312
Working with Remote Files .............................................................................................. 316
Post Publishing Procedures ............................................................................................. 317
Summary ....................................................................................................................... 319
1
HTML Introduction
In this chapter you will be introduced to the concepts of linear media and
hypermedia. You will learn about HTML and the basics of document
structure.
Objectives
Upon completing this section, you should be able to
1. Explain hypermedia vs. linear media
2. Define HTML
3. Describe the Basic Document Structure
Linear Media
Linear media is a term used to describe any media where there is a
defined beginning and a linear progression to the end. Forms of linear
media such as movies, audio and videotapes, and most books are
organized with this expectation. The World Wide Web, however, is
organized very differently.
Hypermedia
Hypermedia is where the user simply selects the next item of interest and
is immediately transported to that new location. A good example is an
audio CD where you can choose song 5 and listen to it almost
immediately. Contrast this with an audiotape where you would have to
scan through from your current location on the tape to the beginning of the
song.
When this concept is applied to text you get hypertext, where by
{Clicking} on a link or hotspot (hyperlink) you are immediately transported
to a new location within the same page or to a new page altogether.
When you interlink a large number of pages of text on different computers
all over the world, you get a spider web-like system of links and pages.
This is known as the World Wide Web a system whereby pages stored
on many different web servers, connected to the Internet, are linked
together.
The system is useful because all of the pages are created in the same
format. This format or language is called HTML, (Hypertext Markup
Language) a subset of an international standard for electronic document
exchanged called SGML (Standard Generalized Markup Language).
In this class you will be introduced to the format of an HTML page, you will
learn about the components that make up HTML, and how to use
HoTMetaL PRO to create pages that can be published on the World Wide
Web.
What is HTML Markup?

HTML is a set of logical codes (markup) in parentheses that describe the
appearance of a web document and the information it contains.
E.g. <B>This text would appear bold in the browser</B>
The codes are enclosed by less than <, and greater than > brackets.
These bracketed codes of the markup are commonly referred to as tags.
HTML codes are always contained inside these brackets and are caseinsensitive; meaning, it does not matter whether you type them in upper
case or lower case. However, tags are easier to recognize in a web
document if they are capitalized.
There is an opening element (tag) and a closing element (tag). The
closing element is distinguished by the / inside the < opening bracket,
as in </B> to end where the text is in bold.
The first word or character that appears inside the < opening bracket is
called the element. An element is a command that tells the browser to do
something, such as <FONT>.
Words that follow the element and are contained inside the > closing
bracket are called attributes. Attributes are not repeated or contained in
the closing element (tag). Confused? Attributes are another way of
describing the elements properties. For instance, a t-shirt can have
several properties or attributes the t-shirts color, size, material etc. are
all attributes.
Attributes that appear to the right of the element are separated by a
space, and followed by an equal sign. The value of the attribute is
contained in quotes. In the following example the element is FONT, the
attribute is COLOR, and the value of that attribute is BLUE.
Most HTML elements have more than one attribute.

E.g. <FONT COLOR="BLUE" SIZE=+1>This text would be blue and
one size larger than normal.</FONT>
A Basic Document
An element called HTML surrounds the whole document. This element
contains two sub-elements, HEAD and BODY. These elements are
required to form any HTML document.
Course Goal
The goal of this course is to teach you how to use HoTMetaL PRO 6.0 to
apply HTML Elements and Attributes in designing web pages. This course
will review almost every element in the current HTML specification. Not all
web pages use all of the elements, however it is to your advantage to
understand that they exist so that you can create more effective pages.
Review Questions
1. What does HTML stand for?
2. What is an Element?
3. What are the Attributes of an Element?
4. What are the three basic elements of an HTML document?
Summary
As a result of this chapter, you should be able to
Explain hypermedia vs. linear media
Define HTML
Describe the Basic Document Structure
2
Overview of the HoTMetaL PRO
Editor
In this chapter you will learn about the powerful HTML editor HoTMetaL
PRO 6.0, and how to customize it to your liking.
Objectives
1. Launch HoTMetaL PRO
2. Manage different window options
3. Identify the Asset Manager window functions
4. Switch between and describe the editor views in the Document
Window
5. Set the editor preferences
6. Find and select different toolbars
Launching HoTMetaL PRO 6.0

To start up HoTMetaL PRO 6.0, {Click} once on the "Start" icon in the left
corner of your screen, slide your mouse up to "Programs", {Click} once
and slide over to "SoftQuad Applications", {Click} once and slide onto
"HoTMetaL PRO 6.0" and {Click} once.
Initial Screen
When you startup HoTMetaL PRO 6.0 for the first time you will see the
Tip of the Day screen. You can view a series of Tips by {Clicking} on the
"Next Tip" button or you have the option to "Close" the window.
If you do not want to see the tips the next time you start HoTMetaL PRO,
uncheck the box in the lower left corner "Show Tips on StartUp".
Initial Editor Screen

Once you have closed the Tips Window, you will get the Editor interface in
its default configuration. Throughout the rest of the chapter we will be
familiarizing you with the editor, and how to customize it to your liking.
10
Window Management - Docking

Windows can either be active on the same screen layer as the editor
window docked - or they can be floating above the screen layer. A
docked window will have a handle, 2 ridges, at the top of the window.
{Double Clicking} on the handle will convert the window to a floating

window which can then be easily repositioned anywhere in your display.
To redock the window you can {Double Click} on the floating windows title
bar or you can {Right Click} on the title bar and choose the redock option
from the pop up dialog box.
If you {Right Click} on the handle you can enable or disable the Allow
Docking feature.
Note: If you undocked the window by turning off `Allow Docking', the only
way to return it to a docked position is as follows:
{Right Click} on any edge of the window

Choose Allow Docking to turn docking back on
{Right Click} on the title bar at the top of the window
Choose Redock
11
Left Windows
Assets Tab
Provides an active view, drag & drop window interface. The active view
shows image thumbnails with live animation and the drag & drop
interface allows for easy insertion of selected objects into your working
documents.
12
Desktop Tab
This view uses a Windows Explorer type of interface to allow file

administration operations. It can be helpful when you want to move
existing files into your working design environment.
13
Remote Tab
This view displays sites that you create as Publishing Locations. It allows
selection of files for editing by dragging and dropping from the Remote
Tab onto the editor window.
14
The Document Window

To explore the HoTMetaL PRO document window you need to create a
new file. {Click} on the New Page button
When you create a new page for the first time, the HoTMetaL PRO
document window displays the page in Tags On view, with Workbook
mode turned on. Workbook mode means that each open file will have a
tab displayed at the bottom of the document window. You can select any
open file by {Clicking} on its tab.
When a page is open in the document window you can edit it directly and
you can also drag and drop objects from the Asset Manager.
15
Editor Views
HoTMetaL PRO supports five different views:
1. HTML Shows the raw HTML code.
2. TAGS Shows the HTML tags in a graphical environment.
3. WYSIWYG What you see is what you get.
4. WYSIWYG-Frames - Shows you how your frames design will look.
5. Page Preview - What a page should look like in the browser.
You can switch between these views in several different ways:
1. Use the View Menu and select one of the views.
2. Use Keyboard short cuts visible in the View menu (Ctrl + Shift
H/T/W/F/B)
3. Use the icons in the bottom left corner of the editor window.
16
HTML Source View

This view shows the actual HTML code in your document. HoTMetaL
PRO's display is more useful than opening the file in a text editor: the
HTML Source view is color-coded and block elements are indented (this
indentationwhich makes the HTML Source view much easier to readis
called `pretty-printing').
The options for tag color and pretty-printing can be modified by choosing
Options... from the Tools menu and {Clicking} on the Source View tab.
One of the major advantages of the source editor is that it numbers the
rows for you in the HTML Source View.
17
Tags On View
The Tags On view shows graphical start- and end-tags for HTML
elements in your document. If you position your cursor over a tag, a text
box will display the attribute settings for that element. The Tags On view is
very useful because it allows you to work with HTML elements as units
while having the ease of use advantages of a graphical editing
environment similar to WYSIWYG:
You can cut, copy, paste and drag-and-drop, whole elements or
content from within elements.
You can select an element and its entire contents by {Clicking} on
the start or end tag.
The tag icons contain a plus or a minus sign that you can {Click} to hide or
show the tag contents. You will find this useful for rearranging elements
and reducing the amount of scrolling when you are working with the
documents structure.
In the HoTMetaL PRO Editor, a document could look like this:
If you viewed this file in a web browser, the TABLE would be invisible. In
HTML source view it appears as the illustration on the previous page.
Here in Tags it is visible graphically so that you can work within it easily.
18
WYSIWYG View
WYSIWYG is an acronym for `What You See Is What You Get'; that is, the
way documents are displayed should be representative of how they will
appear in a Web browser. WYSIWYG is a graphical editing environment
and it displays images, alignment of block elements, tables, form objects
(buttons, check boxes, etc.) and background colors and images. Editing
your document in this mode is very similar to working with a word
processor.
WYSIWYG-Frames View
The WYSIWYG-Frames view enables you to view and edit framesets and
frames to create your frames environment. You can also edit frames by
using the Frames Toolbar or the Frameset menu.
Frames will be discussed in a later chapter.
19
Page Preview View

The Page Preview window enables you to view your document, as it
would appear in Microsoft Internet Explorer. This is a real browser window
in which you can perform browser tasks such as navigating to links. There
is no menu bar or toolbar in this window, but by {Right-Clicking} you can
bring up a pop-up menu, in which you can perform actions such as moving
back or forward, saving an image as wallpaper, viewing the properties of
the document, and so forth.
Note: Microsoft Internet Explorer 3.0 or higher must be installed on your

PC in order for Page Preview to be available.
20
Editor Preferences
The Options command in the Tools menu of the HoTMetaL PRO Editor
gives you access to preference settings.
You can set options for:
General display preferences

Opening of documents - Source, Tags On or WYSIWYG view.
Specific display characteristics for Tags and Source View
Helper applications
Saving, creating backups of documents and setting a default template.
User dictionary and supplementary dictionaries for spell checking.
Menu Items
The menu items across the top of the HoTMetaL PRO Editor window
include all the commands accessible on the toolbar as well as additional
commands.
21
Toolbars
You can access commands in HoTMetaL PRO through the toolbars.
ToolTips short descriptions of what a toolbar button doesappear near
the toolbar buttons if you position your mouse cursor over a button.
There are 16 toolbars that can be selected. When you open the HoTMetaL
PRO Editor for the first time, the Menu, Standard, Formatting, and Preview
toolbars are displayed.
Selecting Toolbars
To turn a single toolbar on or off you can {Right Click} in the toolbar
display area at the top of the screen and select the toolbar from the pop
up menu. To make multiple selections and feature settings:
Choose Toolbars... from the View menu. The Toolbars dialog box
appears.
{Click} on the check boxes for the toolbars that you want to affect
You can also choose to alter the default settings for Flat Look and
ToolTips. You will notice that when displayed in Flat Look the toolbars
have 2 ridges on their left edges. These ridges are called the toolbars
handle.
22
Moving Toolbars
You can move any toolbar to any other position in the toolbar area at the
top of the HoTMetaL PRO screen, or move a toolbar off that area, where it
becomes a floating toolbar (sometimes called a `palette'). Floating toolbars
can be moved anywhere on the screen.
Position your cursor over the toolbar's handle

{Click} and hold on the handle.
Drag the toolbar to a different location at the top of the screen, or off of
the top area of the screen if you want it to become a floating toolbar.
To redock a toolbar at the top of the HoTMetaL PRO Window you can
drag the floating toolbar back to the toolbar area. You can also convert
toolbars from docked to floating and vice versa by {Double Clicking} the
handle or the title bar.
The locations of the toolbars, whether docked or floating, will be saved
when you exit the HoTMetaL PRO Editor. This means that they will be in
the same place when you open the Editor again.
Customizing Toolbars and Menus

You can create your own customized toolbars and menus using the
existing toolbar icons and menu commands available. This could be
helpful in providing you easier access to functions that you use most
commonly.
Creating a custom toolbar and menu will be covered later in the course,
once all of the default toolbars and HTML functions have been examined.
23
Toolbar Functions
Standard Toolbar
The Standard toolbar contains many common basic commands. Some of

the more unique functions are:
Save & Save All icons will be inactive if the file or files have not been
changed and so do not need to be saved
Find Text in Site will perform a text search across files linked as part of
your web site
Asset Manager button will toggle on and off the display of the Asset
Manager window panes
Check HTML will validate your document for conformance with HTML
standards
Check Accessibility will validate your document against common
accessibility guidelines
Accessibility
This term refers to a set of design guidelines that you can use to ensure
that your documents are accessible to everyone, including users of text
only browsers and other specialized equipment used to read web pages.
You can choose to check your documents against the accessibility
guidelines or you can set the HoTMetaL PRO editor to prompt you as you
are creating your pages. To activate accessibility prompting go to Tools
Menu Options General Tab Accessibility. When you first launch
HoTMetaL PRO accessibility prompting is set to off.
HTML Validation
Use the Check HTML feature to help find and avoid problems with your
pages. If your document contains invalid code a Validation Log window,
containing a list of one or more error messages, will pop up. To go to the
location of an error, {Double Click} on the error message, or select the
error message and {Click} Go To.
If your document contains valid code the check HTML feature will allow
you to see information about the compatibility of elements and attributes
that you have used with various browsers and different HTML specification
levels.
24
Preview Toolbar
The Preview Toolbar allows you to easily view your pages in multiple
browsers. When you {Click} on a preview button, HoTMetaL PRO
launches the browser and loads your working file into it.
You add browsers to the toolbar by {Clicking} on a blank toolbar button.
This will launch a Windows Explorer style of navigation dialog box. You
then navigate to the browsers executable file.
If you want to delete a browser from the toolbar you will need to select the
Preview in Browser option under the File Menu. This will launch the
Browsers dialog box that provides both Add and Delete functions.
Note: You can actually have up to 8 browsers listed in the Browsers dialog
box. This allows you easy access to viewing your documents in different
browsers.
25
Views Toolbar
The Views Toolbar has icons for several different views, such as the
different editor views and it also has a button to activate the Full Screen
mode.
The Full Screen button will display the HoTMetaL PRO document window
in the entire viewing space of your monitor. In Full Screen mode only the
Menu Bar and the Full Screen button are displayed.
Full Screen mode is very useful when you want to maximize the visibility
of the document that you are working on. This allows you to more easily
move elements and objects around on the page.
To return the HoTMetaL PRO document window to the normal view you
can {Click} on the Full Screen icon again, choose Full Screen from the
View Menu on the Menu bar or simply press the [ESC] key.
26
Review Questions
1. What is a docked window?
2. What are the tabbed sections available in the Asset manager?
3. How many toolbars are listed in the toolbars dialog box?
4. How do you turn on or off a single toolbar?
5. What are the different editor views?
6. What are the three ways to change the views?
7. How do you change preference settings?
27
Summary
28
Launch HoTMetaL PRO and start the editor
Control the position of docked and floating windows
Turn on and off the Asset Manager
Explain the different toolbars.
Set your preferences for the Editors layout and options
Use different views in the Editor to suit your requirements
3
The Anatomy of an HTML Document
In this chapter you will learn about HTML and basic document structure.
Objectives
1. Describe the Basic Document Structure
2. Identify the Sub-elements of the Header
3. Set Document Properties for pages
4. Insert Elements
5. Change Elements Attributes
29
Document Structure
The way a document is marked up with elements and their attributes is
according to a Document Type Definition (DTD). These are the rules that
govern the way in which a document can be marked up.
HoTMetaL PRO includes a Rules File based on the Document Type
Definition. As browser manufacturers (such as Netscape and Microsoft)
introduce new elements, you will need to update your rules file to include
these new elements. You can obtain an updated Rules File from
SoftQuad's web site: http://www.softquad.com. These rules files are only
available to registered users of SoftQuad HoTMetaL PRO. There is no
charge to download the updated Rules File.
The authoritative source for information about HTML and the HTML DTD
is the World Wide Web Consortium (W3C) at http://www.w3c.org. The
World Wide Web Consortium is a not-for-profit organization that
coordinates the evolution of the Web. It includes the Internet Engineering
Task Force, the group of people who make recommendations for new
markup.
30
Head Elements
<HTML>
<HEAD> has sub-elements that define header material:
<TITLE> the title of your document is what appears in a web
browsers Favorite or Bookmark list. Your documents title should
be descriptive as some search engines use the title for indexing.
</TITLE>
<BASE> can be used to record the document's location in the form
of a URL. URL is an acronym for Universal Resource Locator. The
URL is essentially the address of the web page or site, as in
http://www.trainingtools.com. This URL may be used to resolve
relative URLs located within the document (necessary if the
document is not accessed in its original location). </BASE>
<ISINDEX> is an older tag that is currently not recommended for
use in developing your pages in the HTML 4.0 Specification.
<META> provides information such as the pages keywords and
description that appear in HTTP headers.
<SCRIPT> contains either JavaScript or VBScript </SCRIPT>
<STYLE> contains cascading style sheet information </STYLE>
<LINK> forms a relationship to another object on the Web. It can
be used to link a style sheet or a section of JavaScript. </LINK>
</HEAD>
<BODY>
The remaining HTML elements are contained within these tags.
</BODY>
</HTML>
Base, Meta, Script, Link and Style are covered in detail later in the course in the
URL and Anchors, Special Elements, VBScript and JavaScript, and Cascading
Style Sheets chapters respectively.
Note: a framed document is formatted differently than a basic document and is
discussed in the advanced section of the course.
31
Document Properties
A documents overall look and feel are controlled by the attributes of the
<BODY> tag. The easiest way to edit them is to use the Page Properties
option under the File Menu.
The resultant HTML code that will be generated is:
Some attributes have default values that are applied by the browsers.
These default values do not show up in the attribute inspector or in
properties dialog boxes. Many of these will be discussed in later chapters.
32
Inserting Elements & Attributes

Inserting an Element can be accomplished in a number of ways:
1. Place your cursor where you want to insert the element {Click} the
corresponding icon on one of the tool bars. Not all Elements have an
icon on the tool bar to choose from.
2. Place your cursor where you want to insert the element. From the
Insert menu select Insert Element A list containing only the elements
valid in that location (where your cursor is) will be displayed. Scroll
through the list and choose the Element you wish to insert.
The Insert Element dialog box presents a tabbed list. The tabs offer
you the ability to view and select recently used Elements, Miva
Element Tags or HTML Elements. The Insert Element dialog box can
be docked or floating.
3. Place your cursor where you want to insert the element {Click} on the
Insert Element
button, located near the right side of the
STANDARD toolbar. The Insert Element dialog box will be activated.
4. Place your cursor where you want to insert the element. Use the
keyboard short cut [Ctrl] + [Shift] + [I] to open the Insert Element
dialog box.
Place your cursor where you want to insert the element. {Right Click} and
select Insert Element from the pop up dialog box to activate the Insert
Element dialog box.
33
Modifying an Elements Attributes

To set or modify an Elements Attributes you use the Attribute Inspector.
There are three different ways to activate the Attribute Inspector window:
1. Place your cursor within a pair of Element tags. From the View menu
select Attribute Inspector.
2. Place your cursor inside the element tags and press [Shift] + [F6].
3. Place your cursor within the tags, {Right Click} and select Attribute
Inspector from the pop-up menu.
NOTE: When working in Source View the Attribute Inspector can be
launched by the View Menu or by the keyboard shortcut.
The Attribute Inspector window lists valid attributes for the selected
element. The attribute lists are grouped as:
Common regularly used

Events used with programming scripts
All all valid attributes for the selected element
Attributes can be selected in the left-hand column and the values can be
entered in the right-hand column. When an attribute is selected a
description is displayed in the text area at the bottom of the inspector
window.
34
Removing Elements
In both Tags and WYSIWYG views you can easily delete tags and
content. {Clicking} and dragging over text will select the text. You can then
remove the selection by using the [BACKSPACE] or the [DEL] key.
{Clicking} on either the opening or closing tag in Tags View will select the
element and its contents. You can then [DEL], [BACKSPACE] or Cut to
remove the element.
In some cases you will be able to remove, only the element tags by
{Clicking} on the remove tags button
toolbar.
located on the Quick Tools
This icon will only be active in cases where if the tags were removed the
contents of the element would be contained by another element of a
legitimate type. If the icon were inactive (grayed out) you would have to
move the contents separately, using one of the methods described above,
before deleting the element tags.
35
Chapter 3 Exercise 1
The goal of this exercise is to familiarize you with the HoTMetaL PRO
editor, and the topics discussed up to Chapter 3.
Procedure
1. Start HoTMetaL PRO (if you have not already done so).
2. {Click} on the New Page icon
on the Standard Toolbar.
3. Inside the TITLE Element tags

key in
{Your Company Name A Project Name} e.g. XYZ Corp. Intranet
Project
4. Switch to the HTML source view, using one of the methods outlined in
the chapters. Notice the element and attribute codes enclosed in the
HTML < > brackets. Switch back to Tags View.
5. Next, {Click} on the View menu and then select Toolbars from the
list. Make sure the following toolbars are checked on: Standard,
Formatting, Quick Tools, and Preview.
6. {Click} on the File menu and select Page Properties. Set your
documents background color to white. (Older browsers default to gray)
{Click} Apply, and then OK.
7. Save your file call it index.htm. Save it in the
C:\HMPFILES\Exercises directory.
8. Preview your file. Use the Preview in Browser view of the editor and
also use the Preview Toolbar to view your file in Navigator, IE and any
other browser that you have installed and are using.
Chapter 3 - Optional Exercise

1. Use the View Menu Toolbars Option to activate other toolbars and try
turning off the Flat Look.
2. You can also experiment with moving toolbars around in the editor and
changing them from docked to floating.
NOTE: Customizing toolbars is not recommended at this time. It is
covered later in the course.
36
Review Questions
1. Name 4 elements that can be contained inside the HEAD element of a
page?
2. What element controls the overall look and feel of a page?
3. Name two ways to insert an element?
4. Name two ways to set or modify an elements attributes?
37
Summary
38
Identify the sub elements of the HEAD element
Set the documents properties
Insert Elements
Set Element Attributes
4
Headings, Paragraphs, Breaks and
Horizontal Rules
In this chapter you will add headings to your page, insert paragraphs, add
some breaks, and add horizontal rules.
Objectives
1. List and describe the different Heading elements.
2. Know when paragraphs get created.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.
39
Headings, Paragraphs, Breaks and Horizontal Rules

Insert buttons for these common elements are located on the Quick Tools
toolbar:
Quick Tools Toolbar
Headings, <Hx> </Hx>

Inside the BODY element, heading elements H1 through H6 are generally
used for major divisions of the document. Headings are not mandatory.
Headings are permitted to appear in any order, but you will obtain the best
results when your documents are displayed in a browser if you follow
these guidelines:
H1: should be used as the highest level of heading, H2 as the

next highest, and so forth.
You should not skip heading levels: e.g., an H3 should not
appear after an H1, unless there is an H2 between them.
The size of the text surrounded by a heading element varies from very
large in an <H1> tag to very small in an <H6> tag.
Headings can be inserted with one mouse {Click} of the button on the
Quick Tools toolbar.
40
Paragraph, <P> </P>

Paragraphs allow you to add text to a document in such a way that it will
automatically adjust the end of line to suit the window size of the browser
in which it is being displayed. Each line of text will stretch the entire length
of the window.
Each time you press [ENTER] on your keyboard, a new paragraph will
start, with one exception when you first start and are directly between the
<BODY> and </BODY> tags.
Note: The [ENTER] key has a different function in a table cell. Tables will
be discussed later.
Paragraph tags will automatically be placed around the text you type. For
example if your cursor insertion point is just to the right of the <BODY> tag
and you begin typing, the text you type will be surrounded by <P> and
</P> tags.
You can also insert a paragraph by:
1. {Clicking} on the
from the Quick Tools toolbar
2. By selecting Paragraph from the style element drop down box on the
Formatting Toolbar.
3. {Clicking} on the Insert Element icon
from the list.
, and selecting Paragraph
HoTMetaL Tip
If you insert multiple empty paragraphs in succession, you will notice the
browsers display these with only one blank line between them.
If you try to type two words separated by five spaces, only one space will
display in the browser. (Neither the tags nor WYSIWYG environment will
allow you to enter multiple spaces using the spacebar)
Browsers ignore multiple spaces between paragraphs, within paragraphs
and within tables. If you have areas where you would like extra spaces or
you want your empty paragraphs to give you extra line spacing, you will
want to insert a NBSP (non-breaking space). A NBSP is an invisible
character that takes up one space.
To insert a NBSP type [CTRL] + [SHIFT] + [SPACEBAR].
41
Break, <BR>
Line breaks allow you to decide where the text will break on a line or
continue to the end of the window. There may be instances where you
want the text to appear on the next line. Example: a return address contained in one Paragraph but on multiple lines or text in a Header, such
as a title for the document.
You can insert a Forced Line Break <BR> from the Quick Tools toolbar.
{Click} the
icon. Notice that HoTMetaL PRO Editor displays <BR> but
you are not able to insert anything in between.
You can also use a keyboard shortcut to inset a <BR>.
Type [SHIFT] + [ENTER]
A <BR> is an Empty Element, meaning that it may contain attributes but it

does not contain content. The <BR> element uses one attribute CLEAR
which can have a value of LEFT, RIGHT or ALL.
The CLEAR attribute forces a line down; if an image is located at the
pages left margin, the clear LEFT attribute will move the cursor down to
the first line that is cleared at the left margin. The same applies with the
option of the clear RIGHT attribute. If an image is at either the left or right
margins, the clear ALL attribute will force a line break until both margins
are cleared.
42
Horizontal Rule, <HR>

Causes the browser to display a horizontal line (rule) in your document.
To insert a <HR> element you can {Click} on the toolbar button
. This
inserts a line in the HoTMetaL PRO Editor document window. {DoubleClicking} on the Horizontal Rule will allow you to set the attributes (all of
which are extensions to the HTML 2.0 standard, so use them with
caution):
Sizing of Horizontal Rules can be indicated in pixels. Computer displays
are made up of individual dots or units called pixels. Currently computers
have a common group of fixed desktop dimensions ranging from 640x480
to 1280x1024 or higher. Web sites are usually designed resolution-safe
meaning to the lowest common denominator; which is a desktop display at
640 pixels wide by 480 pixels high (640x480). When sizing elements
designers commonly restrict objects to 600 pixels of width at the maximum
to guarantee proper display.
SIZE: height of the rule in pixels.

WIDTH: width of the rule in pixels or percentage of screen width.
NOSHADE: whether the rule should have a 3D or flat look.
ALIGN: aligns the line (Left, Center, Right).
COLOR: sets a color for the rule (IE 3.0 or later)
43
Chapter 4 Exercise 1 - Headings

1. Add an H1 to your page. Inside the tags key in {Your Company
Name}.
2. Add an H2 after the H1 on your page. Inside the tags key in {Your
Division or Dept. Name.}
3. Add an H3 after the H2 on your page. Inside the tags key in {A Project
Name} e.g. Intranet Project.
4. Add an H4 after the H3 on your page. Inside the tags key in {Project
Name} Plan.
5. Add an H3 after the H4 on your page. Inside the tags key in {A
different Project Name} e.g. Internet Project.
6. Add an H4 after the H3 on your page. Inside the tags key in {Project B
Name} Plan.
7. Your document should look something like this at this point:
44
Chapter 4 Exercise 2 Horizontal Rules

1. Add a Horizontal Rule after the H1 and before the H2.
2. Make the Horizontal Rule only 50% of the width of the screen.
(Remember elements have attributes.)
3. Add a Horizontal Rule after the last H4 on the page.
4. Your document should look similar to this now:
45
Chapter 4 Exercise 3 Paragraphs & Breaks

1. Add a Paragraph between each one of the Headings.
2. Add a Paragraph before the first Heading so your fill looks similar to
this one:
46
Review Questions
1. How do browsers handle multiple spaces?
2. What is one way to start a new paragraph?
3. How many Headings are there?
4. When would you use a Break?
5. How would you insert a HR that is centered and half a page wide?
47
Summary
48
List and describe the different Heading elements.
Know when paragraphs get created.
Insert breaks were necessary.
Add a Horizontal Rule.
5
Character Formatting
In this chapter you will learn how to enhance your page with Bold, Italics,
and other character formatting options.
Objectives
1. Use the Character Formatting buttons on the toolbar.
2. Change the color and size of your text.
3. Use the Choose Color dialog box
4. Align text and elements.
5. Add special characters.
6. Use other character formatting elements.
49
Bold, Italic and other Character Formatting

Most text enhancement options can be found on the following toolbars:
Formatting Toolbar
Quick Tools Toolbar
The following elements are used primarily to add formatting to inline text:
50
The text size will be modified by a FONT element with a size

attribute. These buttons will insert the size attribute as a relative value
(i.e. # of sizes larger or smaller than default) using the + or - sign.
Normal text is size 3.
<B> Bold </B>
<I> Italic </I>
<U> Underline </U> (Use with caution, links are underlined.)
This button will use a FONT element to set the color of the text.
E.g. <FONT COLOR=#RRGGBB>this text has color</FONT>
<PRE> Preformatted </PRE> Text enclosed by PRE tags is

displayed in a mono-spaced font. Spaces and line breaks are
supported without additional elements or special characters.
<EM> Emphasis </EM> browsers usually display this as italics.
<STRONG> STRONG </STRONG> browsers display this as bold.
<TT> TELETYPE </TT> Text is displayed in a mono-spaced font

such as Courier.
<CITE> Citation </CITE> represents a document citation.
Launches Special Characters Toolbar. e.g. é

You can also use the Format Menu option to accomplish most of the same
tasks, or use the keyboard short cuts.
51
The <FONT> Element

The <FONT> Element has a number of attributes that you can control: For
Example: <FONT COLOR="#FF0000" SIZE="4" FACE="Arial">Large
RED</FONT>
FACE
Short for typeface indicates the font you want the text displayed in.
SIZE
The size attribute can be set as an absolute value from 1 to 7 or as a
relative value using the + or - sign. Normal text is size 3.
COLOR
The default is black. Color is information represented as Red, Green and
Blue (RGB) values. These values range from 0 to 255 represented in
hexadecimal format. {Clicking} on any of the color selector buttons in the
Attribute Inspector or on a toolbar, launches the Choose Color dialog box.
52
Choosing Colors
The Choose Color dialog box allows you to pick standard colors from the
Browser Safe Palette or to create and define your own custom Palettes.
Browser Safe relates to the colors supported by Macs and Windows
based PCs.
To create a custom color {Click} on the Windows icon
button. A new
Color dialog box appears that allows you to define a color.
Once you have chosen a color you like, {Click} the button Add to Custom
Colors and it will be saved for future use.
53
Alignment
Some elements have attributes for alignment (ALIGN) e.g. Headings,
Paragraphs and Horizontal Rules. Their alignment can usually be set by
selecting the element in the Tags or WYSIWYG editor and then {Clicking}
on one of the alignment buttons on the Formatting Toolbar.
LEFT
RIGHT
CENTER
Proper positioning of all of the components in a web page can be

achieved by using other elements to control alignment:
<DIV ALIGN=value></DIV> Represents a division in the document

and can contain most other element types. The alignment attribute of
the DIV element is well supported.
<CENTER></CENTER> Will center elements.
<TABLE></TABLE> Inside a TABLE, alignment can be set for each
individual cell.
Special Characters & Symbols

Special Characters and Symbols not found on the average keyboard can
be inserted from the corresponding toolbar:
Special Characters Toolbar
Symbols Toolbar
These toolbars can be turned on and off from the Toolbars option under
the View Menu. The Special Characters Toolbar can also be activated by
{Clicking} on the special character icon
on the Quick Tools toolbar.
Just {Click} on a character to insert it into your document. These

characters are recognized in HTML as they begin with an ampersand and
end with a semi-colon e.g. &value; The value will either be an entity name
or a standard ASCII character number. You can see the special
characters and their values by switching to Source View.
54
Additional Character Formatting Elements

<STRIKE> strikethrough text </STRIKE>
<BIG> places text in a big font </BIG>
<SMALL> places text in a small font <SMALL>
<SUB> places text in subscript position </SUB>
<SUP> places text in superscript style position</SUP>
Elements:
Results: (viewed in Navigator 4.6.1)
These special formatting elements are used for technical documentation

applications:
<DFN> defining instance of the enclosed term </DFN>
<CODE> used for extracts of program code </CODE>
<SAMP> used for sample output from programs, scripts, etc. </SAMP>
<KBD> used for text to be typed by the user </KBD>
<VAR> used for variables or arguments to commands </VAR>
55
Elements:
Results: (viewed in Navigator 4.6.1)
<BASEFONT>
Used to set the base font size. The size attribute is an integer value
ranging from 1 to 7. The base font applies to the normal and preformatted
text but not to headings, except where these are modified using the FONT
element with a relative font size. BASEFONT is inserted from the insert
elements dialog box.
<BLOCKQUOTE>
This element is used to enclose block quotations from other works or to
indent sections of a document. (It indents from both margins in a browser)
Use the Block Quote button
</BLOCKQUOTE>
or the Indent & Outdent buttons
<ADDRESS>
The address element specifies information such as authorship and contact
details for the current document.
You can simply add an address using the address button
</ADDRESS>
Elements:
56
Results:
HoTMetaL Tip
You can create more white space on the sides of your pages by nesting
multiple BlockQuotes.
57
1. Below the bottom Horizontal Rule, add XYZ Corporation, and center
it on the page.
2. At the end of the line you just added, insert a trade mark symbol.
3. After the information you just added, add an address element and
enter in your companys address.
4. Your document should look similar to this sample:
5. Save your file and then Preview your document in a browser.
58
1. Add a Block Quote under each H3 and describe a bit about the project.
2. Change the color of the text in the Block Quote to blue.
3. Decrease the size of the text in the block quote.
4. Your document should look similar to this:
Chapter 5 Optional Exercise

1. Add some text about the Division or Department in the Paragraph
below the H2, and try some of the other character formatting elements.
2. Center the address at the bottom of the page.
59
Review Questions
1. What are six elements for formatting characters?
2. What are two methods for centering text?
3. How would you add the copyright symbol to a page?
4. What are the steps required to change text color?
60
Summary
Change the color and size of your text.
Use the Character Formatting buttons on the toolbar.
Align text and other elements.
Add special characters and symbols.
Use additional character formatting elements.
Use the color picker
61
6
Lists
In this chapter you will learn how to create a variety of lists.
Objectives
1. Create an unordered list
2. Create an ordered list
3. Create a definition list
4. Create other lists
5. Nest Lists
62
List Elements
HTML supplies several list elements that can be accessed by {Clicking} on
the respective icons on the Formatting and Quick Tools Toolbars. With the
exception of DL, list elements are composed of one or more Ll (list item)
Error! Bookmark not defined.elements.
Bulleted / Unordered List <UL></UL>
Items in this list start with a list mark such as a bullet. Browsers will usually
change the list mark in nested lists.
You have the choice of three bullet types: Disc (default), Circle, Square.
Use the Attribute Inspector to view and set the TYPE attribute for the
<UL> element.
Note: Changing the bullet type is not supported in Internet Explorer 3.0 or
below.
63
Numbered / Ordered List <OL></OL>

Items in this type of list are numbered automatically by the browser. The
numbering will reflect nesting levels.
You have the choice of setting the TYPE Attribute to one of five numbering
styles.
TYPE
1
a
A
i
I
64
Numbering Style
Arabic numbers
Lower alpha
Upper alpha
Lower roman
Upper roman
1, 2, 3,
a, b, c,
A, B, C,
i, ii, iii,
I, II, III,
You can also specify a starting number for an ordered list. The value of
the START Attribute is always an Arabic number (1,2,3,4). Changing the
starting number may be useful in a situation where your list items are
separated by an image or by text unrelated to the list.
Definition List <DL></DL>

This kind of list is different from the others. Each item in a DL consists of
one or more Definition Terms (DT
elements), followed by one or more
Definition Descriptions (DD

elements). The tool buttons used to insert
a definition list are located on the Quick Tools Toolbar
Note: the definition is always placed indented on the next line to

emphasize the relationship.
65
Other List Elements

Two other list element formats are available:
Directory List <DIR></DIR>. This is an unordered list.

Each LI element in this kind of list should be no
longer than 24 characters.
Menu List <MENU></MENU>. This is an unordered
list. Each LI element in this list should be no longer
than one line.
Note: The exact formatting of Directory and Menu lists

will vary depending on the web browser used. Most
current browsers simply display these types of lists as
Unordered.
HoTMetaL Tip
To change from an Unordered List to an Ordered List, place your cursor
between the UL and Ll tags. {Click} on the Ordered List button
on the
Formatting toolbar. You can change it back to an Unordered List by
{Clicking} on the Unordered List button
To change between list types you can place your cursor between the
starting and ending list tag and select the appropriate list type from the
Style Element drop down on the Formatting toolbar.
66
Nesting Lists
You can nest lists by inserting a UL, OL, etc., inside a list item (LI). To
nest a list, place your cursor inside a List Item element.
{Click} on the Insert Element icon

you want to nest and press Apply.
and select the list type for the list
Tags View:
Results:
67
1. Add an Ordered List below your first Project Plan Heading.
2. Enter two or three list items.
3. Insert another Ordered List below the second item in the first list.
4. Change the numbering scheme to lower case roman numerals.
5. Add two items.
6. Add a paragraph after your list with some text.
7. Insert another ordered list after your paragraph, and start numbering
where your first list left off.
8. Your work should look something like the following:
9. Save and Preview your work. It would be a shame to loose it, and you
have to take a look at the great page you are creating.
Chapter 6 Optional Exercises

1. Create another list this time under the second Project Plan.
2. Try switching between Ordered Lists and Unordered Lists.
68
Review Questions
1. Can you nest lists?
2. When would you use an ordered list instead of an unordered list?
3. Why would you use a definition list?
4. What other lists are available?
5. How can you change the type of list you originally selected?
69
Summary
70
Create an unordered list
Create an ordered list
Create a definition list
Create other types of lists
Nest your lists
7
Anchors and URLs
In this chapter you will learn about Uniform Resource Locators, and how
to add them as Anchors or Links inside your web pages.
Objectives
1. Insert links into documents
2. Define Link Types
3. Define URL
4. Identify commonly used URL types
5. Set Link Colors
71
Link Elements
It is normal for HTML documents to contain links to other documents,
which can be located anywhere on the Web. These links are provided by
URLs (Uniform Resource Locators) , which give the location and filename
of a document, and the method used to access it.
The following elements represent links to other documents:
<A HREF=URL> </A>: Insert Link
. The HREF attribute of the
anchor element specifies a URL. If this attribute has a value, the contents
of the <A> </A> element will be highlighted when the document is
displayed in a browser window, and {Clicking} on this content will cause
the browser to attempt to open the file specified by the URL.
E.g.<A HREF=http://www.softquad.com>SoftQuads Homepage</A>. In
this example the text SoftQuads Homepage represents the contents that
would be highlighted as a link to the file named as the value of the HREF.
Link Types
There are three major types of links:
Internal Links
Are links within a document. They help in the navigation of large
documents.
Local Links
Are links to documents on the local web server. Local links can be the full
URL (Complete e.g. http://www.yourdomain.com/sales/report.htm) or
partial
(Relative to your current directory e.g. /sales/report.htm).
External Links
Links to pages on other web servers. External links are always the full
URL.
72
Creating Internal Links

Internal links are quick and easy to create using the Insert Bookmark
and Insert Link to Bookmark
buttons.
1. Select some text at a place in the document that you would like to
create a link to, then {Click} on the Insert Bookmark button
following window will appear.
. The
2. Type in a name for the bookmark. (You cant have two bookmarks in
the same document with the same name.)
3. {Click} OK when you have chosen a name.
4. Next select the text that you would like to create as a link to the
bookmark. {Click} on the Bookmark Link button
5. Select the bookmark name from the list and {Click} OK.
The code that will be generated will be similar to the following:
73
Creating Local and External Links

Local links are hyperlinks to documents on the same web server external
links are links to pages on other web servers. Both of these types of links
can be created easily:
1. Highlight the text that you would like to act as the link.
2. {Click} on the Insert menu and choose Link, or locate the Hyperlink
button
on the Standard Toolbar.
3. From the Insert Link Dialog box, locate the document to link to by
{Clicking} on the Choose File button or type the web address of the
document you want to link to.
4. The path to the selected file will appear in the File or URL field.
{Click} OK to insert the link.
Note: HoTMetaL PRO will automatically create local links using a relative
path unless the file you are working in has not been saved. In this case it
will create the link using an absolute path beginning with file:///. Links
beginning with file:/// will not work properly on a remote web server so
HoTMetaL PRO will convert that type of link to relative when you save
your file.
74
URLs - Uniform Resource Locators

A URL is a standard way of referencing a Service, a Host name, a Port,
and a Directory-path. Service:// Host name : Port / Directory-path
E.g. http://www.1stvirtual.com:80/default.htm
Not all of these components appear in each URL, as you will see when
you learn about the different types of URLs for different services. But the
preceding example is a good general guide.
HTTP HyperText Transport Protocol
This is used to link your HTML pages to other HTML pages on your site,
or to pages on other sites around the Internet.
E.g. http://www.xnu.com/default.htm
The type of service is identified as http.

The Host name is www, in the domain 1stvirtual, in the zone com
(that identifies it as a US commercial site).
default.htm is the actual web page.
FTP File Transfer Protocol

The FTP protocol is used to download files from a FTP server to the
surfers computer.
E.g. ftp://ftp.1stvirtual.com/prizes/brkbrk.wav
The type of service is identified as ftp.

The Host name is ftp.1stvirtual.com.
The subdirectory is prizes.
The file is brkbrk.wav
News News Groups

Newsgroups or discussion groups are places for people to post
messages, and read other peoples messages.
E.g. news:alt.internet.services
The type of service is identified as news, for the Usenet newsgroup

service.
The newsgroup is alt.internet.services.
This will invoke a clients newsreader program.
75
Gopher
Gopher was a predecessor of HTML and HTTP, it is rarely used today as
it is to much work to maintain.
E.g. gopher://owl.trc.purdue.edu/
The type of service is identified as gopher. ( a predecessor to the

World Wide Web )
The Host name is owl.trc.perdue.edu.
E-mail Electronic Mail

This URL will launch the surfers e-mail software and populate the To:
field with the e-mail address specified.
E.g. mailto: webmaster@1stvirtual.com
The type of service is identified as the mail client program.

The recipient of the message is webmaster@1stvirtual.com
Telnet Remote Terminal Emulation

This URL will launch the terminal emulation program called telnet on the
surfers computer.
E.g. telnet://media.mit.edu
76
The type of service is identified as the telnet client program.

The Host name is media.mit.edu.
Link Colors
The colors of the links can be set through the File menu Page
Properties option and {Clicking} on the
the Link field.
color selector button beside
77
The following is the raw HTML produced from the work above. Since the
colors are set in the <BODY> tag they apply to all links in the document.
<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#FF0000
VLINK=#004080 ALINK=FF8000>
Note: Be careful in choosing appropriate link colors for your web
documents. Most of your visitors will be used to the default link colors:
Dark Blue (Hyperlink), Purple (Visited Hyperlink) and Red (Active
Hyperlink). Also, many users set their browsers to override your chosen
link colors with their own choices.
HoTMetaL Tip
You can combine a link to another page with an internal link inside that
page. <A HREF=http://www.whatever.com/pagename.htm#location> This
will link to a specified location on that page. This is commonly used to
reference a particular area of a large document.
78
1. Below the address element, add the e-mail address:
webmaster@xyzcorp.com.
2. Select the above e-mail address and {Click} on the Link Button
3. In the dialog box File or URL key in mailto:{your e-mail address}.

4. Center the link.
5. Select the text in your H1 element, and {Click} on the Link Button again
and this time add the URL of your company.
E.g. http://www.xnu.com
79
Review Questions
1. What are the components of a URL?
2. What protocols are supported by URLs?
3. What is the difference between an internal and external link?
4. What is the difference between complete and relative URLs?
5. How do you set the link colors?
80
Summary
Insert links into documents
Define Link Types
Define URL
Identify some commonly used URL types
Set Link Colors
81
8
Images and Image Maps
In this chapter you will learn about images, how to place images in your
pages and how to use them as links and Image Maps.
Objectives
1. Distinguish between supported graphics formats and unsupported
graphics formats.
2. Determine which graphic format for the type of image.
3. Add images to your pages.
4. Use the Asset Manager to add an image.
5. Use an image as a link.
6. Create an Image Map
82
Supported Image Formats

GIF
Graphic Interchange Format uses a maximum of 256 colors, and uses
combinations of these to create colors beyond that number. The GIF
format is best for displaying images that have been designed using a
graphics program, like logos, icons, and buttons.
GIF images come in two different versions and have some extra
functionality that JPEGs do not. You can save GIF images in GIF 87 or
GIF 89a format. GIF 89a is newer and has the following features that GIF
87 and JPEG files do not:
Interlacing
If you save a GIF 89a image as interlaced, the browser will be able to
display the image as it loads, getting gradually crisper and clearer until it is
finished. Interlaced GIFs have slightly larger file sizes than non-interlaced
GIFs, so you will have to decide whether the interlacing effect is worth the
extra download time for your images.
Transparency
With GIF 89a format images you can set a single color to be transparent,
that is, it will allow the background color or image to show through it.
Transparency is most commonly used to make the rectangular
background canvas of an image invisible; this feature can be very effective
in Web page design.
Animated GIFs
GIF 89a images can also be animated using special software. Animated
GIF images are simply a number of GIF images saved into a single file
and looped. Netscape Navigator and Microsoft Internet Explorer can both
display animated GIFs, but many other browsers cannot, and may not be
able to display even the first image in the loop. Use animated GIFs with
caution.
83
JPG, JPEG
Joint Photographic Expert Group is the best format for photographs
because JPEG files contain millions of colors.
JPEG images don't give you the option of including transparency or of
interlacing images, but they do allow you to specify the degree of file
compression so that you can create a balance between image quality and
file size.
A new addition to the JPEG format is Progressive JPEG. Progressive
JPEGs boast superior compression to regular JPEGs. They also give you
a wider range of quality settings, and support interlacing.
Limited Support or Non-Supported Image Formats

Some browsers support the following image formats, however,
incorporating these file types in your HTML pages is not recommended as
not all browsers currently support them. You should first convert them to a
supported format using a graphics editor.
PNG
Portable Network Graphics is good for combinations of text and graphics
within one image. PNG permits true color images, variable transparency,
platform-independent display, and a fast 2D interlacing scheme. PNG
images are currently only supported by Internet Explorer.
BMP
MS Windows bitmap
TIFF
Tagged Image File Format
PCX
Originally developed by ZSOFT for its PC Paintbrush program, PCX is a
graphics file format for graphics programs running on PCs.
84
Inserting Images
The image element <IMG> defines a graphic image on the page. It is
typically used for inline images. Be aware that some browsers may not be
able to display images or the user has chosen to disable images. In that
case the description you include in the ALT attribute will be shown.
To insert an image:
1. {Click} on the Insert Image button
2. {Click} on the Choose button to find the image file to insert.
3. The Choose Image File dialog box allows you to see previews of
images that you select in the file list window.
4. Choose the image to insert and {Click} OK.

5. Enter values in the other attribute fields and {Click} OK.
85
Image Attributes
The attributes of any image can be changed after the image has been
inserted into your page. Launch the Attribute Inspector or if it is already
active just {Click} on the image or inside the IMG tags.
SRC Image File

This value will be a URL that describes the location of the image file.
E.g. http://www.domain.com/images/graphic.gif
ALT - Alternate Text
This is a text field that describes an image or acts as a label. It is
displayed when people turn the graphics off in their browsers, or when
they position the cursor over a graphic image (now supported in most
browsers). It is also helpful as an accessibility feature.
ALIGN - Alignment
This allows you to align the image on your page. The options include
Bottom, Middle, Top, Left, Right, TextTop, ABSMiddle, Baseline, and
ABSBottom.
86
WIDTH - Width
Is the width of the image in pixels. This will be filled in when you select the
image to place on the page.
HEIGHT - Height
Is the height of the image in pixels. This will also be filled in when you
select the image to place on the page.
BORDER - Border
Is for a border around the image, specified in pixels. By default HoTMetaL
PRO sets the value to zero so that if you use the image in an anchor it will
not automatically be drawn with a link colored border.
HSPACE
This is for Horizontal Space on both sides of the image specified in pixels.
A setting of 5 will put five pixels of whitespace on both sides of the image.
VSPACE
This is for Vertical Space on the top and bottom of the image specified in
pixels. A setting of 5 will put five pixels of whitespace above and below the
image.
87
Inserting Images Using the Asset Manager

The HoTMetaL PRO Asset Manager provides a quick way to view, select
and insert images, scripts, applets and other web components from the
program libraries. {Click} on the Asset Manager button
Asset Manager Panel.
to activate the
The Asset Manager Panel provides a Windows Explorer style of

navigation window at the top and a content view window in the bottom
pane. Once you have found an image that you like, you can simply drag it
into your document by {Clicking} on the image and dragging to the desired
location in your document. More details on the Asset Manager will be
covered in later chapters.
HoTMetaL Tip
88
Try to keep your image file sizes small.

Don't rely exclusively on images to convey your information.
Use alternate text for images.
Some background images make it difficult to read the text of the page.
Using Images as Links

Now that you have added images to your pages, you can turn them into
links by placing them inside the anchor element.
Note: Your <IMG> element must be inside a <P></P> element or some
other block element for this to work properly.
1. {Click} on your image so that it is highlighted.
2. {Click} on the Insert Link button
3. Enter the URL you wish the link to point to.

4. Leave the BORDER attribute set to zero, otherwise it will have a box
around it the same color as your hyperlinks.
HTML View:
89
Image Maps
Image maps are images, usually in gif format that have been divided into
regions; {Clicking} in a region of the image causes the web surfer to be
connected to a new URL. Image maps are a graphical form of creating
links between pages.
There are two types of image maps:
1. client-side
2. server-side
Both types of image maps involve a listing of co-ordinates that define the
mapping regions and which URLs those co-ordinates are associated with.
This is known as the map file.
Server-side Image Maps
Server-side image maps (called ISMAP) involve a separate map file that is
linked to the image by a program running on a Web server. Server-side
image maps are one of two flavors NCSA - National Center for
Supercomputer Applications or CERN - Conseil European pour la
Recherche NucLaire.
<A HREF=http://sitename/picture.map>
<IMG ISMAP SRC=Picture.gif BORDER=0>
</A>
CERN Style: picture.map file

default filename.htm
circle (123,160) 20 next.htm
NCSA Style: picture.map file

default filename.htm
circle next.htm 123,160 123,180
Supported Shapes:
Circle Center-point radius or, for NCSA center, edge point
Poly List of vertices, max. 100, that define an irregular space
Rect Upper-left, and Lower-right
Point single spot, coordinates are x,y
90
Client-side Image Maps

Client-side image maps (USEMAP) use a map file that is part of the HTML
document (in an element called MAP), and is linked to the image by the
Web browsers.
<IMG SRC=Picture.gif USEMAP=#map1>
<MAP NAME=map1>
<AREA SHAPE=RECT COORDS=9,120, 56,149
HREF=whatever.htm>
<AREA SHAPE=RECT COORDS=100,200, 156,249
HREF=wherever.htm>
</MAP>
Shapes:
RECT, or RECTANGLE: require four coordinates: X1, Y1, X2, and
Y2
CIRC, or CIRCLE: requires three coordinates centerx, centery, and
radius
POLY, or POLYGON: requires three or more pairs of coordinates
91
Creating an Image Map

An easy way to create image maps is to use the Image Mapping toolbar.
By default, this toolbar is turned off. It appears only when you insert an
image, and it becomes active when an image is selected.
Image Mapping Toolbar:
Procedure
1. Select the image. ( C:\Hmpfiles\images\btnbar.gif )
2. Select an area drawing tool; circle, rectangle, or polygon.
3. {Click} and drag the pointer to define the mapped area.
4. Enter information in the dialogue box.
92
5. {Click} OK and complete the next dialog box below.
6. {Click} OK to create the Client Side Image map code.
93
7. Additional areas can be added to the same map tag set and your
Client-Side Image Map has been created. Each AREA element holds
the attributes with the link information.
94
1. {Click} on the Asset Manager button to activate the Asset Manager
Panel.
2. Select some graphics and drag and drop them into your page.
3. Try changing the VSpace and HSpace attribute to see the affect.
4. Try adding a border.

1. Try adding a graphic image from a file location, without using the Asset
Manager.
2. Use the Insert Image button to add one of the graphics located in
C:\Hmpfiles\Images\ directory.
3. Use an image in your page and make it a link to SoftQuads web site.
95
Review Questions
1. Why should you describe the image in the ALT parameter?
2. Why do you use transparency for your graphics?
3. Why would you reduce the number of colors in a graphic image?
4. What shapes can be used as hotspots in an image map?
96
Summary
Distinguish between supported graphics formats and unsupported

graphics formats.
Determine which graphic format for the type of image.
Add images to your pages.
Use the Asset Manager to add an image to a document.
Use images as links
Create image maps
97
9
Tables
In this chapter you will learn that tables have many uses in HTML. The
most obvious is a table of data, but tables can also be used to place
graphics on a page at just the right spot or to format text and form input
boxes, or simulate columns.
Objectives
1. Insert a table.
2. Explain a tables attributes.
3. Understand the sub elements of the table.
4. Edit a table using the Tables Toolbar.
5. Edit a table using the Table Properties dialog box.
98
Tables
The <TABLE> </TABLE> element has four sub-elements; Table Row
<TR></TR>, Table Header <TH></TH>, Table Data <TD> </TD>, and
Caption <CAPTION> </CAPTION>. Tables are made up of rows and cells
in each row that represent columns. <TR></TR> tags define each row and
<TD></TD> or <TH></TH> tags define each cell.
The Table Row elements usually contain Table Header elements or Table
Data elements. The Table Header and Table Data elements can contain
several of the body elements, which allows for rich formatting of the data
in the table. A brief HTML code sample follows:
99
Inserting a Table
You can insert a table by {Clicking} on the Insert Table
button on
either the Standard or the Tables Toolbar or by choosing the Insert
Table... command in the Tables Menu. The Insert Table button and the
Insert Table... menu item will be grayed out if your cursor is not at a valid
location in the HTML Document for a table.
When you have completed making your settings in the Insert Table dialog
box you can {Click} on the Apply or the OK button. If you {Click} Apply and
then {Click} OK HoTMetaL PRO will insert two tables; one inside the other.
100
Table Attributes
BGCOLOR Background Color
Some browsers support background colors in a table. The color you select
will be expressed as a hexadecimal red-green-blue value. You can also
enter this value directly in the text box, or you can enter one of the
standard Windows color names. (these color names are currently
supported only by Microsoft Internet Explorer).
WIDTH Width
You can specify the table width as an absolute number of pixels or a
percentage of the document width. The width corresponds to the WIDTH
attribute of the TABLE element. You can set the width for table cells as
well.
BORDER Border
The lines that form the boundary of each table cell when the file is
displayed in a browser. You can choose a numerical value for the border
width, which specifies the border in pixels, or 'BORDER' (causing the
browser to draw the default border). You can choose your selection from
a drop down list or enter it manually in the text box provided. The table
border corresponds to the BORDER attribute of the TABLE element. A
setting of zero will make the border disappear. The default value is 1 pixel.
Some browsers do not draw borders around empty table cells. HoTMetaL
PRO inserts a NBSP in each cell when you create the table so that each
cell will display border and background color.
101
CELL SPACING Cell Spacing

Cell Spacing represents the space between cells and is specified in pixels.
The default value is 2 pixels.
CELL PADDING Cell Padding
Cell Padding is the space between the cell border and the cell contents
and is specified in pixels. The default value is 1 pixel.
Other Attributes
Once you have created the table, you may want to edit some of the other
attributes of the table by placing the insertion point for your cursor
anywhere within the table and making a {Right Click}. Select Attribute
Inspector from the dialogue box; select Table from the Element pull down
list and modify the attributes as desired.
ALIGN Alignment
Tables can have left, right, or center alignment. The alignment attribute of
the <TABLE> is not well supported and you will want to use <DIV> or
<CENTER> to control the position of your table in your document.
Background
Background Image, will be tiled in Internet Explorer 3.0 and above.
BorderColor
The color of the border around the table. This is supported properly by
Navigator 4.0, and Internet Explorer 3.0 and above.
BorderColorLight
Light color used to outline two sides of a cell or the table, only supported
in Internet Explorer 2.0 and above.
BorderColorDark
Dark color used to outline two sides of a cell or the table, only supported in
Internet Explorer 2.0 and above.
102
Table Caption
A Table caption allows you to specify a line of text that will appear
centered above or below the table. This can act like a title for the table.
{Click} anywhere inside the table.

Choose Insert Caption... from the Table Menu.
The caption element has one attribute ALIGN that can be either TOP
(above the table) or BOTTOM (below the table). You can use standard
character formatting codes inside the CAPTION element.
HoTMetaL Tip
The following method of centering a table is supported by many browsers.
First you insert the <CENTER> </CENTER> element, then drag the table
inside the <CENTER> </CENTER> element.
103
Table Header
Table Data cells are represented by the TD element. Cells can be
changed to TH (Table Header) elements which results in the contents of
the Table Header cells appearing centered and in bold text.
Rows, columns or individual cells can be changed to Table Header cells or
to Table Data cells by {Right Clicking} in the cell, row or column that you
want to change. You can select Change to Header Cell from the pop up
dialogue box if you want to affect only the cell you {Right Clicked} in or you
can select Table Properties to affect columns or rows.
If you simply wish to bold the text, we suggest that you insert a B or
STRONG element inside the table cell(s) instead of changing the table cell
element.
104
Editing the Table

Once you have inserted a table, you can:
Add or delete a single row or column.
Merge rows, columns or cells together.
Using the commands available in the Table Menu or from the Tables
Toolbar does this.
Use the Tables Toolbar to create and edit tables:

Insert a table, Edit table properties
Edit rows and columns:
Insert row above, Insert row below, Delete row, Insert column left, Insert
column right, Delete column
Move rows and columns:
Move row up, Move row down, Move column left, Move column right
Merge cells:
Merge cell right, Merge cell left, Merge cell up, Merge cell down
Split cells:
Split cell into rows, Split cell into columns
Note: The [ENTER] key will place a <BR>inside a cell instead of a
paragraph.
The Table Advanced Toolbar can be used to contract cells and combine
contents if you have merged cells in your table. The Table Advanced
Toolbar will be inactive unless your cursor is placed within a cell that has
been merged. Contracting cells combines the contents of the affected
cells.
Table Advanced Toolbar
105
Table Properties
You can edit the properties for the table or selected cells within the table
by using the Table Properties. {Right Click} inside a table and choose
Table Properties from the pop up menu or {Click} on the Table Properties
button on the Table Toolbar
You can change all the regular properties of your table with this box. As
with the Attribute Inspector you can keep this menu active when you are
editing the table and changes will be reflected immediately as you apply
them.
You can choose to apply changes to the whole table, rows, columns,
single cells or contiguous, rectangular groups of cells. If you select a
group of cells within the table the Table Properties dialog box will display a
tab titled Selection.
106
Table Properties Dialog Box
107
Row Properties
You can change the properties of a table one row at a time if you wish.
108
Column Properties
Similarly you can change an entire column at a time.
109
Cell Properties
Similarly you can change one table cell at a time.
110
Selected Cell Group Properties

You can change a group table cells as long as the cells are within a
contiguous, rectangular area.
111
1. Insert a table above the bottom Horizontal Rule.
2. Change its background color to yellow.
3. Increase its border to 5 pixels.
4. Change the Top Row to a table Heading, and add some headings.
5. Add some text/data to your table.
6. Center the table using the Center element.
7. Center the address using the Center element.
8. Save and Preview.
112
Review Questions
1. When you insert a table what are the initial properties that you can
specify through the dialog box?
2. How would you set other attributes such as alignment?
3. What is Cell Spacing?
4. What is Cell Padding?
5. How do you change a row into Table Header cells?
113
Summary
114
Insert a table.
Explain a tables attributes.
Understand the sub elements of the Table element.
Edit a table using the Tables Toolbar.
Edit a table using Table Properties.
10
Converting Legacy Documents &
Using Templates
In this chapter you will learn how to convert documents from another
format into HTML pages.
Supplied with HoTMetaL PRO are a number of templates to help speed up
your content creation process. You will learn how to use those templates
in this chapter.
Objectives
1. Convert a legacy document into an HTML page.
2. Use a template to speed up content creation.
115
Converting Legacy documents

Legacy documents refer to documents that exist in non-HTML format.
Such formats include WordPerfect, Microsoft Word, and Text, among
others. The HoTMetaL PRO Editor is able to open these types of
documents and convert them into HTML pages.
Note: If you selected `Compact Install' when you installed HoTMetaL
PRO, the conversion filters were not installed. To add the filters, run the
HoTMetaL PRO installation again: open `setup.exe' from the `hmpro6'
folder on the CD, choose `Custom Install', and add filters for the formats
you wish to convert.
Existing files prepared in common word processing, spreadsheet, or text
editing applications are easily converted to HTML, using the HoTMetaL
PRO Editor. HoTMetaL PRO uses built-in filters to automatically convert
each file to HTML as it opens them. Each block of text is converted to the
appropriate element: paragraphs are converted to P elements, headings
to H1-H6, numbered lists to OL, bulleted lists to UL, tables and
spreadsheet information to HTML tables, etc.
To convert a file
116
Use the Open command to bring up the Open dialog box

a. From the File menu
b. Keyboard shortcut [Ctrl] + [O]
c. {Click} on the File Open
button
Choose the appropriate file format from the File Type drop-down list or
choose all files.
Select the document to be converted and {Click} on Open. The
document is automatically converted as it opens.
If the conversion process creates image files to represent images in
the legacy document these files will be saved in the GIFS subdirectory
within the SoftQuad folder. The image files will be given names that
match the original file name with a number appended in sequence from
the top of the document to the end. E.g. filename01.gif, filename02.gif,
filename03.gif, etc.
You would not want to publish the file with Image elements that point to
a location in the SoftQuad folder as the SRC of the IMG tags. You
would need to fix these IMG tags by pointing the SRC attribute at a
folder that you will be publishing and copying the images into that
folder.
By default, HoTMetaL PRO will convert documents from the following

formats:
plain text (text that is not marked up in HTML)

AMI Pro (1.1, 2.0, 3.0)
MS Word for PC (2.0, 3.0, 4.0, 5.0, 5.5)
MS Word for Windows (2.0, 6.0, 7.0., Word 97)
RTF
WordPerfect for DOS/Windows (4.2, 5.0, 5.1, 5.2, 6.0, 6.1, 7.0)
Lotus 1-2-3 (2.0, 3.0, 4.0, 5.0)
Quattro PRO for Windows (6.0, 7.0)
MS Works for Windows (3.0, 4.0)
Additional conversion formats are selected through Custom Installation.

If you wish to install some or all of the additional filters proceed as follows:
Start the installation program again and choose Custom Install on the
Setup Type installation panel.
On the Select Components panel, choose Other Formats from the
components list.
Note: If you do not want to completely reinstall HoTMetaL PRO; deselect
all of the other product components.
The following additional formats are available from the custom installation:
Cliq-Word
DECdx (WPS-PLUS)
HP Word PC
IBM DCA-RFT
IBM DCF Script
IBM DCA-FFT
IBM Displaywrite
MASS-11
MS Word for Macintosh
MultiMate
Navy DIF
NBI Net Archive

ODA FOD26
Office Writer
Quadratron Q-ONE
Uniplex II Plus
Wang OIS/VS Com
WordMARC
WordPerfect for Mac
WordPerfect 4.2
WordStar
Wang WITA
HoTMetaL Tip
If you want to convert a file that is not in one of the supported formats you
may be able to open it in another application and save it in a format that is
supported.
117
Using Templates
You can use a template to help you create a new document by choosing
New... from the File menu or by keyboard shortcut [Ctrl] + [T]. This brings
up a dialog box with a list of templates. Select the description closest to
the type of page you want to create and {Click} OK. Edit the page to insert
your own content.
To open a template to create a new page:
Choose New... from the File Menu and select Page From Template from
the fly-out menu.
The New file template dialog box offers templates from several different
groups.
118
The following sample is the Simple Columns Layout from the Layouts
Group of templates. Text on the page is descriptive of what types of
information you should input in particular places.
119
1. In HoTMetaL PRO select File Menu Open
2. Choose the file sample.doc in the folder C:\Hmpfiles\Legacy\
3. Save the file and preview in a browser.
1. Create a new document using a template.
120
Review Questions
1. Where does HoTMetaL PRO save images that it creates as part of a
file conversion?
2. What could you try if you want to convert a file that is not in a
supported format?
3. How could you quickly create a page using a simple 2 column layout?
121
Summary
122
Convert a legacy document into an HTML page.
Use a template to speed up your content creation.
11
Frames
Frames are a relatively new addition to the HTML standard, having been
included in release 3.0 and therefore not all browsers support this group of
elements. Popular browsers, such as Netscape and Internet Explorer
releases 3.0 and higher do provide full frames support.
Objectives
1. Explain Frames Page Architecture
2. Create a Frames based page.
3. Work with the Frameset, Frame, and Noframes elements.
4. Use the attributes of the Frames elements to control the display.
5. Set Targets appropriately.
Prerequisites
Internet Explorer 3.0 or greater
Navigator 2.0 or greater
Frames are Platform Independent
123
Frames
A frames page is actually made up of multiple HTML pages. There is one
HTML document that describes how to break up the single browser
windowpane into multiple windowpanes. Each windowpane is filled with an
HTML document.
For example to make a framed page with a windowpane on the left and
one on the right requires three HTML pages. Doc1.html and Doc2.html are
the pages that contain content. Frames.html is the page that describes the
division of the single browser window into two windowpanes.
In this chapter we will describe the tags that are used to create the
Frames.html page that will break up the browser window into multiple
windowpanes.
124
Frame Page Architecture

A <FRAMESET> element is placed in the HTML document before the
<BODY> element. The <FRAMESET> describes the amount of screen
real estate given to each windowpane by dividing the screen into ROWS
or COLS. The <FRAMESET> will then contain <FRAME> elements, one
per division of the browser window.
Older browsers are written to ignore tags/elements that they dont

understand so they will ignore the <FRAMESET>, <FRAME>, and
<NOFRAMES> tags. As a result older browsers will be able to display the
contents placed between the <BODY></BODY> tags. Many authors use a
message indicating that the site is built using frames and that the surfer
should upgrade their browser. You can actually put content in the
<BODY> tags such as navigation to a non-frames version of your site.
The diagram below is a graphical view of the document described above.
FRAMESET COLS=23%, 77%
FRAME
FRAME
Name =
left_pane
SRC = doc1.htm
Name = right_pane
SRC = doc2.htm
125
Creating a Frames Page

To turn a regular page into the page that describes how the browsers
window will be broken up into windowpanes, you first have to convert your
document to a frames document, using the Tools Menu Convert to
Frames option (it is best to start with a new document). Another way to
create a frames page is to use the File Menu New Frames Page,
this will give you the option of choosing some predefined divisions.
126
<FRAMESET>
ROWS
Determines the size and number of rectangular rows within a
<FRAMESET>. They are set from top of the display area to the bottom.
Possible values are:
absolute pixel units, i.e. 360,120
a percentage of screen height, e.g. 75%,25%
proportional values using the asterisk (*). This is often combined with a
value in pixels e.g. 360,*
The latter enables the developer to allocate all unassigned vertical space
proportionately. Values are given within quotation marks and separated by
commas in HTML source. In the Attribute Inspector the quotation marks
are not required.
127
COLS
Determines the size and number of rectangular columns within a
<FRAMESET>. They are set from left to right of the display area.
Possible values are:
absolute pixel units, i.e. 480.160
a percentage of screen height, i.e. 75%,25%
proportional values using the asterisk (*). This is often combined with a
value in pixels e.g. 480,*
The latter enables the developer to allocate all unassigned vertical space
proportionately. Values are given within quotation marks and separated by
commas in HTML source. In the Attribute Inspector the quotation marks
are not required.
FRAMEBORDER
Possible values 0, 1, YES, NO. A setting of zero will create a borderless
frame.
FRAMESPACING
This attribute is specified in pixels. If you go to borderless frames you will
need to set this value to zero as well, or you will have a gap between your
frames where the border used to be.
BORDER
Possible values 0, 1. A setting of zero will create a borderless frame.
BORDERCOLOR
This attribute is allows you choose a color for your border. This attribute is
rarely used.
128
<FRAME>
This tag defines a single frame within a frameset. This tag has the
following attributes:
SRC
Required, as it provides the URL for the page that will be displayed in the
frame.
NAME
Required for frames that will allow targeting by other HTML documents. In
order for a link to display the retrieved file in a frame other than the frame
in which the link was {Clicked} in, the targeted frame must be referenced
by its name.
Works in conjunction with the TARGET attribute of the <A>, <AREA>,
<BASE>, and <FORM> tags. All names must begin with an alphanumeric
value and not the underscore character. The exception is the special
target names illustrated later in this chapter.
129
MARGINWIDTH
Optional attribute stated in pixels. Determines horizontal space between
the <FRAME> contents and the frame's borders.
MARGINHEIGHT
Optional attribute stated in pixels. Determines vertical space between the
<FRAME> contents and the frame's borders.
SCROLLING
Displays a scroll bar(s) in the frame. Possible values are:
yes always display scroll bar(s)
no never display scroll bar(s)
auto browser will decide based on frame contents
The default value for this attribute is auto.
NORESIZE
Optional - prevents viewers from resizing the frame. By default the user
can stretch or shrink the frame's display by selecting the frame's border
and moving it up, down, left, or right.
130
<NOFRAMES>
Frame-capable browsers ignore all HTML within this tag. Browsers that
dont support frames will ignore all frame elements, and interpret the
<NOFRAMES> content, beginning with the <BODY> element.
This element does not have any attributes.
131
Targets
When you are creating links for use in a frames environment you will need
to specify an additional attribute called TARGET. The TARGET attribute
uses the NAME attribute of the FRAME element.
For example if we were to place a link in doc1.htm that linked to doc3.htm
and we wanted doc3.htm to be displayed in the right windowpane; the
HTML code would appear in doc1.htm as follows:
<A HREF=doc3.htm TARGET=right_pane>Link to Document 3</A>
Warning. If you fail to specify a TARGET frame name the linked
document will be displayed in the current frame.
Warning. Frame NAME and TARGET values are case sensitive and must
match exactly to work. If they dont match it will create a new browser
window.
The following elements have TARGET attributes:
132
<A>
sample - <A HREF="file.htm" TARGET="Frame-windowname">
<AREA>
sample - <AREA SHAPE="RECT" COORDS="5,6,2,4"

HREF="file.htm" TARGET="Frame-window-name">
<BASE>
sample - <BASE TARGET="Frame-window-name">
<FORM>
sample - <FORM ACTION="cgi-bin/script" TARGET="Framewindow-name">

Special Targets
There are several special target names that cannot be assigned by the
NAME attribute of the FRAME tag. Each of these reserved names serves
a special function when used with the TARGET attribute. These special
names and functions are:
TARGET="_top"
This loads the linked document into the full browser window with the URL
specified by the HREF attribute. This is particularly useful for moving
between a frames environment and a non-frames environment.
TARGET="_blank"
Opens a new browser window and loads the document specified in the
HREF attribute into that new window. The window is not named.
TARGET="_self"
Loads the document in the same window where the anchor was {Clicked}.
This is the default setting for linking elements. This attribute would
generally be used to override the TARGET attribute of the <BASE> tag.
TARGET="_parent
The _parent frame is a prior frameset that the current frameset was
spawned from. If there isnt one then it is the browser window.
133
Frame Editor
You can create and edit framesets graphically in HoTMetaL PRO 6.0
using the WYSIWYG Frame editor. Once a document is converted to
frames, the frame view button will become active
. Using the frame
editor you can create the frames and set the frames attributes.
Your document window will be split based on the FRAMESET tags in the
page. When you {Right-Click} you can edit the properties of the frame.
You can also use the Frames Toolbar or the Frameset Menu Option.
134
In this exercise you will work with a frames based page.
Procedure
In your browser open the file called frames.htm, it is located in the folder
c:\HMPfiles\Frames\
1. Click on the links on in the frame on the left, notice how the content on
the right changes.
In this exercise you will add a link to the page in the frame on the left.
Procedure
In HoTMetaL PRO open the file called Links.htm. It is located in the
folder c:\HMPfiles\Frames\
1. Select the word Success and {Click} on Insert Link Button.

2. In the File or URL Box enter success.htm.
3. In the Target Frame Box enter Main.
4. Save the file, and reload the frames.htm document in your browser.
{Click} on the word Success and observe what happens.
135
Chapter 11 - Exercise 3 - Creating a Frames Based Page

HoTMetaL PRO has a frame editor that will let you create and edit frame
documents in a graphical way. In this exercise, you will create a new
document, convert it to a frames document and use the frames editor.
Procedure
1. Starting with a new document, select Convert to Frames from the
Tools menu.
This inserts a frameset element and surrounds the body tag with a
NOFRAMES tag.
2. Select Frame View
136
Chapter 11 - Exercise 4 Creating Three Panels

In this exercise, you will create the three panel frames page design
mentioned above and associate a specific file with each of these frames.
Those are the files that will be displayed in each panel when the document
is viewed in a browser.
Procedure
1. Start with your cursor in the center of the main area and move your
cursor to the right side of the frame area until your cursor turns to a two
headed arrow.
2. {Click} and hold the left mouse button and drag the right sidebar in until
the right side frame is the desired size (about 20% of the area).
Release the mouse button
3. Move your cursor to the top of the area and drag the top bar down until
an area of about 15% is outlined.
At this point, all three frame areas are Re-sizable and have scroll bars.
By {Clicking} in each frame, you can turn re-sizing off using the re-size
checkbox. Similarly, there are three options for scroll bars; Scroll bars,
No Scroll bars and Auto Scroll bars (scroll bars are added to the frame
only if the file being displayed in that frame is bigger than the area
available). Now, each area must be associated with a file that will be
displayed in the frame.
4. {Right-Click} in the top most frame and select Frame Properties. {Click}
BROWSE to navigate to the c:\HMPfiles\Frames directory and select
banner.htm {Double Click} to open and {Click} OK.
5. Select the leftmost frame and BROWSE for the file
c:\HMPfiles\Frames\Main.htm {Double Click} to open
6. With this frame selected (the one associated with Main.htm) enter
"Main" (Targets are case sensitive, no quotation marks) in the NAME
field.
7. The remaining frame is now associated with the file
c:\HMPfiles\frames\Links.htm {Double Click} to open.
8. {Click} on the OK to exit the Frames Editor.
9. Save the file as index.htm and preview your document to make certain
that it performs as expected.
137
Review Questions
1. What is the TARGET attribute used for?
2. What are two attributes of the FRAMESET element?
3. What is the NOFRAMES element used for?
4. What does the SRC attribute of the FRAME element specify?
138
Summary
Explain Frames page architecture
Create a Frames based page.
Work with the Frameset, Frame, and Noframes elements.
Use the attributes of the Frames elements to control the display.
Set Targets appropriately.
139
12
Forms
Forms add the ability to web pages to not only provide the person viewing
the document with dynamic information but also to obtain information from
the person viewing it, and process that information.
Objectives
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI.
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
6. Discuss Internet application development architectures.
Prerequisites
140
Forms work in all browsers
Forms are Platform Independent
Forms
A form is a set of data-entry fields on a page that are processed on a
server. The data is sent to the server when a user submits the form by
{Clicking} on a button or an image. Fields are the building blocks of forms.
To work with forms you may want to use the Forms Toolbar:
{Click} on the Insert Form

button. It will insert the <FORM> </FORM>
tags into your page. The rest of the form elements must be inserted in
between the form tags. For example:
This is an example of a partial order form.
141
The <FORM> Element

The Form element contains properties that are invisible to the user, but
are essential in specifying how the data will be processed, transported and
encoded.
ACTION
Is the URL of the CGI (Common Gateway Interface) program that is going
to accept the data from the form, process it, and send a response back to
the browser.
METHOD
GET (default) or POST specifies which HTTP method will be used to send
the forms contents to the web server. The CGI application should be
written to accept the data from either method.
ENCTYPE
Determines the mechanism used to encode the forms contents (leave
default.)
NAME
Name given to the form. Used by VB script or JavaScript.
TARGET
Is the target frame where the response page will be displayed to the user.
The rest of the form elements are used to create the form displayed in the
browser and collect the data to be sent to the application.
HoTMetaL Tip
A good way to format a form and its sub elements is to use a table. With a
table you have more control over the layout of your page. The table can
be created inside the <FORM></FORM> tags.
142
Form Elements
Form elements have properties: Text boxes, Password boxes,
Checkboxes, Option (Radio) buttons, Submit, Reset, File, Hidden and
Image. The properties are specified in the TYPE Attribute of the HTML
element <INPUT>.
<INPUT> Elements Properties
TYPE = Type of INPUT entry field
NAME = Variable name passed to CGI
application
VALUE = The data associated with the variable
name to be passed to the CGI
application
CHECKED = Button/box checked by default
SIZE = Number of characters in text field
MAXLENGTH = Maximum number of characters
accepted
Text boxes
To create a textbox, Click on the Insert Textbox button
{Double-Clicking} on graphical form elements such as the textbox will

bring up a Properties Dialogue box like the one illustrated below:
Textboxes use the following attributes:

TYPE: text
SIZE: determines the size of the textbox in characters.
MAXSIZE: determines the maximum number of characters that the field
will accept.
NAME: is the name of the variable to be sent to the CGI application.
VALUE: will display its contents as the default value.
143
Password
To create a Password box, {Click} on the Insert Password button
.
Text typed in a password box is starred out in the browser display so that
others will not be able to see your password as you type it in.
Password boxes use the following attributes:

TYPE: password
SIZE: determines the size of the textbox in characters.
MAXSIZE: determines the maximum size of the password in characters.
VALUE: is usually blank.
Hidden
This used to send data to the CGI application that you dont want the web
surfer to see, change or have to enter but is necessary for the application
to process the form correctly.
To insert a hidden element {Click} on the Insert Hidden Input button
Hidden inputs have the following attributes:

TYPE: hidden
VALUE: is usually set to a value expected by the CGI application.
144
Check Box
Check boxes allow the users to select more than one option.
To insert a check box {Click} on
Checkboxes have the following attributes:

TYPE: checkbox
CHECKED: is blank or CHECKED as the initial status
VALUE: is usually set to a value.
Option Button
Option buttons allow users to select only one option.
To insert an option button {Click} on
Option buttons have the following attributes:

TYPE: radio
CHECKED: is blank or CHECKED as the initial status.
VALUE: usually has a set value.
145
File Upload
You can use File Upload to allow surfers to upload files to your web
server.
To insert a file upload option {Click} on
File Upload has the following attributes:

SIZE: is the size of the text box in characters.
MAXSIZE: is the maximum size of the input in the textbox in characters.
ENCTYPE: is a list of (MIME) types that the field can be used to upload.
This type of input is a valid HTML 3.2 construct; however, it is not widely
used. You will also have to change the ENCTYPE attribute of the
<FORM> element to multipart/form-data
Push Button
This would be used with either JAVA script or VB script to cause an action
to take place.
To add a push button {Click} on
Push Button has the following attributes:

TYPE: Button
NAME: is the name of the button to be used in scripting.
VALUE: determines the text label on the button.
Note: You will see an application of a Push Button in some of the
following chapters.
146
Submit
Every set of Form tags requires a Submit button. This is the element that
causes the browser to send the names and values of the other elements
to the CGI Application.
To add a submit button {Click} on
Submit has the following attributes:

TYPE: submit
NAME: value used by the CGI script for processing
VALUE: determines the text label on the button, usually Submit Query.
Image Submit Button
This will substitute an image for the standard submit button.
To add an image button {Click} on
.
Image submit button has the following attributes:
TYPE: Image
NAME: is the name of the button to be used in scripting.
SRC: URL of the Image file.
Reset
It is a good idea to include one of these for each form that users are
entering data. It allows the surfer to clear all the input in the form.
To add a reset button {Click} on
Reset buttons have the following attributes:

TYPE: reset
VALUE: determines the text label on the button, usually Reset.
147
Other Elements used in Forms

<TEXTAREA> </TEXTAREA>
This element allows for free form text entry.
To insert a TEXTAREA {Click} on
TEXTAREA has the following attributes:

ROWS: the number of rows to the textbox.
COLS: the number of columns to the textbox.
WRAP: defaults to OFF. You should set wrap to virtual or physical so
that the text wraps in the Netscape browser display as the surfer types.
148
<SELECT> </SELECT>
The two following examples are SELECT elements, where the attributes
are set differently.
The Select elements attributes are:
SIZE: This sets the number of visible choices.
MULTIPLE: The presence of this attribute signifies that the user can make
multiple selections. By default only one selection is allowed.
Select elements are presented in the browser in two different formats.
They are displayed as a dropdown list or as a list box.
Drop Down List
To insert a drop down list {Click} on

SIZE: 1
List Box
To insert a list box {Click} on

SIZE: is greater than one.
The list items are added to the <SELECT> element by inserting
<OPTION> </OPTION> elements.
149
<OPTION></OPTION>
To add OPTION sub elements (list items to the list ) to the <SELECT>
element in HoTMetaL PRO, use the Form Menu List Properties option,
or {Double Click} on the list object.
The Option Elements attributes are:

SELECTED: When this attribute is present, the option is selected when
the document is initially loaded. It is an error for more than one option to
be selected.
VALUE: Specifies the value the variable named in the select element.
Generates the following HTML:
150
Common Gateway Interface (CGI)

When the user has finished filling in the form and presses Submit the
data is sent to the application on the server specified in the action attribute
of the form element.
The application is commonly referred to as a CGI application/program. It
resides and runs on the web server. It is typically but not always stored in
a directory called cgi-bin.
The application can be written in any language; however, it must be one
supported by your web servers operating system and web server
software. A very popular language for creating CGI applications is PERL
(Practical Extraction Report Language).
PERL is an interpreted language with rich text manipulation
characteristics. Because it is interpreted its performance compared to a
compiled CGI application is slower, thus negatively affecting server
performance. It has been ported to most popular operating systems and is
currently available for most versions of UNIX, Windows NT, and Windows
95. The actual application is commonly referred to as a script.
CGI Scripts
CGI Scripts process the form's data, and send a response back to the
user.
They can be written to calculate numbers as in a sales order. They can
format data and put it into a database such as a mailing list or guest book.
Depending on the situation, a CGI Script can be written to do almost
anything.
151
Internet Application Development Architectures

1. Simple CGI Program
1
2
3
Browser
Web Server
Client
Server
1. The client fills out an HTML document containing the <FORM> element and presses
the submit button. This sends the data the user entered to the web server.
2. The web server receives the data and passes it to the program specified in the
ACTION attribute of the <FORM> element. This program is called a CGI (Common
Gateway Interface) program. It can be written in a number of languages; VBScript,
JavaScript, PERL, C++, etc. It can perform a number of different functions.
3. The CGI program creates a new HTML document on the fly and sends it to the client.
152
Browser
Web Server
CGI Program
Netscape Navigator
Netscape Enterprise Server
Microsoft Internet Explorer
Microsoft Internet
Information Server
NSAPI -C++
PERL
Server side JavaScript
ISAPI -C++
PERL
Active Server Pages (ASP)
JScript or VBScript
2. Three-Tier Web Application Development
4
Browser
3
Web Server
Client
Database Server
Server
Gateway Interface) program. It can be written in a number of languages; VBScript,
JavaScript, PERL, C++, etc.
The program in this case creates a command and issues it to the database server.
3. The Database Server receives the command and issues it against the database.
The data returned from the command is then sent back to the CGI application
running on the web server.
4. The CGI program creates a new HTML document on the fly with the data returned
from the database server and sends it to the client.
Browser
Web Server
Netscape Navigator
Netscape
Enterprise Server
Microsoft Internet
Explorer
Microsoft Internet
Information Server
CGI
Program
NSAPI -C++
PERL
Server side
JavaScript
-
ISAPI -C++
PERL
Active Server Pages
(ASP)
JScript or VBScript
Database
Server
- Oracle
- Informix
- Sybase
- Microsoft SQL
- Other ODBC
compliant
153
3. Four-Tier Web Application Development
3
4
3
4
Browser
Web Server
Client
Transaction Server
Database Server
Server
Gateway Interface) program.
In this case the program invokes a transaction on the transaction server.
3. The Database Server receives a command from the transaction server and
issues it against the database.
4. The data returned from the command is then sent back to the transaction, this
cycle will continue until the transaction fails or completes.
5. When the transaction completes successfully or unsuccessfully it passes the
result to the web server.
6. The CGI program running on the web server then creates a new HTML document on
the fly with the data returned from the transaction server and sends it to the client.
Transaction Server Choices:
- Microsoft Transaction Server
- Netscape Application Server
- Oracle Application Server
154
Chapter 12 - Exercise 1 - Creating an Order Form

In this exercise, you will create a partial order form like:
155
Procedure
In steps 1 through 5 you will add the form element, and put in a hidden
field.
1. In the HoTMetaL PRO Editor, open
a new file.
2. Place the cursor to the left of the </BODY> tag.

3. Press the Insert form
icon on the FORMS toolbar. This will place
an empty form element into your HTML document.
4. Place the cursor to the right of the
Insert Hidden Input
element, and {Click} on the
button.
5. Place your cursor between the two parts of the input tag, and double
Click.
Fill in Name: with SecretPassword and Value with OpenSesame.
156
In steps 6 through 9 you will add a select element, and add the option
elements that make up the drop down list of Greetings.
6. Type "Greeting:" after the end of the Input tag.
7. Put a space after the colon and {Click} on the Insert Dropdown List
button on the form toolbar.
8. {Double Click} on the Dropdown list to edit the attributes.
Remove/Edit
Name: Greeting
List Item: Mr.
List Item: Mrs.
List Item: Ms.
List Item: Dr.
{Click} OK
Item1
Value: Mr. {Click} Add>>
Value: Mrs. {Click} Add>>
Value: Ms. {Click} Add>>
Value: Dr. {Click} Add>>
9. Insert a Break.
157
In steps 10 through 13 you will add a Text Box, for the user to enter their
First Name.
10. Type in First Name:

11. {Click} on the Insert Text Box icon.
12. {Double-Click} on the Text Box to bring up its properties.
Name: FirstName
Size: 20
Max. Length: 25
{Click} OK
13. Insert a Break.
158
Last Name.
14. Type in Last Name:

Name: LastName
Size: 30
Max. Length: 35
{Click} OK
17. Insert a Break.
159
e-mail address.
18. Type in E-mail Addr:

Name: Email
Size: 30
Max. Length: 50
{Click} OK
21. Insert a Break.
22. Insert a Break.
160
In steps 23 through 34 you will add Option Buttons, for the user to select a
preferred method of follow up.
23. Type in What type of response would you prefer?

24. {Click} on the Insert Option Button icon.
25. {Double Click} on the Option Button to bring up its properties.
Name: Response
Value: Phone
Checked?: Checked
{Click} OK
26. Type Phone
Name: Response
Value: Fax
Checked?: Not Checked
{Click} OK
161
29. Type Fax

Name: Response
Value: Email
Checked?: Not Checked
{Click} OK
32. Type E-mail
33. Insert a Break.
34. Insert a Break.
162
In steps 35 through 49 you will add Check Boxes, for the user to select the
options they would like to purchase.
35. Type I would like the following options:

36. Insert a Break.
37. Type Leather interior
38. {Click} on the Insert Check Box icon.
39. {Double Click} and bring up the Check Box Properties.
Name: Leather
{Click} OK
40. Insert a Break.
41. Type CD Player
163
Name: CD
{Click} OK
44. Insert a Break.
45. Type Sunroof
Name: Sunroof
{Click} OK
48. Insert a Break.
49. Insert a Break.
164
In steps 50 through 54 you will add a Text Area, for the user to make
comments about their purchase.
50. Type Comments:

51. Insert a Break.
52. {Click} on the Insert Text Area icon.
53. {Double Click} and bring up the Text Area Properties.
Name: Comments
Width: 30
Rows: 4
Wrap: virtual
{Click} OK
54. Insert a Break.
165
In steps 55 through 56 you add the Submit Button.
55. {Click} on the Insert Submit Button icon.

56. {Double Click} and bring up the Submit Button Properties.
Value: Submit Request

{Click} OK
166
In steps 57 through 62 you will specify the Action for the <FORM>, and
test it.
57. Now set up where the form will go.

58. Place your cursor to the right of the
59. {Right Click} and select Attribute Inspector.

60. For testing purposes, you may use the "Form Test" CGI Script located
on XtraNet University Web Server. In the ACTION Attribute type:
http://www.xnu.com/formtest.asp and close the Attribute Inspector.
61. Save
the file.
167
62. Preview your document in the browser by selecting Preview in

Browser from the File menu, and try filling out the order form.
Results:
Note: When using forms on your Intranet, a CGI script is required to

process the information submitted.
168
Review Questions
1. When would you use Check boxes over Option/Radio Buttons?
2. Do you need a submit button?
3. Where does the data entered in the form go?
169
Summary
170
Create a FORM.
Add elements to a FORM.
Define CGI.
Describe the purpose of a CGI Application.
Specify an action for the FORM.
Discuss Internet application development architectures
13
Special Elements
In this chapter you will learn how to create animated pages using a Meta
element and how to use the Meta element to help index your website on
the Internet. You will also learn how to use some additional elements that
allow you to add background sound, scrolling text, and blinking text.
Objectives
1. Create animated pages using the Meta element.
2. Use the Meta element to add information relevant to Internet search
engines and people viewing your source code.
3. Add sound to HTML pages.
4. Add a Marquee.
5. Add Blinking text.
Prerequisites
The requirements are described with each element.
171
Uses of the Meta Element

Client Pull & Page Animation
Client pull describes a scenario where the HTML page has a META
element inside the HEAD element of the document, which instructs the
browser to REFRESH the view of that page. Other attributes of the refresh
instruction specify the time interval and the URL to be used. In this way, a
series of pages can be presented without the user requesting the new
pages to be loaded.
<META HTTP-EQUIV=Refresh CONTENT=1;URL=../dir/file.htm>
Description
You can use the Meta element to embed information in the Head of your
page that the search engines will use to display a description of your site
<META NAME=description CONTENT=This is my companys web site.
The site contains information on our products and services.>
Keywords
You can use the Meta element to embed information in the Head of your
page that the search engines will use for keywords when people are
searching for your site.
<META NAME=keywords CONTENT=product name, service name,
company name, country, province/state, industry, etc.>
172
Author
You can embed the authors name in a Meta element
<META NAME=author CONTENT=Your Name>
Company
Similarly you can embed the company name.
<META NAME=company CONTENT=Company Name>
Copyright
<META NAME=copyright CONTENT=Copyright 1997 Your Name or
Company name. All rights reserved.>
173
Adding Sound to an HTML Page

When sound files are included in web pages the browser must first
download the audio file and then start the player software; this can seem
to take an extremely long time over some connections. Depending on the
browser that the client is using either the Embed element or the BGSound
element will be supported.
Embed
The <EMBED> element is used to place audio in a web page. It is
supported by Netscape Navigator, and some ActiveX extensions to
Internet Explorer. The Embed element has the following attributes:
SRC: defines the URL of the sound file.
CONTROLS: You have your choice of several controls including console, small console,
play button, etc.
AUTOSTART: when set to true the sound will start once the sound file is downloaded.
HIDDEN: when set to true it will hide the controls, default is false.
LOOP: defines how many times the sound file will play.
VOLUME: sets the default volume when playing first starts.
HEIGHT: in pixels depends on choice of controls.
WIDTH: in pixels depends on choice of controls.
The following sound formats are supported: .WAV or .AU audio files, or
.MID midi files.
BGSound
The <BGSOUND> element is used to place background audio in a page, it
is supported by Internet Explorer. BGSound has the following the following
attributes:
SRC: defines the URL of the sound file.
LOOP: defines how many times the sound file will play.
DELAY: defines the delay between loops.
TITLE: the text that describes the sound.
The following sound formats are supported: .WAV or .AU audio files, or
.MID midi files.
174
Marquee
The <MARQUEE></MARQUEE> element defines text that is displayed in
an animated region of the browser.
WIDTH: of the marquee in pixels.
HEIGHT: of the marquee in pixels.
LOOP: defines how many times the text will travel through the space.
BGCOLOR: defines the background color of the marquee.
BEHAVIOR: defines how the text should move in the marquee.
SCROLLDELAY: sets the number of milliseconds before refreshes.
The Marquee element is currently only supported by Internet Explorer,

Navigator just displays the text between the <MARQUEE> and
</MARQEE> tags.
Blink
The <BLINK></BLINK> element is supported by Navigator. It will cause
text to blink. You can combine it with most text formatting for the desired
effect. The element has no attributes.
A word of caution this element should be used very cautiously as it will

become annoying to repeat visitors.
175
Chapter 13 Exercise 1 Adding Client Pull

In this exercise, you are going to modify a series of html pages so that
each page contains a META element that causes the browser to load
another page in a specific period of time.
Procedure
1. Open the file called c:\hmpfiles\Special\h.htm
2. {Click} inside the HEAD element. From the Insert Menu choose
Element and then choose a META element.
Or use the insert element button
, and choose Meta.
3. Edit the attributes of the META tag so that HTTP-EQUIV equals

"Refresh" and
4. CONTENT equals 1;URL=ht.htm
5. Your Attribute Inspector should look like this:
6. Close the Attribute Inspector.

Note: Notice that the document h.htm points to ht.htm.
7. Save the file.
8. Insert a META tag in ht.htm that points to htm.htm and save the file.
176
9. Insert a META tag in htm.htm that points to html.htm and save the file.
10. Insert a META tag in html.htm that points to hotmetal.htm and save the
file.
11. Preview the file h.htm.

1. Create a new file to test MARQUEE and BLINK. (make the background
page color white, name the file test or sample and save the file)
2. Add some of the other META tags to your homepage.
3. Add a MARQUEE element
4. Add a BLINK element
5. Make the text in both larger and colored
6. Save your file and view in both Navigator & Internet Explorer
7. Experiment with some of the other attributes of the MARQUEE
element
177
Review Questions
1. Where do the Meta tags go in the HTML Document?
2. Name three uses for the Meta element information.
3. How can you add sound to an HTML page?
4. How do you set the attributes of the Blink element?
178
Summary
Create animated pages using the Meta element.
Use the Meta element to add information to your pages that is relevant
to Internet search engines and people viewing your source code.
Add sound to an HTML page.
Add a Marquee.
Add Blinking text.
179
14
Page Layout, and Design
Considerations
This chapter will teach you to use HTML elements in an effective manner
to control page layout. You will also be introduced to the different design
considerations that you will have to make.
Objectives
1. Use Technical Design Considerations in planning an HTML page or
project
2. Discuss Effective Page Layout
3. Plan a successful web site
4. Create a web site that is easily navigated
Prerequisites
180
Multiple browsers to ensure that your page looks the same in different
browsers.
Technical Design Considerations

Screen Resolution
Screen resolution is dependent on the hardware and the settings on the
computer that is going to view your page. It is measured in pixels. When
designing your pages you should make sure that they look good at the
lowest resolution. The maximum guaranteed viewable area on a PC is
600 X 280. This takes into account that the browser is actually using some
of the viewable space.
A.
B.
C.
D.
E.
640 X 480
800 X 600
1024 X 768
1280 X 1024
Others, Mac and Web TV
Color Depth
Another factor that is determined by the hardware of the surfers
computer, is the number of colors supported; the video card or the current
video settings can limit this. On a PC, the video driver defaults to 16 colors
and in many cases, older video cards only support 16 colors. Designers
should develop their graphics with a 216-color palette or the Netscape
supported palette, and all graphics should be viewed at 16 colors to
ensure that they look good.
16 colors
256 colors
216 colors
Reducing the colors used in graphics has the additional benefit of

reducing the file size, which allows faster downloading.
181
Document Size vs. Download Time

Probably the biggest technical design consideration is the overall size of
the page versus the time it takes to load on the surfers computer. Several
things affect the speed at which a browser receives your page. The
primary one is the speed of the users connection to the Internet; usually
controlled by the surfers modem speed. This is another factor that is out
of the control of the designer.
As a designer you should add up the following components to calculate
the overall size of your web page:
A. The size of the html page in bytes.
B. The size of any graphics in bytes.
C. The size of any embedded audio files in bytes.
D. The size of any ActiveX objects or JAVA applets
Page Size = HTML page + Graphics + audio + other (ActiveX and/or Java)
14.4 Kbps represents Kilobits per second or 14400 bps or (14400/8) 1800
Bps (bytes per second). A 50 KB (Kilo Byte) graphics file will take
(50000/1800) 27 seconds to download. At 28.8 Kbps it will take half that
time 13-14 seconds. At 33.3 Kbps it will take approximately 12 seconds.
Given that modem speed is a big limitation for most surfers you should not
overload your pages. You should give the surfer the option to go to pages
that are heavy with graphics, sound or JAVA applets. Recognizing that
many people surf with their graphics off you will also want to ensure that
you effectively use the Alt Text attribute for graphics that you are using.
Technical Design Guidelines for Internet Applications
Use plug-ins and applets sparingly
Keep total page size less than 75KB (45 seconds @ 14.4)
Let users choose to view graphics intensive pages
Keep graphics less than 50KB usually
Use interlaced graphics (dont use for backgrounds)
182
Page Loading HTTP 1.0 Differences with HTTP 1.1

Many questions come up over how a page is loaded, and a lot of that can
be answered by the way the protocol that transports the page from the
server to the web client works.
1. The HTML page is retrieved. This is done through one connection to
the server. The content of the page is then parsed, by the browser, for
other elements that need to be downloaded like graphics, sound,
ActiveX objects, or JAVA applets.
2. Separate connections to the server are created for the other elements
in the page, and each element is downloaded individually. Each one of
these connections would be considered a hit by the web server, and
entered into the web server log.
3. Since the TCP/IP protocol can have several connections open at once
between the server and the web client, more than one element is
downloaded at a time. This is why the status bar at the bottom of the
browser shows the percentage of the file downloaded. The status
alternates between different sizes as the information for each
connection reaches the browser.
Future web servers and web client software will support HTTP 1.1, which
has several enhancements over HTTP 1.0. The major enhancement is
that only one connection will be established for the page and all the
elements that need to be downloaded. This will reduce the number of
connections that must be opened and maintained, at the server and will
decrease download time.
Browser Compatibility & Quirks
Web client software is written by a number of companies and as such
there are a number of differences between the browsers in the way that
they interpret standard HTML code.
One difference is the way in which the browsers draw tables. Internet
Explorer will redisplay the table as new elements fill in the cells. Navigator
4 downloads all the elements before displaying the table and so does not
perform multiple redraws as the table fills with data.
183
Page layout
An HTML page starts in the top left corner and grows to the right with no
fixed boundary, and grows down with no fixed boundary. This means a
page can be infinitely long and wide.
Keep in mind that people reading English are trained to start in the top left
of a page and finish at the bottom right. It is a good idea to start the theme
of the page in the top left or center at the top of the page for this reason.
Page navigation controls should be located at the bottom right hand side
of the page to make it easy to select the next page, or return to the
previous page.
Page Layout Guidelines
1. In most cases your pages should not require the viewer to scroll to the
right. The maximum width of a page should be 600 pixels in order to be
displayed properly, regardless of the display resolution.
2. Recommended components of a home page:
i. E-mail address (i.e. webmaster@whatever.com)
ii. Mailing address
iii. Phone numbers (800 numbers plus local area code and number.
Remember not everyone one in the world has access to your 800
number)
iv. Interactive component that encourages repeat visits by your
target audience
v. Look, feel and message should reflect the organization
vi. Information that is relevant to the target audience
vii. Directions to what your target audience wants to know or do (
PRE and/or Post Sale)
3. To control a page you may want to create a table with a maximum size
of 600 pixels and contain the page inside the table.
184
4. When deciding to use a Background Image that has a distinct left side
you should make sure it is 1280 pixels wide, because the browser tiles
the background image, and anything smaller will appear again on the
right of the page when viewed at high resolutions.
5. Use the DIV and CENTER element to control layout. (Div creates
divisions within the document that do not have preformatted spacing
associated with them, like paragraphs) You can control the alignment
of objects with the alignment attribute of the DIV element.
6. To create attractive looking forms you should use a table to control the
layout and alignment of the form elements.
7. Web pages should use white space at the borders. This makes the
pages easier to look at and to read. Printed pages usually have white
space at the left and right hand sides; as well, at the top and bottom of
the page. This effect can be achieved by centering the contents of the
page.
8. Frames are good for keeping people in your site. Careful consideration
must be given to using Frames, as they require Frames-capable
browsers. Always remember to provide valuable information in the
NoFrames section of the Frameset.
9. You should be consistent in your layout across multiple pages, people
become comfortable with the format, and begin to expect it.
10. Bigger is better. If things are too small they will strain the viewers
eyes and it will not be comfortable for them. General text areas should
be 10 pt. or larger as this approximates a similar reading experience as
a newspaper.
11. You should vary sizes for texture. When everything is the same size it
becomes very boring.
12. Blinking text should only be used in situations where the information is
changing frequently.
13. Be sure to use case properly. Mix upper and lower case as required or
for effect. Documents done in all UPPER case are hard to read.
185
Site Design Factors and Criteria

When developing a web site from scratch you should first answer the
questions related to why people will be visiting the site in the first place. Is
it for pre or post sale support, to purchase something, or find out more
about the company. Your web site should be part of your business plan or
marketing plan and there should be established goals and objectives for
what it is to accomplish. Once you know what problem you are trying to
solve with the web site you can then start your design.
In general a site should be intuitive for the person visiting it. It should be
very easy for them to contact your organization at any time and they
should be able to locate the information they are looking for in three to five
mouse clicks.
1. The Home page should be simple and fast.
2. The Home page should answer some basic questions for the surfer:
i. Is this the organization I was looking for?
ii. Do they have what I am looking for?
iii. How can I contact them?
iv. How do I get what I want now?
Site Layout and Navigation

1. Navigation controls should be located across the top or the right hand
side of the page. This will locate your navigation controls close to the
browsers controls for movement and up and down scrolling.
2. As previously mentioned you should only have 3 to 5 mouse clicks to
move from start to destination. People do not like to hunt for an
answer.
3. Create sub sites to simplify navigation, and for marketability. E.g.
education.novell.com, insight.netscape.com
186
Review Questions
1. What is the maximum guaranteed viewable area on a PC?
2. Give two reasons why you would want to reduce colors in graphics?
3. What components do you add together to find your page size?
4. How many Bytes per second can a 14.4 modem receive?
5. Name three methods of controlling the positioning of text and objects

on a page?
6. What must you check for when using a background image?
7. How many mouse clicks are reasonable for surfers to make to get to
the information they are after?
187
Summary
188
Use Technical Design Considerations in planning an HTML page or

project
Discuss Effective Page Layout
Plan a successful web site
Create a web site that is easily navigated
15
Cascading Style Sheets
This chapter will help you make use of a powerful feature in HTML page
creation called Cascading Style Sheets.
Objectives
1. Describe how to use a Cascading Style Sheet.
2. Add an Inline Style.
3. Add an Embedded Style Sheet.
4. Add Linked Style Sheets.
5. Define, create and use a Class.
6. Define, create and use an ID.
7. Use the DIV and SPAN Elements to add style.
8. Refresh the HoTMetaL PRO display styles.
Prerequisites
Cascading Style Sheets are currently supported by:
Netscape Navigator 4.0 or greater
Microsoft Internet Explorer 3.0 or greater.
189
Introduction to Cascading Style Sheets

Cascading style sheets are a recent addition to HTML pages. Web page
designers have long been frustrated at the lack of control they have, over
how a page will appear. Cascading Style Sheets are a way of controlling
the way the browser displays the page. For the experienced designer,
Cascading Style Sheets will be a welcome feature that will save a lot of
time normally spent on repetitive style formatting commands. You can
specify a particular font size in points or pixels and control the spacing and
indentation, etc. Cascading Style Sheets will give you much more control
over the text on the page.
There are three ways to add Style information to you web page:
1. Inline styles
2. Embedded style sheets
3. Linked style sheets
We will cover the concepts behind all three and how to use the Cascading
Style Sheet Editor built into HoTMetaL PRO.
Microsoft Internet Explorer (3.0 and above) and Netscape Communicator
4.0 provide the most extensive support for cascading style sheets at this
time.
The specifications for the evolving CSS standard can be found at the W3C
Consortium's Web page at http://www.w3.org/.
190
Inline Styles
The first method of adding Style to a web page is to use the STYLE
attribute of a selected element. To use an inline style, you add a STYLE
attribute to a specific instance of an element, using the following syntax:
<ELEMENT STYLE="property:value; property:value; "></ELEMENT>
For example: <B STYLE="color:navy;">In the navy.</B> This text would
appear bold and navy in a browser. An inline style may be applied to any
HTML element and modifies only the specific instance (occurrence in the
document) of the element to which you apply it.
Once you select an element to add style commands to you simply need to
{Click} the button
in the value field beside the STYLE attribute in the
Attribute Inspector.
This launches the Cascading Style Sheet Editor
191
The Cascading Style Sheet Editor allows you to choose style options from
the different tabbed sections and it also gives you a preview display of
what a particular style command may look like in the browser.
When you have completed entering your style selections you can {Click}
OK. The Style Editor writes the style commands for you and places them
as values of the STYLE attribute for the element you were working on.
Source View
Inline Styles are used rarely because they are as much work as using the
<FONT> tag. They are sometimes used to override styles from embedded
style sheets or from a linked cascading style sheet; this will be
demonstrated later.
192
Embedded Style Sheets

To use an embedded style sheet, you define a style block (delimited by
the <STYLE> and </STYLE> tags), which should be placed in the
<HEAD> section of the document. This block consists of a set of style
rules, where each rule defines a style for an HTML element, group of
elements or some other defined selector.
<HEAD>
<TITLE> Embedded Style Sheet Example </TITLE>
<STYLE TYPE="text/css">
</STYLE>
<HEAD>
<BODY>
A required attribute of the Style element is TYPE and it should be set to
text/css. A disadvantage of Embedded Style sheets is that the style
commands only apply to the document they are embedded in. The CSS
Editor will create and properly insert the STYLE element into your
document.
Some browsers are not CSS-compliant and will display the contents of the
STYLE element in the document window. For this reason it is a good idea
to surround an embedded style sheet with an HTML comment. This will
cause the content to be ignored by non-CSS browsers, but still interpreted
by CSS compliant browsers.
Type `' just before the STYLE end-tag, but after the style sheet
information.
A style rule has two parts:

A selector that identifies an HTML element or group of elements
A declaration of the style properties to be applied to that selector
The generic syntax for a style rule is as follows:
selector {property:value; property:value; }
Each style rule must start with a selector or group of selectors, followed by
an open brace ({), followed by a set of declarations. Each of these
declarations ends with a semi-colon and each property is separated from
its value(s) by a colon (:), ending with a close brace (}).
193
Creating an Embedded Style Sheet

1. {Click} on the Format Menu
2. Select the option CSS Styles and then select Document Styles from
the fly out menu.
3. Select the element, from the element drop down list, which you want to
attach styles to.
4. Make your style selections from the tabbed style options sections.
5. {Click} OK
6. Inspect the STYLE element that has been added to your document
(within the HEAD element). You should add the HTML comments tags
around the contents of the STYLE element.
Using the above embedded style sheet with the following line of HTML
code will produce the box pictured below the line of HTML code.
194
Linked Style sheets

The easiest method for adding style to multiple HTML documents is to use
Linked Style Sheets. A Linked Style Sheet is a separate file that contains
all of the style information.
This is an example of a Cascading Style Sheet.
StyleSht2.css
@meta {
Title: StyleSht;
}
P /*This is to indent a paragraph*/ {
font-weight: normal;
font-size: 10pt;
line-height: 13pt;
margin-right: 10px;
margin-left: 10px;
text-indent: 10px;
font-family: Arial;
}
B{
color: blue;
background-color: white;
background-repeat: repeat;
}
To link the style sheet to the HTML page you use the LINK element in the
head of your document. The required attributes are HREF=URL and
REL=STYLESHEET; both the TITLE and TYPE are optional. But TITLE
must match the Title: property in the Style Sheet), and TYPE should be
set to text/css.
195
Creating a Linked Style Sheet

1. {Click} on the Format Menu
2. Select the options CSS Styles, External Styles then New from the fly
out menus.
3. Select the elements and styles to create your style sheet then {Click}
OK.
4. Enter a file name into the dialog box and navigate to the folder where
you want the CSS file saved.
5. {Click} YES to have HoTMetaL PRO link your CSS file to your
document.
6. Inspect the LINK element that has been added to your page and then
preview your file in a browser.
196
User Defined Selectors

Classes
If you expect to have formatting variations for different instances of a
single element, or you would like to have different elements share the
same format, using a class name as a selector is a good approach. This is
often referred to as "sub-classing" an element. CLASS is an HTML
attribute that has no display characteristics and that you can apply to any
element, like this:
<B CLASS="clsRed">Classy, red, and bold</B>
The style rule for clsRed could be declared as follows:
<STYLE> <!-.clsRed { color: #FF0000; }
--> </STYLE>
Note: that the selector begins with a period (.), which is the required
syntax for class names as selectors.
A class is simply a group of elements, possibly scattered throughout a
document, all of which have the same value for their CLASS attribute.
197
IDs
Like CLASS, ID is an HTML attribute that does not affect the display of an
element and can be applied to any element. In general, while class names
are usually given to groups of element instances sharing some common
function or format (relative importance, context, and so on), ID is used to
identify one specific instance of an element. Style rules selected by the ID
attribute are declared using the pound sign (#) to precede the selector, as
follows:
<STYLE> <!-#idBlueP { color:blue; text-indent:10px; font-size:12pt; }
#idBoldItal { font-weight:bold; font-style:italic; }
--> </STYLE>
<P ID="idBlueP"> ...je vois la vie en <SPAN ID="idBoldItal"> rose
</SPAN> ... </P>
Note: While many elements can have the same CLASS attribute value,
only one element in any document can have a particular ID attribute value.
IDs are intended to be unique identifiers for elements in a document: the
HoTMetaL PRO Editor will not validate a file in which the same ID value is
used for more than one element. Cascading style sheets let you associate
an ID attribute with a set of style properties and values, so that you can
format a particular element instance in a certain way.
Note: Class and ID attribute values must start with a letter and can
contain only letters, numbers, and `-' (hyphen).
198
Creating Classes and IDs

A CLASS or an ID can be created from the CSS Editor when you are
defining style for an embedded or a linked style sheet. In the CSS Editor:
1. {Click} on the button titled Universal Selector
2. Enter a value for the CLASS or ID

3. If you are creating a CLASS {Click} Add Class button then {Click} OK.
If you are creating an ID {Click} OK.
4. The selector that you created will now appear in the Elements drop
down list in the CSS Editor so that you can select it from the list and
then attach style commands to it.
Note: In the elements list of the CSS Editor CLASSES begin with an
asterix and a period (*.classname) and IDs begin with an asterix and a
number symbol (*#idname). Both of these types of selectors should
appear at or near the top of the elements list.
199
HoTMetaL PRO Display Styles

A style sheet controls the Tags and WYSIWYG views of the HoTMetaL
PRO editor. When you create an embedded or a linked style sheet these
views can be refreshed so that they will use the newly defined styles to
display your document. The Refresh option is available on the CSS Styles
menu.
You can also edit the default CSS file that controls these views. If you
select Editor Display Styles HoTMetaL PRO will open the default file in the
CSS Editor.
Note: It is strongly recommended that you make a backup of the default

CSS file before you make changes to it. The path and filename are as
follows C:\Program Files\SoftQuad\HoTMetaL PRO 6\display\hmpro6.css
200
DIV and SPAN

Just as CLASS and ID appear to have little use beyond setting styles (and
scripting), the two HTML elements <DIV> and <SPAN> are almost
exclusively used as containers for CSS properties. <DIV> and <SPAN>,
like CLASS and ID -- but unlike other HTML elements -- have no inherent
display characteristics, with one exception each. <DIV> defines a block
consisting of text and HTML tags, and separates this block from
surrounding content by line breaks, while <SPAN> is an inline element,
which "flows" in with surrounding content.
<STYLE>
<!-DIV { background-color: black; color:red; font-weight:bold; }
SPAN { background-color: royalblue; color:white; }
-->
</STYLE>
<P>Some text about to run into a big DIV tag <DIV>I am a DIV</DIV> and
narrowly escape.</P> <P>Some text about to flow seamlessly into a
SPAN tag <SPAN>I am a SPAN</SPAN> and make a smooth
getaway.</P>
201
Cascading and Inheritance

The style sheets we are discussing are called Cascading Style Sheets.
Simply stated, "cascading" in CSS specifies how an element instance may
properly be affected by styles of different types (inline style, embedded
style sheet, linked style sheet, imported style sheet) and selected in a
number of ways (element tag, class, ID). The logic is simple: CSS
cascades from general to specific, and from top to bottom.
<HEAD>
<STYLE>
<!-P { margin-left:20px; }
.clsCode { font-family:"Comic Sans MS"; font-size:10pt; color:navy;}
#idP1 { text-align:left; font-weight:bold; }
-->
</STYLE>
</HEAD>
<BODY>
<P ID="idP1" CLASS="clsCode">Multiple styles, no conflicts.</P>
</BODY>
idP1's formatting is affected by the style rules for <BODY>, <P>, clsCode,
and idP1. These potentially conflicting styles are resolved through the
laws of cascading and inheritance.
This means that first, the <BODY>-selected style (background-color) is
applied, followed by the <P>-selected style, clsCode, and finally, idP1,
with each style taking precedence over the previous one. If we had an
inline style defined as well, it would have been applied last, overriding all
others. In the cascade, for the same element, a rule with ID as the selector
takes precedence over a rule with CLASS as the selector. CLASS, in turn,
takes precedence over the HTML element name as selector. This is
referred to as "specificity" of the selector. The order of specificity, from
greatest to least, is:
1.
2.
3.
4.
202
inline styles
ID
CLASS
HTML element
There were no conflicting style assignments -- for example, the

background color for the paragraph was set only in the <BODY> rule, and
the font size was set only in the clsCode style rule so the styles "trickled
down" to the next selector unaltered.
In the case of conflicting assignments with identical selectors, a style
selected by a selector of greater specificity takes precedence. For
example, let's apply a color value (white) to the #idP1 declaration. This will
"conflict" with the color value specified in the .clsCode specification. Since
#idP1 has greater specificity, its color (white) will win out over the
previously set color (navy).
203
Chapter 15 Exercise 1 Inline Styles

In this exercise, you are will add an Inline Style to a document.
Procedure
1. Open C:\HMPfiles\css\Doc1.htm.
2. {Right Click} inside the H1 element, and select the attribute inspector.
3. Scroll down through the attributes until you find the STYLE attribute.
4. Key in color: yellow
5. Close the attribute inspector.

6. Save and preview your document in Internet Explorer or Navigator v4.
204
Chapter 15 Exercise 2 Embedded Styles

In this exercise, you will add Embedded Styles to a document.
Procedure
2. Insert a STYLE element in the head of your document. Select the
Format Menu CSS Styles Document Styles option. This will
launch the Cascading Style Sheet Editor.
3. Select the BODY element from the element drop down list. {Click} on
the Background tab and set the background-color to black.
4. Select the H2 element from the element drop down list. {Click} on the
Text tab and set the color to green.
5. Select the P element from the element drop down list. {Click} on the
Text tab and set the color to red. {Click} on the Font tab and set the
Font size to 12 pt, and the font-family Primary to Arial.
6. {Click} OK. Your document should look like the following:
205
7. Add HTML comment tags after the opening and before the closing
STYLE tags.
8. Launch the attribute inspector and set the TYPE attribute of the STYLE
element to text/css
206
Chapter 15 Exercise 3 Linking a Cascading Style Sheet

In this exercise, you will create and link a style sheet to a document.
Procedure
2. Select Format Menu CSS Styles External Styles New option.
This will launch the Cascading Style Sheet Editor.
3. {Click} on the Universal Selector button. In the Class: textbox type
red {Click} Add Class {Click} OK. {Click} on the Text tab and set the
color: to red {Click} Apply.
4. {Click} on the Universal Selector button. In the Class: textbox type

blue {Click} Add Class {Click} OK. {Click} on the Text tab and set the
color: to blue {Click} Apply.
5. {Click} OK. You will be prompted to save the css file. Save the
document as stylesht.css in the current directory. An alert dialog box
will ask if you want to link the style sheet to the document. This will
insert a LINK element in the HEAD of your document connecting
Doc3.htm with stylesht.css.
207
6. Highlight the word red, after Roses are. Insert Element SPAN.
{Right-Click} and select the attribute inspector and set the CLASS
attribute to red.
7. Highlight the word blue, after Violets are. Insert Element SPAN.
{Right-Click} and select the attribute inspector and set the CLASS
attribute to blue.
You have successfully created an external style sheet that uses
classes and linked it to your document that uses the SPAN element to
apply those classes.
208
Chapter 15 Exercise 4 Editing the Style Sheet

In this exercise, you will edit the style sheet you created in Exercise 3
using the Cascading Style Sheet Editor.
Procedure
1. Continue using Doc3.htm from the previous exercise, and using the
Format Menu CSS Styles External Styles File Name option.
This will launch the Cascading Style Sheet Editor with the selected css
file opened.
2. {Click} on the Universal Selector button. In the ID: textbox type

Border {Click} OK {Click} Apply. {Click} on the Border tab and set the
border-color: to black, the border-style: to solid, border-width: to
thin, then {Click} Apply to all {Click} Apply. Next select the
Background tab and set the background-color: to yellow.
3. {Click} Apply {Click} OK.
209
4. {Click} on the paragraph element tag, and Insert a DIV element. Use
the remove tag button to remove the P element. Your document should
be similar to the example below:
5. {Right Click} and bring up the Attribute Inspector for the DIV element.
Set the ID: attribute to Border.
210
6. Save and preview your document in Internet Explorer and Navigator

v4. You have successfully edited an external style sheet that uses IDs
and linked it to your document that uses the DIV element to leverage
those IDs. You will also notice that the support for the border style
commands is different in Navigator and IE as is the way that the 2
browsers apply the background to the DIV element.
Microsoft Internet Explorer 4.x
Netscape Navigator 4.x
211
Optional Exercise
Modify your #BorderID, and adjust the box padding settings to 10 pixels
each.
Save and Preview your work.
212
Review Questions
1. What are three ways to add style information to your web pages?
2. Give two disadvantages of Embedded Style Sheets.
3. How is a Style Sheet linked to an HTML document?
4. Describe two applications for Style Sheets.
213
Summary
214
Describe how to use a Cascading Style Sheet.
Add an Inline Style.
Add an Embedded Style Sheet.
Add Linked Style Sheets.
Define, create and use a Class.
Define, create and use an ID.
Use DIV and SPAN to apply styles
Refresh the HoTMetaL PRO display styles
16
JAVA and JavaScript Introduction
In this chapter you will be introduced to what JAVA is, and how to add
JAVA Applets to your web pages. You will also be introduced to JAVA
Script, and how to add it to your web pages.
Objectives
1. Describe JAVA.
2. Add a JAVA Applet to a page.
3. Describe JavaScript.
4. Add JavaScript to an HTML page.
Prerequisites
Internet Explorer 3.0 or greater (IE 3.0 Supports JAVA with limited
support for JavaScript)
Navigator 2.0 or greater
Java is Platform Independent
215
JAVA
The Java programming language was developed by Sun Microsystems. It
was developed to be cross-platform and device-independent, meaning the
compiled program should run on Macs, PCs, and Unix machines. It is a
powerful, full-featured object oriented programming language. The
browser creates an environment for JAVA applets to run in called a JAVA
Virtual Machine. This provides platform independence for JAVA Applets.
An applet, for those not familiar with the term, is the name of the miniapplications created with the JAVA programming language. The creation
of applets is beyond the scope of this course. Applets are separate
compiled programs with the file extension of class. They are downloaded
with the page through the use of the <APPLET> tag. In HoTMetaL PRO
there is a button that allows you to insert an applet into a page. The HTML
syntax for applet tag, and its associated PARAMeter tag is as follows:
<APPLET>
Designates a Java applet. Instead of containing the code necessary to
perform a task, this tag contains a reference to the code needed to
perform the task.
The Applet element has one sub-element, the <PARAM> element, which
passes values to the applet that affect the operation of the program.
Applet has the following attributes:
CODEBASE
Directory or folder where the applet(s) are located.
CODE
Defines the compiled applet that is to be loaded.
WIDTH
Determines the width of the area, in pixels, reserved to display the applet
in the browser.
HEIGHT
Determines the height of the area, in pixels, reserved to display the applet
in the browser.
216
<PARAM>
This tag passes a parameter to the applet. It has two attributes:
NAME
Names the parameter for recognition by the applet.
VALUE
Defines a value for the parameter specified by the NAME attribute. All
data is passed to the applet as a string variable.
When using Java in your pages, it is important to be aware that its support
is not universal. If, like many authors, you are showcasing your use of
JAVA on the page, it is advisable to include text in the document that
alerts viewers to this fact. This is especially true when the applet itself is
the centerpiece of the document.
Since JAVA applets must be downloaded with your HTML page they
increase download time. Once downloaded, the JAVA Virtual Machine
must be started and the applet will then start to run. This is usually
indicated in the status line of most browsers.
It is easy to add JAVA applets to your pages using the Advanced Toolbar.
{Click} on the coffee cup icon. After you have navigated to the location of
the applet you want to add, and selected it, you will be presented with the
Applet Properties dialogue box to enter values:
Tags View appearance after you {Click} OK:
217
JavaScript
JavaScript is a programming language that allows scripting of events,
objects and actions to create Internet applications. It uses two elements
the <SCRIPT> </SCRIPT> and . The script element
lets the browser know what type of script it is with its LANGUAGE
attribute. The comment tags enclose the actual JavaScript code so that
browsers will ignore the code if they dont support scripting.
Since JavaScript is embedded in the HTML page it is interpreted at the
client when the page is loaded. This is in contrast to JAVA applets that
are compiled programs that are downloaded from the web server to the
browser and run inside the browser.
This code takes two numbers from the textboxes, adds them together and
pops up the result.
Result:
218
One of the nice features of HoTMetaL PRO 6.0 is that JavaScript code is
color coded in the HTML View, and the lines are numbered. This helps in
debugging programming scripts.
You can adjust this display with the ToolsOptions Source View.
Note: Actual JavaScript programming is outside the scope of this course.
219
Chapter 16 - Exercise 1 - Inserting a Java Applet

In this exercise, you will insert a Java applet that displays the time on an
analog clock.
Procedure
1. Place your cursor to the right of the opening <BODY> tag of your
index.htm file.
2. {Click} the Coffee Cup,
, button on the Advanced Toolbar.
3. BROWSE for the file C:\HMPFILES\ JAVA\Clock2.class

4. {Click} OPEN
5. Change both the width and height to 180.
6. {Click} OK
7. Save the file as Jclock.htm in the C:\HMPFILES\JAVA directory.

8. Preview the file in different browsers. It should look similar to this:
220

1. Create the JavaScript example, and test.
<BODY>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<FORM NAME="Form1">
<P> A=<INPUT TYPE="TEXT" NAME="Text1"> <BR>
B=<INPUT TYPE="TEXT" NAME="Text2"> <BR>
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="A + B="
ONCLICK="add_2_num()"></P>
</FORM>
</BODY>
221
Review Questions
1. Who created the JAVA programming language?
2. What does the PARAM element do?
3. Why is the actual JavaScript code placed within a comment element?
222
Summary
Describe JAVA.
Add an APPLET to a web page.
Describe JavaScript.
Add JavaScript to an HTML page.
223
17
ACTIVEX Objects, and VBScript
Introduction
In this chapter you will learn about ActiveX, and add an object to a web page.
Objectives
1. Describe ActiveX.
2. Add an ActiveX object to a web page.
3. Describe VBScript.
4. Add some VBScript to an HTML page.
Prerequisites
224
Internet Explorer 3.0 or greater
Navigator 3.0 or greater with Plug-in (For ActiveX support, Navigator

does not support VBScript)
ActiveX Support
ActiveX controls/components can be added to your HTML pages using
the OBJECT element. Like the APPLET element the PARAM element is
a sub-element of OBJECT that controls the way the ActiveX control
functions.
ActiveX controls are compiled programs. They have been derived from
the OLE (Object Linking and Embedding) standard. There are a large
number of controls currently available from Microsoft and other vendors.
The big advantage over JAVA Applets is that ActiveX controls are only
downloaded once. The controls integrate themselves with the operating
system, making their execution extremely fast, and their display
characteristics sharp and crisp. This makes them extremely valuable on
Intranets for applications such as graphing.
The big disadvantage of ActiveX controls is their lack of portability
compared to JAVA Applets that will run on any platform.
ActiveX control creation is beyond the scope of this course and requires
knowledge of C++ or Visual Basic programming.
<OBJECT>
The <OBJECT> tag has a number of attributes that define the object, its
location, and how it is presented on the HTML page.
CLASSID
ActiveX controls, which are binary files, are installed on a user's
computer and registered in the system registry with a unique class ID.
The CLASSID attribute of the <OBJECT> tag contains a URL that
uniquely identifies the object. Referencing the class ID of the registered
control in the <OBJECT> tag inserts it into the HTML page, and then the
control displays itself.
ActiveX controls are identified by a URL that uses a class ID identifier.
The format for this URL is:
"clsid:12345678-1234-1234-1234-123456789012"
This example shows the <OBJECT> tag for the Calendar control. The
CLASSID is the only attribute that is required by the <OBJECT> tag.
<OBJECT classid="clsid:8E27C92B-1264-101C-8A2F040224009C02">
225
The class ID for an ActiveX control is placed in the registry when a

control is installed. There are a number of tools you can use to retrieve
this value.
Registry Editor (RegEdit) This tool enables you to change settings in
your system registry. You can also use it to view and copy the class ID
for an object.
OLE Viewer This utility is installed with the Win32 Software
Development Kit (SDK). You can select the Copy HTML <OBJECT> Tag
to Clipboard command from the Object menu to copy the tag and the
class ID to the Clipboard.
ActiveX Control Insertion Device This utility can also build the
<OBJECT> tag for you and copy it to the Clipboard.
ID
The ID attribute in the <OBJECT> tag is synonymous with the NAME
attribute for standard controls. You can use the ID to refer to the object
from VBScript.
<OBJECT classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"
id=cldCalendar2>
CodeBase
This attribute is a URL that points to a file containing the implementation
of an object. (It is explained in detail in the next topic.)
Name
This parameter is required when the object is on a form and needs to be
included with other form fields when information is sent to the server.
For more information, see Chapter 6: Communicating with the Internet
Server.
Width, Height, Align, HSpace, and VSpace
These attributes affect the way an object is positioned and sized within
an HTML page.
226
CodeBase
If the object specified by the CLASSID parameter is not available on the
user's computer, the browser will use the CODEBASE parameter to
determine where the object is located on the Internet server, and
download the files required to render the object. As with all files that can
be downloaded, you should provide the user with the option of
downloading the object and an alternative to the object, if possible.
For example, the browser will try to locate an ActiveX control on the
local computer by first searching the registry. If the control is not
registered, the browser will download the object from the location
specified in the CODEBASE parameter.
Specifying the CODEBASE URL
The CODEBASE parameter for the <OBJECT> tag contains a URL
pointing to the implementation files for a given object. This URL is critical
for downloading components, because it must specify all files necessary
to implement a particular object.
This example downloads an ActiveX control by referencing the .ocx file:
<OBJECT
ID="NewControl"
CLASSID="clsid:123-1234-123-123-"
CODEBASE="http://server/control.ocx">
</OBJECT>
HTML authors can set the CODEBASE attribute to point to one of three
file types, which are typically supplied by the developer of the control.
Portable executable file This is a single executable file, such

as an .ocx file or DLL, that is downloaded, installed, and
registered by the browser.
.CAB (cabinet) file This file contains one or more files, all of
which are downloaded together in a compressed cabinet.
.INF file This file specifies various files that need to be
downloaded and set up for the .ocx to run.
227
Example Source HTML Code
In the exercise we will add this control to a web page.
228
VBScript
VBScript is a programming language that allows scripting of events,
objects and actions to create Internet applications. It uses two elements
the <SCRIPT> <SCRIPT> and 
</SCRIPT>
<FORM NAME="Form1">
<P> A=<INPUT TYPE="TEXT" NAME="Text1"><BR>
B=<INPUT TYPE="TEXT" NAME="Text2"><BR>
<INPUT TYPE="BUTTON" NAME="Button1" VALUE="A + B="
ONCLICK="add_2_num()"> </P>
</FORM>
233
Review Questions
1. What element is used to support ActiveX controls?
2. Why should you specify the CodeBase attribute?
234
Summary
Describe ActiveX.
Add an ActiveX object to a web page.
Describe VBScript.
Add some VBScript to an HTML page.
235
18
High Speed Publishing
In this chapter you will be introduced to techniques that you can use to
speed up publishing.
Objectives
1. Keep your Editor current
2. Use the URL Hot List.
3. Create and Use Macros.
4. Customize Toolbars and Menus for Enhanced Editing.
5. Use Image Explorer.
6. Use the Asset Manager
7. Use and Create Asset Libraries
Prerequisites
236
Ulead Graphics components installed.
HoTMetaL PRO 6.0 Editor
Keeping HoTMetaL PRO Current

SoftQuad publishes 2 main types of updates to the HoTMetaL PRO
product. They release periodic updates to the rules file that the editor uses
to control and/or validate the HTML code that you use to create your web
pages. They also release product improvements and bug fixes in releases
called Patches.
Both Rules Files and Patches are available in the Support section of
SoftQuads hotmetalpro.com web site. When an update is available there
should be a description of the upgraded features or fixes that are
provided. Details of the version numbers, dates, file size and installation
instruction will also be illustrated.
It is a good idea to visit this section of the SoftQuad web site regularly. To
see if there are new features and updates that you want to keep your copy
of HoTMetaL PRO current. You can verify your existing revision level by
selecting the Help Menu About HoTMetaL PRO option
Selecting this option will bring up a dialog box listing the current version
and revision level of your installed copy of the software. If there is a Rules
File Update or a new Patch file that will upgrade your release level you
may want to follow the instructions to download and install it.
237
URL Hot List

HoTMetaL PRO allows you to maintain a hot list of frequently used URLs.
When you need to insert one of these URLs, you simply select it from the
list instead of having to enter the information over again.
To add a URL to the Hot List {Click} on the link button
Type in the URL you want to add to the Hot List:
{Click} on Add to Hotlist
{Click} on OK, and the URL is added to the Hot List.
238
To use the Hot List, {Click} on the link button
{Click} on the Hotlist button and select the URL from the list.
{Click} OK and the link will be added to your document.

Once URLs are added to the Hot List, they are available any time you are
creating a document in HoTMetaL PRO. This can save you time and help
avoid errors due to typographical errors and misspellings.
NOTE: You may want to restrict the Hotlist to URLs that you use regularly.
The list is organized in the order that you add items, not alphabetically. As
the list grows longer it may become more difficult to find URLs that you are
looking for.
239
Macros
Macros are great for repetitive tasks that require many mouse clicks or
keystrokes. An example is setting the Font Face attribute to the Arial font.
Another example is inserting an element that doesnt have an icon on a
toolbar. Macros can be easily created by using the Macros Toolbar:
To start recording a macro {Click} on the Record button
Your keystrokes and mouse clicks will then be recorded in sequence until
you hit the Stop Button
. You can then name the macro, assign it a
keyboard combination, and {Click} on OK.
The new macro will then be available for you to use. It will appear in the
drop down list on the Macros Toolbar. To use the macro, position your
cursor in a similar starting location in the document and use the keystroke
combination that you assigned or select the macro in the drop down list
and {Click} on the Run Current Macro button.
240
The Macros Toolbar also gives you access to the macros list so that you
can delete macros that you no longer need or want. To edit the Macros
list:
1. {Click} on the Macros button.
2. Select the macro you wish to delete and {Click} the Delete button.
3. {Click} Yes to accept or No to cancel.
241
Customizing Toolbars and Menus

You can create and customize both toolbars and menus in HoTMetaL
PRO 6.0. While the Toolbars and Menu Customization dialog box is active
toolbar buttons can be manipulated by dragging and dropping and menu
items can be modified using the Menus tab.
View Menu Toolbars option or {Right Click} on a toolbar and select
Customize.
Selecting a toolbar name on the Toolbars tab displays the toolbar in the
Editor Window. {Clicking} on the Buttons tab lists all toolbars allowing any
icon to be dragged and dropped onto any toolbar that is active in the editor
window.
If you have made changes to any of the 16 normal toolbars and you want
to return a toolbar to its default status you can use the RESET button on
the Toolbars tab of the Toolbars dialog box. If you select the Menus
toolbar and {Click} RESET it will RESET all of the default menu settings.
242
Creating New Toolbars

You may want to create your own customized toolbars to provide easier
access to those commands you use most often. To create your own
toolbar you {Click} on the NEW button on the Toolbars tab.
Type a name for your toolbar and {Click} OK.
243
Your new toolbar will appear as a small floating toolbar in the editor
window.
You can then drag and drop toolbar icons from other toolbars in the editor
window or from the buttons section of the Buttons tab in the dialog box.
This allows you to create almost any tool combination from existing toolbar
buttons.
Custom Toolbar (Wicked)
If you want to delete a custom toolbar that you have created you would
select the toolbar in the in the Toolbars list on the Toolbars tab and then
{Click} on the delete button.
244
Creating New Menus

You can create new menu items, that can be added to any of the existing
menus or you can create totally new menus.
New menus can be created as fly out submenus of existing menus or as
top-level menus displayed on the Menu Toolbar. To create a top level
menu:
1. {Click} on the title Menu Bar in the Menus list and then {Click} the Add
Menu button.
2. Enter a name for your menu in the Caption field. You can place an &
in the name preceding the character that you want to use as a shortcut
to activate the menu. E.g. &File means that [ALT]+[F] activates the File
Menu.
245
3. The properties fields and button titles present options for you to add
menu items and submenus.
4. {Click} Add Menu Item and type a title into the caption field.
5. Select an action from the Macros drop down list.
6. When you have added the menu items you desire {Click} Close.
Other Menu Customization Options

Begin Group
This option allows you to create groups within menus by drawing either
vertical or horizontal bars in the display of the menu.
Move Up
This will move a menu item up in the menu list or to the left on the Menu
Bar.
Move Down
This will move a menu item down in the menu list or to the right on the
Menu Bar.
Remove
This will remove a menu or menu item.
246
Working with Image Libraries & Other Web Components

Image Explorer
Image Explorer is an excellent tool for viewing images. To launch the
Image Explorer select Tools Menu Image Explorer.
The Image Explorer window is split into 2 panels. On the left is the Folders
View Panel. In the Folders View you can navigate to any directory and
Image Explorer will create and display thumbnails for each graphic. The
thumbnails will be displayed in the Images Panel in the right hand side of
the Image Explorer window. Image Explorer will display thumbnails of a
wide range of image types, e.g. bmp, cur, gif, jpeg, pcx, png, tiff, etc.
You can then select an image and drag and drop it into your web page,
HoTMetaL PRO will automatically add the IMG tags. You should edit the
ALT attribute to supply the appropriate description of the image.
This functionality provides an extremely fast way to view collections of
images and add them to your web pages.
NOTE: Your working document should be saved before you drag & drop.
Then the URL value for the IMG SRC attribute will be created as a relative
address.
247
Asset Manager
HoTMetaL PRO 6.0 includes access to collections of various kinds of Web
objects such as images, CSS files, scripts, DHTML components, etc.
These Web objects are organized into categories visible in the Installed
Assets folder.
The Asset Manager supports intelligent drag & drop from the Assets tab
into your working document. This means that objects will be placed in your
web page either in the specific location that you drop them or in the
correct position within the document. E.g. a background image will be
properly specified as the BACKGROUND attribute for the BODY element
no matter where you drop it on the working document.
Another important feature of the intelligent drag & drop is that Web
objects that are referenced by a URL value will have the path and file
copied into your working design environment.
248
Assets
The Assets tab contains three folders for organizing and categorizing Web
objects:
Installed Assets library of Web objects installed on your local hard

drive during installation.
My Assets where you create your own Assets folders
Other Assets links to assets on the HoTMetaL PRO CD or
SoftQuads live assets web site.
The Installed Assets Folder

This folder contains collections of public domain Web objects. Any objects
that are not self-explanatory will have instructions visible in the content
window when the folder is selected in the explorer window.
249
The My Assets Folder

This folder allows you to create your own collections of Web objects and
to take advantage of the intelligent insertion capabilities of the Asset
Manager.
To add objects to the myassets folder you first need to create one or more
sub folders:
{Right Click} on the myassets folder
Select - New Folder from the pop-up menu
Enter a name and choose an asset type for the folder. The
Asset manager performs intelligent insertion functions using the
setting you choose for the asset type.
To add items to your new folders you can either drag and drop files from
the content window of the Desktop tab into the folders that match the type
of Web object or you may copy and paste objects that would not be
inserted as separate files, such as scripts.
When you add an item you should be presented with a dialog box
prompting you to enter Asset Details such as a description of the Web
object or certain attributes such as ALT text, HEIGHT and WIDTH.
Enter the description information and {Click} OK.
250
The asset that you have added will now be available for intelligent
insertion from the Assets tab into your working documents.
To remove Web objects from the myassets folder simply {Right Click} on
the object in the Contents pane and choose Delete from the pop-up menu.
You can also delete folders that you have created by {Right Clicking} on
the folder and choosing Delete.
251
The Other Assets Folder

This folder provides access to additional web objects and resources via
CD ROM or over the Internet.
The CD ROM Drives folder contains additional fonts and images plus
additional training materials.
The Remote Assets folder requires an active connection to the internet

since this folder connects you to SoftQuads hmfx.com website. Once
connected to the site you can navigate around hmfx.com to select objects
that can then be dragged & dropped into your documents.
252
Review Questions
1. What is the current version and revision level of your editor?
2. Are the URLs in Hotlist available every time you edit a page?
3. How do you run a macro once you have created it?
4. If you customize a toolbar, can you return it to its default status?
5. Can you create your own toolbars? Can you create your own tool
buttons?
6. How can you use Image Explorer to speed up page creation?
7. What is intelligent insertion?
8. Where would you keep your own libraries of Web objects and why?
253
Summary
254
Update your copy of HoTMetaL PRO.
Use the URL Hot List.
Create and use Macros.
Customize existing Toolbars and menus.
Create your own Toolbars and menus.
Use Image Explorer.
Use the Asset Libraries.
Create your own Asset Collections.
19
From Web Pages to a Web Site
In this chapter you will learn to how to plan a web site, in which you can
use all of your web page creation techniques.
Objectives
1. Design a Web Site.
2. Plan the Directory Structure for a Web Site.
3. Establish Document Standards.
4. Implement the use of Templates
Prerequisites
In the text we will refer to it as a web site, this could be an Internet web
site, an Intranet web site, or an Extranet web site. All of the principals
discussed apply to all of the different types of sites.
255
Designing a Web Site

Designing a web site takes more time than just designing a couple of web
pages. A web site should cover all of the aspects of a business. It should
be robust and full of useful data. It should be easy to navigate, quick to
download, maintain a consistent interface and color scheme.
In the text we will refer to it as a web site, this could be an Internet web
site, an Intranet web site, or an Extranet web site. All of the principals
discussed apply to all of the different types of sites.
When designing a web site you should plan your pages. Decide what is
going to be on each page, how the pages are going to be organized. You
might want to start with a map that shows the relationships of pages to
one another (the links) and block out the major points to be covered on
each page.
1. Planning
1.1. Know what you want to say before you start.
1.2. Every page has a purpose.
1.3. Start with a map
1.4. Use good design fundamentals.
1.5. Make Navigation easy.
1.6. Go easy on the graphics.
1.7. Write for all browsers.
2. Do a Rough Draft
3. Test and Test Again
4. Publish
5. Troubleshooting
6. Plan Ahead, what will you add or change shortly to keep interest.
256
Planning the Directory Structure for a Web Site.

Internet, Intranet, and Extranet web sites start small and grow very big
very quickly. In some sites there are a large number of authors
contributing to the site. In order to survive the chaos that can come from
all of this activity a directory structure needs to be put in place to structure
the location of web pages. The directory structure should match the
general layout of the site. For example:
The directories can contain several pages of content related to a particular

area. If there is a large number of pages you may want to think about
further dividing the content into subdirectories.
There is no right or wrong way to layout the directory structure, but there
are some things to keep in mind:
Does the structure have room to grow
Is it flexible enough to meet the changes in the business
Can it easily handle reorganizations
Does it make sense to the other publishers
Note: Directory names should not contain spaces, underscores are
recommended instead.
Sample Intranet Structure
Sample Internet Structure
257
Establishing Document Standards

Since there may be many authors creating content and publishing it on the
web site it is advisable to publish a document standard that defines the
things that must be included, the things that shouldnt be included, the
color scheme, fonts, naming conventions, etc.
A sample list of things you might put in your Document Standard that
would be published to all of your authors.
1. Designed to fit a 640X480 basic VGA screen, because this ensures the
largest viewing audience.
2. Graphics will be kept to a color depth of 216 colors, to ensure the
greatest viewing.
3. Overall page size is restricted to 100 Kilo Bytes to ensure quick
downloading and less stress on the network.
4. The following plug-ins are supported: list of plug-ins.
5. On the Internet we will design for both Navigator and Explorer, we will
only use JAVA applets as they are browser independent. As well, we
will use JavaScript because it is browser independent.
6. On the Intranet we will design primarily for Explorer and support
ActiveX Objects because of the auto install capability and one time
download.
7. The following elements must be on every page: authors e-mail
address, a phone number, a fax number is applicable, a mailing
address if applicable.
8. We will use a background color instead of an image to reduce page
size and decrease loading time.
Note: Refer to the chapter on - Page Layout, and Design Considerations.
258
Using Templates
The use of templates can help to maintain your document standards
across a large group of publishers or across multiple groups such as
departments in large organizations. Template files could contain required
elements in their correct positions and formats such as corporate or
departmental logos and graphics, navigation bars, image maps, links to
standard pages, etc.
In HoTMetaL PRO a web page file can be set up to act as a template. The
file can be linked to the New File button of the editor
. Whenever the
user creates a new file it opens a copy of the linked web page file as the
starting point instead of the empty file that is the default. You can choose
to use a template from the assortment supplied with HoTMetaL PRO or
you can create your own files.
To link a web page file to the New File button:
Select Tools Options to launch the Options dialog box
{Click} on the File tab
In the New Default Template section {Click} Choose
Navigate to the file that you want as the template
Note: You will want to use complete URLs for any HREF and SRC
attribute values contained in elements in the template page.
259
Review Questions
1. Draw a diagram of the site you are thinking about building.
2. What might the underlying directory structure look like?
3. What document standards are you going to put in place?
4. What type of HREF and SRC attribute values are important in template
files?
260
Summary
Design a Web Site.
Plan the Directory Structure for a Web Site.
Establish Document Standards.
Implement the use of Templates.
261
20
Site Management Overview
In this chapter you will be introduced to the site management tools
included in HoTMetaL PRO.
Objectives
1. Define, Create and Open a Project.
2. Use the Asset Manager toolbar.
3. Understand the Page Links, Web and Pocket Views.
4. Use the Views Toolbar to Control Views.
5. Use the Right Click Menus
Prerequisites
262
Windows 95 Operating System
Windows NT Operating System
Site Management Tools

HoTMetaL PRO contains site management tools for managing your web
page files as a web site. The integrated web site management tools allow
you to:
View the link structure of your site

Move and rename files while maintaining link integrity
Find and repair files with broken links
Perform Find & Replace functions across multiple documents
The site management functions are applied to collections of files called

projects. Projects are all the files grouped together starting from a root
page (usually the homepage of your site) and including all files in sub
directories.
263
Creating a New Project

When you create a project in HoTMetaL PRO it is displayed on a separate
tab in the Asset Manager called the Project tab. To create a project based
on an existing set of HTML files:
Ensure that the Asset Manager is open

Select File Menu New - Project from File.
Use the navigation dialog box to choose the root page for the new
project.
The project is created and opens in the Project tab of the Asset Manager.
264
A Web View window is created as a new tab of the document window.

When you create or open a project the Web View tab will be the active
(top) tab in the window.
When you create a new project, two files are created that store the
information about the home page of the project, the link structure of the
project, which files have been published, what Pockets have been
created, etc. These files have the same name as the root page of your
project, with a different file extension (.hpp and .hmp). You do not need to
edit these files.
The root page must be specified in order to build different views of the
project. The root page is generally the page where many links to other
pages are found. This file may be an index page, a table of contents page,
or a welcome page in a group of HTML documents. Often, the root page
of a project has a name such as index.htm or home.html.
265
Opening an existing project:
Select File Menu Open

Change the Files of Type field to Project Files (*.hpp)
Navigate to the project file that you want to open and select it.
The project will be opened in the Project tab of the Asset Manager.
If the project you want to open is a recent project select File Menu
Recent Projects. The last four previously opened or imported projects are
listed. Choosing a project file from that list will open it in the Project tab.
266
Project Tab
The Project tab is divided into 2 window panes. The top pane provides
information about the directories in your project using an Explorer View.
The bottom pane displays a Contents View of any folder selected in the
Explorer View.
In the Contents View if a file or folder icon is displayed with a chain link on
the icon that indicates that it is linked into the site where site is defined
as the linked files contained in the project.
Asset Manager Toolbar
The Asset Manager Toolbar provides file administration and viewing

options for your project.
Refresh updates the Desktop tab by checking all of the local
URLs in the HTML pages in the project.
Up One Level moves up the directory tree
New Folder creates a new folder
Show All Files makes all file types visible in Contents View
Filter Files allows you to view files by type based on filters that
you create and select
Change View allows you to modify the Contents View
Large Icons
- show files with large icons
Small Icons
- show files with small icons
List
- show files in list format
Details
- show file details
Thumbnail
- show image files as thumbnails
Increase, Decrease or Select Size of thumbnails
267
Page and Site Views

HoTMetaL PRO offers graphical views of the links in your site. The 3 main
views associated with site management are Page Links, Web View and
Pocket View. You may want to customize your Views Toolbar to contain
only these buttons.
Views Toolbar (customized)
Page Links View

The Page Links View is used to get a quick summary of all the links going
into and coming out of a particular file.
By default the links are displayed for the root file.

{Clicking} on other files in the Page Links window selects them so that
the links are then displayed for the selected file.
The selected file is in the center of the view.
Files leading into the selected file are referenced on the left of the
selected file.
Files leading away from the selected file are referenced on the right of
the selected file.
Note: Files can link to themselves: Bookmarks (Internal Links) will be

displayed as links to a file icon with the same name.
268
Web View
The web view display shows the link structure of your project as if it were
sliding on the surface of a sphere. It is called the web view because it
looks like a web, and also because it most closely resembles the way that
surfers will navigate your site.
The Web View is based on the home page, and all the links relative to that
home page, and outward from the links on that home page. The Web
View will only display links that go outward from the home page.
Pocket View
The Pocket View allows you to see and manage Pockets, which are
collections of files that you define. Pockets are commonly used for To Do
lists within a project. For example the Site Doctor will allow you to put
information like Broken Links, and Orphan files into the Pocket.
269
Right Click Menus & Functions

The {Right Click} pop-up menus offer quick access to standard functions
of all windowpanes as well as the unique functions associated with
individual panes and views. Sample {Right Click} menu from the Web
View:
This popup menu allows you to

control Docking settings for the window
edit the file
view it in a browser
change the font that is used in the panel
fix broken links (active when the selected document is a broken link)
show HREF links only
show the information contained in the title element of the document
instead of the document name this is a toggle
show multiple links from one file to another
display the properties of the file.
270
Review Questions
1. Why would you use the site management tools?
2. What different views can you use in the Project Tab?
3. What is the pocket used for?
4. Where can you see your broken links?
271
Summary
272
Define, Create and Open a Project.
Use the Asset Manager toolbar.
Understand the Page Links, Web and Pocket Views.
Use the Views Toolbar to Control Views.
21
Using Site Management Tools to
Manage a Web Site
In this chapter you learn how to use the site management tools of
HoTMetaL PRO to manage the content and links within your web site.
Objectives
1. Create new Folders, and import content into a Project.
2. Create links by dragging and dropping.
3. Manage files and links between files; move files, copy files, delete files,
rename files.
4. Find and Replace content across multiple pages.
5. Perform Site Management Operations; Find Broken Links, Repair
Broken Links, Test External Links, Find Orphan Files.
6. Create a Project Summary.
7. Sort, Save and Distribute Project Summary Information.
Prerequisites
273
Creating a New Folder

To create a new folder in the current project folder {Click} in the content
pane of the Project tab and choose New Folder from the File Menu or
{Right Click} in the content pane and select New Folder from the pop up
menu.
This creates a new, empty folder, which is displayed in both panes of the
Project tab. You can give the new folder a name when you create it, or
you can {Right-Click} on the folder icon later and choose Rename from the
pop-up menu.
HoTMetaL Tip
Creating a new folder is a good thing to do before importing content into
your existing site. You can create the new destination folder for the
content being imported.
274
Importing Content
To add an existing HTML page (and some or all of the pages linked to that
page) to a project, use the Import Site... command. This is useful when
you want to expand your current project in some way, or merge two or
more sites into a single project.
This can be very handy when asked to add content that another author
has created.
Import Site
To import an existing HTML file or site:
Have a project open.

Choose Import Site... from the Project menu.
Select the root page of the site that you want to import from the Open
dialog box that appears.
275
When you have selected the home page, the Import Site dialog box
appears.
The structure of the site that you are importing is shown in a view similar
to the Web View. In this dialog box, you must specify:
1. The level of associated files that you want to import.
2. The destination folder for the imported site.
3. Whether you want to import all files or selected files.
276
Choose a Destination
Choose the destination folder (that is, the project that you want to copy the
files to) by either entering the path to that folder in the Import Destination
text box, or {Clicking} on Browse... to navigate to the folder.
Level Selection
You can select the number of levels of files linked to the main file that you
want in the site that you're importing. By {Clicking} on the Number of levels
displayed control, you can choose the number of levels, from 0 (just the
home page) to the maximum in the site. The level control will only go up to
the maximum number of levels in your site (which, if you're just importing
one file that's not linked to any other file, will be zero). {Clicking} on Map
Now will redisplay the site to the selected level of files.
Note: Only links to local files are displayed in the `Import Site' dialog. If
there is a link to an external site, that page will not be displayed or
imported.
Content Selection
You can import all of the files linked to the root pageto the maximum
number of levels or to a selected levelor select individual files.
To import all of the linked files:
Turn on All Visible Levels at the bottom of the Import Site dialog box.
Use the Number of levels displayed control to show as much as you
want to import: a number less than the maximum number of levels or
the maximum number of levels if you want to import all the files
{Click} on OK.
277
To manually select which files you want to import:
{Click} on the control at the bottom of the Import Site dialog box and
choose Selected Files Only.
{Click} on a file in the Web View of the Import Site dialog box. As soon
as you {Click} on a file, all other files become deselected. The file you
are {Clicking} on remains selected.
To select additional files, hold down the Control key and {Click} on the
file icons.
To re-select all visible files in the site, {Click} on All Visible Levels at the
bottom of the dialog box and use the Number of levels displayed control
to show as much as you want to be imported.
When you have chosen both the files to import and their destination folder,
{Click} on OK in the Import Site dialog box; the files you have selected will
be copied to the specified folder. If you choose a file that is linked to files
in subfolders, the same file and folder structure will be re-created in the
new location. You will be warned of any name conflicts with existing files
and folders and given the chance to cancel the site importing if that
occurs. The site management functions will rebuild the views to show the
new HoTMetaL PRO files that you have imported.
Note: A file imported into your project might not have any links to other
files in your project. You may need to add links that point to the new file in
order to make it part of the link structure of the HoTMetaL PRO project.
You can do this by editing files, or by dragging and dropping files to create
links.
278
Creating Links by Dragging and Dropping

You can create links by dragging a file in the Contents pane onto another
file in the Web View window. The Site Doctor will appear, asking you if you
want to create a link in the file that you are dragging, to the file that you
are dropping onto.
The link that you create by dragging and dropping will be inserted at the
very top of the document; the initial hot text will be the text in the TITLE
element of the file you are linking to. If you want to change the hot text or
position of the link, edit the file using the HoTMetaL PRO Editor.
279
Managing Files and Links Between Files

You can cut, copy, paste, delete and rename files in using the site
management functions of HoTMetaL PRO. The Site Doctor will keep track
of and maintain the links in your site.
You can move files much as you would in Windows Explorer, by dragging
and dropping files and folders. The Site Doctor keeps track of hyperlinks
between files, and will update the links as appropriate when you move or
rename a file so that the links don't become broken.
280
Moving Files
To move one or more files by dragging and dropping:
Select the files and drag them to their new location within the Project
tab only.
To move one or more files by cutting and pasting:
Select the files and then either choose Cut from the Edit menu or
{Right-Click} on the selection in the Project tab and choose Cut from
the pop-up menu that appears. The file icon will become grayed-out in
the Project tab, showing that it has been cut.
Move your mouse cursor to the location in the Project tab where you
want the file moved.
Choose Paste from the Edit menu or {Right-Click} again in the Project
tab and choose Paste from the pop-up menu that appears. (Pasting
again will create more copies of the files.)
When you move files, the Site Doctor dialog box appears, asking you if
you want all of the links that refer to that file in your project to be updated
to refer to the moved file's new location.
You don't have to edit each individual file that is linked to the moved file,
and update URLs based on the file's location; the Site Doctor will do it for
you.
The Project tab will be automatically updated to show the new location of
the files. The display in the Web View will not change if you asked the Site
Doctor to fix the links to the file(s) that you moved.
Note: When you move a file, the links within the file that refer to other
documents are NOT updated; in other words, moving the file will correctly
change the files that refer to the moved file, but may create broken links
within that moved file.
281
Copying Files
To copy one or more files by dragging and dropping:
Select the files, hold down the [Ctrl] key, and drag to the location
where you want them copied in the Project tab only.
To copy one or more files by copying and pasting:
Select the file(s) and then either select Copy from the Edit menu or
{Right-Click} on the selection in the Project tab and choose Copy from
the pop-up menu that appears.
Move the mouse cursor to the location in the Project tab where you
want the file(s) copied.
Select Paste from the Edit menu or {Right-Click} again on the Project
tab and select Paste from the pop-up menu that appears.
Duplicates of the file(s) will be created in the location that you specified.
Pasting again will create more copies of the files. If there is a name
conflictthat is, if you're copying a file to the folder where the original
residesthe name of the new copy will start with Copy of.
282
Deleting Files
To delete one or more files:
Select the files and then either {Right-Click} on the selection in the
Project tab and choose Delete from the pop-up menu that appears, or
select Delete from the Edit menu.
A dialog box will appear, giving you a chance to cancel this deletion. The
Project tab and Web View window will be updated to reflect the file
deletion.
Deleting a file moves it to the Windows Recycle Bin; it is not permanently

removed from the disk until you empty the Recycle Bin. To restore a file
that you have deleted, open the Recycle Bin, right-Click on the file, and
choose Restore from the pop-up menu that appears. The file will reappear
in its previous folder.
Note: Deleting a file can create broken links in your project; use the Web
View and the commands under the `Project' menu to check the link
structure of your project.
283
Renaming Files
You can rename a file in one of three ways:
1. {Right-Click} on the file, and choose Rename from the pop-up menu.
2. Select the file and choose Rename from the Edit menu.
3. {Click} once on the file in the Project tab to select it, and then {Click} a
second time on the file.
The file name will become editable.
Enter a new name for the file.
The change takes effect when you {Click} outside the file name or press
[Enter].
When you rename file(s), the Site Doctor dialog box appears, asking you if
you want all of the links that refer to that file in your project to be updated
to refer to that file's new name. You don't have to edit each individual file
that is linked to the moved file and update URLs based on the file's
location; the Site Doctor will do it for you.
284
Find and Replace across Multiple Documents

HoTMetaL PRO has a powerful search engine that lets you search an
entire project for files containing particular text, and replace that text, if you
wish. You can also find or replace HTML elements or attributes, strings of
HTML text or special header elements (META elements), which describe
your document. The Find and Replace dialog box has four different tabbed
sectionsText, Tag, Meta and URL.
Find
To find text in your project files, Click on the
toolbar button or choose
Find in Files... from the Edit menu. The Find dialog box appears.
Replace
To replace text in your project files choose Replace in Files... from the Edit
menu. The Replace dialog box appears.
285
File Selection
There are several different ways to choose which files you would like to
search in a project.
You can choose Project (all files) from the drop-down list to search in
the entire project.
You can choose Site (linked files) from the drop-down list to search
those files that are linked from the home page (that is, orphan files will
not be searched).
You can choose Selected File(s) to search only the files that are
selected in the project. You can select files in the Project tab in the
same way that you would in Windows.
{Clicking} on a file selects it
Holding down the [Ctrl] key and {Clicking} on a file adds it to the
selection
Holding down the [Shift] key and {Clicking} on a file in a list adds all
the files from that point to the next or previous selected file in the
list.
Search Options
There are three other search options that you can choose, indicated by
check boxes in the Find and Replace dialog boxes:
Find whole words only This will only match words (separated by a
space or carriage return) and not parts of words. For example,
searching for `cab' when this option is checked will match `cab' but not
`cabana'.
Match case When this option is turned on, the search will distinguish
between upper- and lower-case text, and match the case of the search
string that you enter. This has no effect when you search for tags
finding and replacing tags is always case-insensitive.
Use pattern matching Lets you use search patterns to perform
complex searches.
286
Project Maintenance
The Project Menu provides some extremely powerful tools for doing web
site maintenance.
287
Finding Broken Links

A broken link is a link that points to file that does not exist in the specified
location. Users will not be able to navigate broken links; their Web
browsers will return error messages when the page cannot be found. (This
is sometimes called a `dead link'.)
The Site Doctor enables you to fix the broken links and make sure that
they point to pages that actually exist (thereby turning them into `live
links'). To find broken links, choose Broken Links... from the Project menu.
The Site Doctor displays a list of broken links in your project.
From this dialog box, you can:
288
Go to the Site Doctor's Fix broken links dialog by {Double-Clicking} on

the broken link. This lets you change the link so that it points to an
existing file.
Put the broken links into a Pocket, by {Clicking} on Put in Pocket. You
can perform further operations on the broken links once they are
Pocketed.
Fixing Broken Links

Broken links are links that point to files that don't exist. This can happen if
files are moved around without fixing links, for example. Broken links are
displayed in the Web View as file names shown in red.
You can launch the Fix Broken Links Site Doctor dialog box by {RightClicking} on a broken link in the Pocket panel or Web View and choosing
Fix Broken Link from the pop-up menu.
289
The Site Doctor - Fix Broken Links dialog box appears.
The upper part of this dialog box shows a list of files that refer to the
broken link. You can correct the broken link by typing in the correct path in
the text box provided (you can type in either a relative or an absolute
URL), or you can select the file by {Clicking} on Browse....
{Clicking} on Fix changes the broken links to the link that you have
specified. If the replacement link does not point to an existing file, a
warning dialog appears and you will be asked to specify an existing file in
the Site Doctor - Fix Broken Link dialog box. {Clicking} on Cancel closes
the dialog without fixing any links.
290
Testing External Links

An external link is a link outside of your project; for example, a link to a
page on the World Wide Web. These kinds of links are usually specified
by a Uniform Resource Locator (URL) of the form http://... or ftp://....
HoTMetaL PRO can check external links to find whether they are valid;
that is, whether the links refer to `live' locations on the Internet.
The Site Doctor also treats links to files that are on your local drive but
outside your project as external links (that is, URLs that start with file:/// or
relative URLs that point to a file outside the current project; for example,
../../../scratch.htm). The Site Doctor does not validate these types of links
when you choose External links from the Project menu.
Note: You may have to configure your proxy server before you can
perform the operation described below. You also will need to
connect to the Internet (that is, to your Internet Service Provider).
To check external links on your site, choose External Links... from the
Project menu. The Site Doctor starts searching the World Wide Web to
resolve the external links in your project. When the checking is finished,
the Site Doctor - External Links dialog box appears.
291
From this dialog box, you can choose to Pocket all the files containing
external links, or Pocket only the files containing broken external links.
The Pockets will be called Files with External links or Files with External
Broken links, respectively. You can edit those files to remove the broken
links, delete them, etc. {Clicking} on Stop stops the search that is in
progress and returns the current results.
292
Locating Orphan Files

Orphan files, are the files in a project, that aren't linked to any other file in
the project.
Choose Orphan Files... from the Project menu. The Site Doctor - Find
Orphan Files dialog appears.
{Clicking} on Put in Pocket creates a Pocket called Orphan Files

containing the results of the search.
293
Project Summary
You can get a summary of your site by choosing Summary... from the
Project menu. The Project Summary dialog box appears.
294
The Project Summary window displays information about all the files in
your project or you can choose to see details on only the files in your site
by deselecting the Show Orphans option. You can also choose which file
details to display by selecting and deselecting options in the Columns
Shown section.
The Links From and Links To columns show the number of links into and
out of the file, respectively. Images shows the number of images linked to
the file. Download Time shows the number of seconds it would take to
download this file at 28.8K BPS
You can sort the summary by any of these characteristics: {Click} on a
column title to sort and reverse the sort by {Clicking} again. For example, if
you {Click} on the Size column title, the files will be sorted from smallest to
largest. {Clicking} on the column title again sorts the files from largest to
smallest.
You can change the size of any of the columns by dragging the borders
between the column titles. You can resize the dialog box by dragging the
resize corner in the lower right corner of the dialog box. {Click} on OK to
dismiss the dialog box.
The Project Summary offers you options to save the summary information
as a text file or as an HTML file.
Once saved the summary information can be shared with other project coworkers.
295
Review Questions
1. Why would you use the Site Doctor features to manage a web site?
2. What is the Site Doctor?
3. How do you find your broken links? How do you repair your broken
links?
4. How do you add the content created by another author to your site?
5. How do you replace content across the web site?
6. What functionality does the Pocket window serve?
7. What save options do you have with the project summary?
296
Summary
Create new Folders, and import content into a Project.
Create links by dragging and dropping.
Manage files and links between files; move files, copy files, delete files,
rename files.
Find and Replace content across multiple pages.
Perform Site Management Operations; Find Broken Links, Repair

Broken Links, Test External Links, Find Orphan Files.
Create a Project Summary.
Sort, save and distribute project summary information.
297
22
Publishing a Web Site with
HoTMetaL PRO
In this chapter you will learn how to use HoTMetaL PRO to publish your
web site.
Objectives
1. Complete the Pre Publishing Procedures of Finding and Replacing
URLs and Changing to relative URLs.
2. Configure a Site for Publishing.
3. View Remote Files in the Asset Manager.
4. Publish files to Remote Sites (Synchronize).
5. Work with Remote Files.
6. Test and Troubleshoot your Site.
Prerequisites
298
Pre Publishing Procedures

There are a few things that should be done prior to actually publishing a
site.
1. Changing URLs for the Web, either Complete or Relative.
2. Configuring various settings to enable publishing and editing files on
the web server.
Changing your URLs for the Web
Before a completed HTML document is moved to a WWW server, all
URLs should refer to documents that are available on some WWW server.
(While the document is being created, they may refer to documents on
your local system.)
For the most part, links in your HTML pages will have relative URLs, which
won't be a problem on the WWW. However, in some cases (for example,
when you create links to an unsaved document or copy and paste links
from other documents), your links may have absolute URLs that start with
file:///. These links are not accessible over the WWW:
file:///c|/rodney/orwell/homage.htm
When the document is placed on your server, you must substitute URLs
that refer to documents that are available on your server or some other
server. For example:
http://www.sq.com/orwell/homage.htm
NOTE: HoTMetaL PRO will create relative URLs by default as long as the
document you are working in has been saved. If the document has not
been saved, temporary URLs of the type file:/// will be created and then
changed to relative URLs when the file is first saved. This helps to avoid
most circumstances where absolute URLs of the wrong type get created.
299
Changing to Complete URLs

In the HoTMetaL PRO Editor, the Find and Replace URLs... command in
the Edit menu gives you the opportunity to edit all the URLs, modifying
them if necessary.
To find and replace URLs:
300
Launch the HoTMetaL PRO Editor.

Open the document that you want to search for URLs to replace.
Choose Find and Replace URLs... from the Edit menu.
A dialog box will appear containing two text boxes.
The first field (labeled Change URLs From:) contains a part of the URL
that you want to change; the second field (labeled To:) contains the text
that you want to change it to. You can enter text in these boxes to replace
the default text.
If there were a large number of URLs for which you needed to change a
local folder such as file:///c|/rodney to a server address, such as
http://www.sq.com, you could enter:
file:///c|/rodney
in the Change URLs From text box, and:
http://www.sq.com
in the To text box.
When you {Click} on Find Next, HoTMetaL PRO finds the next element
that has a URL matching the Change URLs From text. The insertion point
is placed inside that element and the document scrolls to its location. The
search starts at the insertion point or selection.
{Clicking} on Replace will change the text you're searching for to the text
in the To box.
{Clicking} on Replace All will make this change for all URLs in the
document that contain the Change URLs From text. This also dismisses
the dialog box. (The number of replacements is shown in the status bar at
the bottom of the HoTMetaL PRO Editor window.)
This form of `find and replace' matches only starting at the first character
of the URL.
301
Changing to Relative URLs

You can change your URLs so that they are in relative rather than
absolute form. What this generally involves is deleting the first part of all
URLs; that is, the scheme, the host, and perhaps part of the path.
For example, if your current links were all of the form
file:///c|/rodney/orwell/file.htm and you wanted to put them in a directory on
the Web, it could be useful to put them in relative form, if all your files were
in a flat directory on your web site.
In the Change URLs From text box, you would type
file:///c|/rodney/orwell.
You would not type anything in the To text box.
The effect of that changing URLs operation would be to strip the scheme,
host, and most of the path, and leave you with file.htm for all your URLs.
Changing URL operations could also add `./' and `../' to the beginnings of
your URLs (these are the abbreviations for `look in this directory' and `go
up one directory level', respectively), change all URLs to a different subdirectory on the same site, etc.
302
Site Wide Changes to URLs

The Find and Replace operations described so far are restricted to
working on a file by file basis. To perform similar operations across files in
your site or in your complete project you would choose the Replace in
Files option from the Edit Menu.
Selecting the URL tab of the replace dialog box provides the Find and
Replace fields to specify the URL information and also allows you to
choose from: Selected files only, Site (linked files) or Project (all files).
These URL Find and Replace operations look only in attributes, not text
and they are restricted to attributes that correspond to URLs such as
HREF of A, SRC of IMG.
303
Configuring a Site for Publishing

Publishing means moving your documents to a server so that other web
clients can have access to your pages. The publishing component of
HoTMetaL PRO lets you publish some or all of your files to a remote
server. In HoTMetaL PRO 6.0 the process of publishing is called
Synchronization.
Before you can synchronize or work on remote files you must define a
remote site. Once you have specified the destination server for your
documents, and how to connect to it, the synchronization features of
HoTMetaL PRO will deliver the files to the location you specify, and allow
you to further edit and manipulate those files on the remote server.
Site Properties
The Site Properties dialog box allows you to create and configure sites by
supplying information about FTP, Firewall, HTTP, Mappings and Filters
settings.
To launch the Site Properties dialog box {Click} on the Tools Menu and
choose Sites or open the Asset Manager, {Click} on the Remote Tab,
{Right Click} on the FTP Neighborhood icon and choose Add Site.
Note: If you are working with a Project you can select the Properties
option under the Project Menu and bring up the dialog box from there.
304
Site Name
You can create multiple sites that you want to publish files to. For each
site you need to assign a name and then you can make the detailed
settings particular to that publishing destination. To assign a site name
{Click} on New Site in the Site Properties dialog box.
Enter a name related to what that site represents to you and {Click} OK.
Once you have a site or sites created you can select a site from the Site
Name drop down box and then make settings for that destination.
There are required fields on the FTP General Tab to allow publishing.
After that the information on the other tabs is only required in certain
environments or if you wish to take advantage of certain remote editing
features.
305
FTP General Tab
The fields for Host Name, UserID and Password will require information
from you. Your hosting provider will supply this information to you. The
other fields provide you with optional settings:
Account supplied by your hosting provider if required

Startup Folder restricts this site to part of a larger site
Remote Port default is 21
Simultaneous connections increases number of connections used
for file transfer. You can try 2 or 4 but the host server may only
allow a single connection, in which case you will receive an error
message.
Network Timeout controls the amount of time that HoTMetaL
PRO will wait while trying to establish a connection with the server
Idle Disconnect sets the amount of time to wait before HoTMetaL
PRO will disconnect from the server if there is no FTP activity.
Passive Transfers may be required by some firewalls
FTP Firewall Tab

Settings in this area will only be required if you must connect through a
firewall. Your network administration department should supply the
information required for the various fields.
306
HTTP Tab
Settings on this tab allow you to configure a site so that you can open a
file in the HoTMetaL PRO editor by dragging it from the browser and
dropping it on the editor window.
The field for Host name is required to enable the drag & drop feature.
UserID and Password would only be required if the address specified in
Host Name is password protected.
Some organizations route their access through one machinecalled the
gateway or proxy machinefor security reasons. In order to access the
Internet in these environments, you must configure your Internet software
with the address of the proxy server. The proxy serverwhich is directly
connected to the Internettakes Internet requests and sends them out on
the Internet, returning the responses to your computer.
Normally you can inherit proxy settings automatically by selecting Use
Window Settings. If not, you may need to ask your system administrator
for the host and port information.
307
Mappings Tab
Settings on this tab will allow you to configure a site that uses root
relative URLs for local links. Root relative local links will start the path
information, for the URL, from the root directory; the path information will
start with a slash. Mappings are required in some environments. In those
cases the server must be set up to use server aliases.
To input server mapping information {Click} on the New Entry button on
the Mappings Tab and fill in the required fields.
308
The information in these fields makes associations between FTP servers,

HTTP servers and local folders.
HTTP enter the path to the site relative to the server root. If you
wanted to specify the whole site you would just enter a slash /.
FTP specify the directory for synchronization relative to the
startup folder.
Path physical location of the local files for synchronization. You
can set this path by browsing to the local folder.
Once settings are made on the Mappings Tab the HoTMetaL PRO editor
will automatically convert the URLs in all the files within and below the
specified local folder. Any new local links that are created will also be
written as root relative.
The mappings settings can also be edited by selecting an entry in the
Mappings Tab and {Clicking} on the Edit Entry or Delete Entry button.
309
Filters Tab
Settings on this tab allow you to configure a site that will automatically
exclude certain files from the synchronization process.
You can easily create an exclusion list by file type or you can exclude
specific files by name and file extension. You can also choose not to
publish orphan files by selecting Dont synchronize orphan files.
310
Viewing Remote Files

When you define a remote site the files and folders in the directory
structure that you have access to will be visible in the Remote Tab of the
Asset Manager window. You will be able to view, edit and synchronize
these files in much the same manner that you work with local files.
NOTE: If you are working with an NT web server, running IIS, the directory
format settings need to be changed to UNIX FTP directory instead of the
default windows directory style. You will need to ask your web server
administrator to make this change for you.
311
Publishing Files to Remote Sites

HoTMetaL PRO provides you with several methods for copying files from
your local system to any site you have defined. This process is called
synchronizing or is often referred to as publishing.
Synchronize from a Project
If you choose to utilize the site management features that were discussed
last chapter you also have the ability to synchronize your project with a
remote site. The advantage of using this method is that forming a project
enables you to manage orphan files.
To synchronize from a project:
312
Open a project in HoTMetaL PRO

Choose Properties from the Project Menu and select one of the remote
sites you have defined as the publishing destination.
Choose synchronize from the Project Menu
The Remote Synchronization dialog box will appear with the Remote
Directory and the Local Directory fields already specified.
Choose the Synchronization Direction

o Local -> Remote to copy new and changed files up to the web
server
o Local <- Remote to copy newer files from the web server to your
local directory
o Local <-> Remote updates both local and remote with the
newest versions of the files
Make desired settings for Options

o Delete files not in source means that the synchronization
process will remove files from the destination if those files do
not exist at the source.
o Only update existing files in destination will not copy new files
over, only changed files.
o Force update of destination will update the destination with all
selected files regardless of which files may be new and or
changed.
Make desired settings for File Filters

o Skip Orphans will deselect orphan files from the files to be
copied.
o Skip Patterns will deselect files based on the files types that you
may have set up on the Filters Tab when you defined the site.
NOTE: Synchronization evaluates files based on their time stamp (when

they were created or last changed). By default HoTMetaL PRO will only
copy files that are new or are newer than other versions in the destination
location.
313
314
If you want to view the synchronization log without copying files you
can select, Dont carry out actions, generate log only. This will allow
you to see exactly what will happen when you synchronize. If you
choose this option, the Remote Synchronization dialog box will still be
active when you close the log so that you can proceed to actually
publish your files.
When you are ready to publish {Click} the Synchronize button.
The Synchronization Files dialog box will appear with the listing of files
to match the criteria you have specified. You can select or deselect
files in this dialog box. When your choices are finalized {Click} OK to
copy the files.
A dialog box updates the progress of the file transfers. When the files
have been published you are given the opportunity to view the
synchronization log.
Synchronize Without a Project

It is not necessary to create or open a project to be able to synchronize
local files with a remote site that you have defined. The use of a project
makes it easier to deselect orphan files. If you want to publish without
using a project:
Select the Remote Tab in the Asset Manager

{Right Click} on the desired remote folder in the FTP Neighborhood
Choose Synchronize from the pop up menu
The Remote Synchronization dialog box appears and you can proceed
to publish as before except that in this case you will need to specify the
local folders to synchronize with the remote site.
NOTE: The Skip Orphans option is not accessible because orphans are
determined by forming a project.
Synchronize by Dragging and Dropping
You can copy a file to a remote site without using the synchronization
procedure. If you select a file on the Desktop Tab of the Asset Manager
you can {Click} and drag it onto the Remote Tab. When you release it onto
the Remote tab the file will be copied to the remote site.
NOTE: The connection needs to be active when you perform the drag and
drop and using this method ignores timestamps on the files and forces the
update of the remote site.
315
Working With Remote Files

The Remote Tab of the Asset Manager allows easy access to your remote
files such that you can directly open, edit and save files without working on
a local copy and transferring a changed file to the server. This live editing
of files can allow you to make quick updates but you must always proceed
cautiously, taking into account that you may not have a backup copy of the
file.
Opening Files
There are three methods for opening a remote file in the HoTMetaL PRO
editor. You must have a remote site active in the Remote Tab of the Asset
manager.
1. {Right Click} on a file in the bottom pane of the Remote Tab and
choose Edit File from the pop-up menu.
2. {Double Click} on a file in the bottom pane of the Remote Tab
3. Select a file in the bottom pane of the Remote Tab and {Click} and
Drag the file onto any other part of the HoTMetaL PRO editor.
NOTE: If you drop the file onto an open file in the editor HoTMetaL PRO
will create a link to the file instead of opening it.
When you open a remote file that file and linked files are copied to your
local system and stored in a temporary folder. You can specify the
temporary folder to use by choosing Tools Menu Options General Tab.
Editing Files
You would edit remote files in exactly the same way that you edit local
files. All of the editing features of HoTMetaL PRO, including the intelligent
drag & drop features of the Asset Manager, are supported while editing
remote files.
Saving Files
When you choose to save a file that you have made changes to
HoTMetaL PRO will automatically try to save all of the image files that
were linked in the original file. The list of files will be presented in the
Synchronize Files dialog box, which allows you to select or deselect files
from the synchronization procedure.
316
Post Publishing Procedures

FTP Logs
Each time that you establish a connection with a remote site the FTP log
records what happens during the connection process and any file
transfers. This information can be useful for trouble shooting in the event
there are any problems with publishing.
To view the log you can {Click} on the View FTP Log button on the Asset
Manager Toolbar.
Test, Test, and Test again!

You want your site to function properly for your visitors. You should testdrive the site yourself to make sure everything is working. The
professional web developers use staging server to test the site before they
take it live on the Internet, because they want to eliminate as many
problems before hand as possible.
317
Review Questions
1. Why do you need to modify some URLs before publishing your site?
2. Why do you need to configure a Remote site?
3. If you need to use root relative URLs in your site where will you make
settings to enable that feature?
4. What is the advantage to synchronizing from a project?
5. Describe what happens if you select the Local <-> Remote

synchronization direction.
6. What tool can help with troubleshooting?
7. Should you test your site after publishing it?
318
Summary
Complete the Pre Publishing Procedures of Finding and Replacing

URLs and Changing to relative URLs.
Configure remote sites
Synchronize from Projects
Synchronize without Projects
Synchronize by dragging and dropping
Work with remote files
Test and troubleshoot your site
319
Index
Accessibility.......................................24
ActiveX .............................................230
Class ID............................................230
Codebase ........................................232
ID.......................................................231
Address <ADDRESS>
</ADDRESS> ...............................58
Alignment ..................................56, 104
Alignment, <CENTER> ...................56
Alignment, <DIV> .............................56
Alignment, <TABLE> .......................56
Alignment, Image Alignment...........88
Anchor, <A> </A>.............................74
Applet: <APPLET></APPLET> ....221
Asset Manager................................253
Asset Manager.........................90, 269
Asset Manager Toolbar .................272
Assets...............................................254
Assets - adding ...............................255
Attributes..............................................3
Basefont <BASEFONT>
</BASEFONT> .............................58
Big <BIG> </BIG> ............................57
Blink: <BLINK></BLINK> ..............179
Blockquote <BLOCKQUOTE>
</BLOCKQUOTE> .......................58
BMP ....................................................86
Body, <BODY> </BODY> ...........4, 31
Bold <B> </B>...................................51
Bookmarks.........................................75
BORDER: Image Border" ................89
BORDER<FRAMESET> ...............131
BORDERCOLOR<FRAMESET> .131
Break: <BR>......................................43
Browsers ..........................................187
Bug Fixes .........................................242
Cascading Style Sheet Editor.......196
CGI....................................................155
CGI Scripts ......................................155
Choosing a Destination.................283
Citation <CITE> </CITE> ................52
Classes ............................................202
Clicking, Right .................................275
Code: <CODE></CODE> ...............57
Collapsible Tags: +, - .......................18
320
Color Depth .....................................185

COLS: <FRAMESET> ...................131
Column: <COL>..............................112
Comments ..............................223, 234
Comments .........................223
Content Selection ...........................283
Content, Importing ..........................281
Copying Files ..................................288
CSS Cascading Style Sheets ...194
CSS, Cascading and Inheritance.207
CSS, Classes..................................202
CSS, DIV and SPAN......................206
CSS, Embedded Style Sheets .....197
CSS, IDs ..........................................203
CSS, Inline Styles...........................195
CSS, Linked Style sheets .............199
Definition Element: <DFN></DFN>
.........................................................57
Definition List: <DL></DL>..............67
Definition Term: <DT> .....................67
Deleting Files ..................................289
Designing a Web Site ....................261
Directory Lists: <DIR></DIR> .........68
Directory Structure .........................262
DIV,<DIV></DIV> ...........................206
Divisions: <DIV></DIV>.................189
Docking Windows .............................11
Document Size ...............................186
Document Standards .....................263
Document Type: <!DOCTYPE> .....30
Download Time ...............................186
Editor, Assets View ..........................12
Editor, Desktop View .......................13
Editor, Preferences ..........................21
Editor, Tips ..........................................9
Editor, View .......................................10
Editor, Views .....................................16
Element................................................3
Elements, Attribute Inspector .........34
Elements, Attributes .........................34
Elements, Inserting ..........................33
Elements, Removing ........................35
E-mail .................................................78
Embedded Style Sheets................197
Emphasis <EM> </EM> ..................51
Index
External Links ...................................74
Files - .hpp .......................................270
Files, Copying .................................288
Files, Deleting .................................289
Files, Locating Orphan ..................299
Files, Moving ...................................287
Files, Renaming ..............................290
Find ...................................................291
Find, File Selection.........................292
Find, Search Options .....................292
Folder, Creating New.....................279
Font: <FONT></FONT> ..................54
Form, Elements ..............................147
Format Menu.....................................53
Forms, <FORM> </FORM>..........145
Forms, File Upload.........................150
Forms, Hidden values....................148
Forms, Select..................................153
Forms, Select options ....................154
Forms, Text area ............................152
Forms, Text boxes .........................147
Four-Tier Web Application
Development ...............................158
FRAMEBORDER<FRAMESET> .131
Frames .............................................127
<FRAMESET> </FRAMESET> ...130
Frames, <FRAME> </FRAME> ...132
Frames, <NOFRAMES>
</NOFRAMES> ..........................134
Frames, Architecture .....................128
Frames, Creating ............................129
Frames, Editor ................................137
Frames, Special Targets ...............136
Frames, Targets .............................135
FRAMESPACING<FRAMESET> 131
FTP .....................................................77
GIF ......................................................85
Gopher ...............................................78
Head, <BASE> </BASE>................31
Head, <HEAD> </HEAD>...........4, 31
Head, <ISINDEX>............................31
Head, <LINK> </LINK> ...................31
Head, <META> .................................31
Head, <SCRIPT> </SCRIPT> ........31
Head, <STYLE> </STYLE>............31
Head, <TITLE> </TITLE> ...............31
Headings, <Hx> </Hx> ....................40

HEIGHT: Image Height ...................89
Horizontal Rule, <HR>.....................44
Hot List - Using ...............................244
HSPACE: Image...............................89
HTML Validation ...............................24
HTML, <HTML> </HTML> ................4
HTTP ..................................................77
HTTP Specification ........................187
Hypermedia .........................................2
Hypertext .............................................2
IDs.....................................................203
Image - thumbnails .........................252
Image Explorer ...............................252
Image Explorer drag & drop ......252
Image Maps.......................................92
Image Maps, <AREA>.............. 93, 96
Image Maps, <MAP> </MAP> .......93
Image Maps, Client-side .................93
Image Maps, Server-side ................92
Images, <IMG> .................................87
Images, Using as Links ...................91
Importing Content..........................281
Importing, Choosing a Destination
.......................................................283
Importing, Content Selection ........283
Importing, Level Selection.............283
Inline Styles .....................................195
Input: <INPUT> ...............................147
Inserting, Elements ..........................33
Intelligent Insertion .........................255
Internal Links .....................................74
Intranet Application Development
Architecture .................................156
Italic <I> </I> .....................................51
Java ..................................................221
Java, <APPLET> </APPLET>......221
Java, <PARAM> .............................222
JavaScript........................................223
JPEG..................................................86
JPG.....................................................86
KBD: <KBD></KBD>.......................57
Level Selection ...............................283
Line Break .........................................43
Linear Media .......................................2
Link: <LINK></LINK>.......................31
321
Index
Linked Style Sheets .......................199
Links, Between Files ......................286
Links, Color .......................................79
Links, Creating by Dragging and
Dropping ......................................285
Links, Finding Broken....................294
Links, Fixing Broken.......................295
Links, Internal, Creating ..................75
Links, Local, Creating ......................76
Links, Testing External..................297
List Item: <LI> ...................................65
List Item<LI> </LI> ...........................65
Lists, Definition List <DL> </DL> ...67
Lists, Nesting.....................................69
Lists, Ordered List <OL> </OL> .....66
Lists, Other Lists <DIR>, <MENU>68
Lists, Unordered List <UL> <UL> ..65
Local Links.........................................74
Macros..............................................245
mailto ..................................................78
MARGINHEIGHT: <FRAME>.......133
MARGINWIDTH: <FRAME>.........133
Marquee, <MARQUEE>
</MARQUEE>.............................179
Menu: <MENU></MENU> ..............68
Menu Items........................................21
Meta ..................................................176
<META>...........................................176
Moving Files ....................................287
NAME: <FRAME> ..........................132
NBSP..................................................42
New Folder ......................................279
News...................................................77
NOFRAMES:
<NOFRAMES></NOFRAMES>
.......................................................134
NORESIZE: <FRAME> .................133
Object: <OBJECT></OBJECT> ...230
Option: <OPTION></OPTION> ...153
Ordered List: <OL></OL> ...............66
Page Layout ....................................188
Page Layout Guidelines ................188
Page, Properties...............................32
Paragraph, <P> </P>.......................42
Parameter: <PARAM> ...................222
PCX ....................................................86
322
PERL ................................................155
Pixels ..................................................44
PNG ....................................................86
Preformatted Text <PRE> </PRE>51
Project ..............................................268
Project Tab ......................................269
Project Tab, description.................272
Project Views ..................................273
Project Views, Links View.............273
Project Views, Pocket View ..........274
Project Views, Toolbar...................273
Project Views, Web View ..............274
Project, creating new .....................269
Project, Definition ...........................269
Project, Maintenance .....................293
Project, opening existing ...............271
Project, Summary...........................300
Publishing ........................................318
Publishing - naming conventions .262
Publishing, Changing to Complete
URLs.............................................306
Publishing, Changing to Relative
URLs.............................................308
Publishing, Configuring for............310
Publishing, Post publishing
procedures...................................323
Publishing, Pre publishing
procedures...................................305
Publishing, Site Wide Changes to
URLs.............................................309
Publishing, Web Site ......................310
Remote Tab.......................................14
Editing Files.....................................322
Saving Files .....................................322
RemoteTab: Opening Files ...........322
Renaming Files ...............................290
Replace ............................................291
Replace, File Selection..................292
Replace, Search Options ..............292
Root Page........................................270
ROWS: <FRAMESET> .................130
Rules File - updates .......................242
Sample Output: <SAMP></SAMP>
.........................................................57
Screen Resolution..........................185
Script <SCRIPT> </SCRIPT> ......234
Index
Script, <SCRIPT> </SCRIPT> .....223
SCROLLING: <FRAME>...............133
Simple CGI Program......................156
Site: Import ......................................281
Site Design Factors........................190
Site Layout and Navigation...........190
Site Management ...........................268
Site Name ........................................311
Site Properties ................................310
Small <SMALL> </SMALL>............57
Sound ...............................................178
Sound, <BGSOUND>....................178
Sound, <EMBED>..........................178
SPAN, <SPAN></SPAN> .............206
Special Characters .................... 52, 56
SRC: <FRAME> .............................132
Strike <STRIKE> </STRIKE>.........57
Strong <STRONG> </STRONG> ..51
Style: <STYLE></STYLE>............197
Subscript <SUB> </SUB>...............57
Superscript <SUP> </SUP> ...........57
Symbols .............................................56
Synchronizing .................................318
Table Data: <TD></TD>................101
Table Header: <TH></TH> ...........101
Table Row: <TR></TR> ................101
Tables, <TABLE></TABLE>.........101
Tables, Attributes ..................103, 104
Tables, Caption <CAPTION>
</CAPTION> ...............................106
Tables, Header <TH> </TH> ........107
Tables, Inserting .............................102
Tables, Properties ..........................109
Tags......................................................3
Teletype <TT> </TT> .......................52
Telnet..................................................78
Templates ...............................121, 264
Text Area:
<TEXTAREA></TEXTAREA>..152
Text Color <FONT></FONT> .........51

Text Size <FONT></FONT>...........51
Three-Tier Application Development
.......................................................157
Thumbnails ......................................272
TIFF ....................................................86
Title: <TITLE></TITLE>...................31
Toolbars .............................................22
Toolbars - creating .........................248
Toolbars - customizing ..................247
Toolbars - deleting .........................249
Toolbars - resetting ........................247
Toolbars, Customizing .....................23
Toolbars, Formatting ........................51
Toolbars, Functions .........................24
Toolbars, Moving ..............................23
Toolbars, Preview.............................25
Toolbars, Quick Tools ......................51
Toolbars, Selecting ..........................22
Toolbars, Standard...........................24
Toolbars, Table ...............................108
Underline <U> </U> .........................51
Unordered LIst: <UL></UL> ...........65
URL.............................................. 74, 77
URL Hot List ....................................243
Value ....................................................3
Variable Text: <VAR></VAR> ........57
VBScript...........................................234
Version, Updating, Patching .........242
Views, Page Preview View .............20
Views, Source View .........................17
Views, Tags On View.......................18
Views, WYSIWYG View ..................19
Views, WYSIWYG-Frames View ...19
VSPACE: Image ...............................89
Web objects.....................................254
WIDTH: Image Width.......................89
323

Learning HotMetal Pro 6 - 132

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learning HotMetal Pro 6 - 132

Uploaded by

Copyright:

Available Formats

Copyrights and Trademarks

No part of this document may be reproduced, stored in a retrieval system, or

Copyright 1999 by XtraNet

Copyrights and Trademarks

Copyright 1999 by XtraNet

Chapter 2 - Overview of the HoTMetaL Editor ............................................................7

Document Windows .......................................................................................................... 15

Editor Preferences ............................................................................................................ 21

Toolbar Functions ............................................................................................................. 24

Chapter 3 The Anatomy of an HTML Document ...................................................29

Chapter 4 - Headings, Paragraphs, Breaks and Horizontal Rules.........................39

Chapter 5 - Character Formatting ................................................................................49

SoftQuad HoTMetaL PRO Training

Additional Character Formatting Elements.......................................................................... 55

Chapter 6 - Lists .............................................................................................................62

HoTMetaL Tip .................................................................................................................. 66

Chapter 7 Anchors and URLs ...................................................................................71

Link Colors ....................................................................................................................... 77

Chapter 8 Images and Image Maps.........................................................................82

Limited Support or Non-Supported Image Formats ............................................................. 84

How to create a Client-side Image Map.............................................................................. 92

Chapter 9 - Tables .........................................................................................................98

SoftQuad HoTMetaL PRO Training

HoTMetaL Tip ................................................................................................................ 103

Exercise Add and customize a table .............................................................................. 112

Chapter 10 - Converting Legacy Documents and Using Templates....................115

Frame Editor .................................................................................................................. 134

Chapter 12 - Forms ......................................................................................................140

HoTMetaL Tip ................................................................................................................ 142

Common Gateway Interface - CGI ................................................................................... 151

Chapter 13 - Special Elements ..................................................................................171

SoftQuad HoTMetaL PRO Training

Adding sound to an HTML page....................................................................................... 174

Marquee ........................................................................................................................ 175

Chapter 14 - Page Layout and Design Considerations ..........................................180

Page layout .................................................................................................................... 184

Site Design Factors and Criteria ...................................................................................... 186

Chapter 15 - Cascading Style Sheets .......................................................................189

Creating Classes and IDs ................................................................................................ 199

Chapter 16 - JAVA and JavaScript Introduction......................................................215

JavaScript ...................................................................................................................... 218

Chapter 17 - ActiveX Objects and VBScript introduction.......................................224

SoftQuad HoTMetaL PRO Training

Chapter 18 - High Speed Publishing .........................................................................236

Review Questions ........................................................................................................... 253

Chapter 19 From Web Pages to a Web Site ........................................................255

Chapter 20 Site Management Overview ...............................................................262

Chapter 21 Using Site Management tools to Manage a Web Site ..................273

Creating Links by Dragging and Dropping ........................................................................ 279

Find and Replace across Multiple Documents................................................................... 285

Project Maintenance ....................................................................................................... 287

SoftQuad HoTMetaL PRO Training

Project Summary ............................................................................................................ 294

Chapter 22 Publishing a Web Site with HoTMetaL PRO ...................................298

Changing to Complete URLs ........................................................................................... 300

Site Wide Changes to URLs ............................................................................................ 303

Viewing Remote Files ..................................................................................................... 311

SoftQuad HoTMetaL PRO Training

SoftQuad HoTMetaL PRO Training

SoftQuad HoTMetaL PRO Training

What is HTML Markup?

Most HTML elements have more than one attribute.

SoftQuad HoTMetaL PRO Training