Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail: info@xnu.com
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail: info@xnu.com
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
Table of Contents
Symbols Toolbar ..................................................................................................................................................... 54
Table of Contents
Table Attributes..................................................................................................................................................... 101
Table Captions ...................................................................................................................................................... 103
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
Table of Contents
Description............................................................................................................................................................ 172
Keywords .............................................................................................................................................................. 172
Author.................................................................................................................................................................... 173
Company............................................................................................................................................................... 173
Copyright............................................................................................................................................................... 173
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
Review Questions ........................................................................................................... 234
Summary ....................................................................................................................... 235
Table of Contents
Testing External Links ........................................................................................................................................... 291
Locating Orphan Files ........................................................................................................................................... 293
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.
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?
Summary
As a result of this chapter, you should be able to
Define HTML
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
Upon completing this section, you should be able to
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
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".
10
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:
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
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
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
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
20
Editor Preferences
The Options command in the Tools menu of the HoTMetaL PRO Editor
gives you access to preference settings.
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.
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.
23
Toolbar Functions
Standard Toolbar
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?
27
Summary
As a result of this chapter, you should be able to
28
3
The Anatomy of an HTML Document
In this chapter you will learn about HTML and basic document structure.
Objectives
Upon completing this section, you should be able to
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.
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
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
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:
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.
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
Review Questions
1. Name 4 elements that can be contained inside the HEAD element of a
page?
37
Summary
As a result of this chapter, you should be able to
38
Insert Elements
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
Upon completing this section, you should be able to
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
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
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].
SoftQuad HoTMetaL PRO Training
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]
42
43
44
45
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?
5. How would you insert a HR that is centered and half a page wide?
47
Summary
As a result of this chapter, you should be able to
48
5
Character Formatting
In this chapter you will learn how to enhance your page with Bold, Italics,
and other character formatting options.
Objectives
Upon completing this section, you should be able to
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
The following elements are used primarily to add formatting to inline text:
50
This button will use a FONT element to set the color of the text.
E.g. <FONT COLOR=#RRGGBB>this text has color</FONT>
You can also use the Format Menu option to accomplish most of the same
tasks, or use the keyboard short cuts.
51
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
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
54
55
Elements:
<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>
<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
Chapter 5 Exercise 1
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:
58
Chapter 5 Exercise 2
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:
59
Review Questions
1. What are six elements for formatting characters?
60
Summary
As a result of this chapter, you should be able to
61
6
Lists
In this chapter you will learn how to create a variety of lists.
Objectives
Upon completing this section, you should be able to
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
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.
65
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.
Tags View:
Results:
67
Chapter 6 Exercise 1
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.
68
Review Questions
1. Can you nest lists?
5. How can you change the type of list you originally selected?
69
Summary
As a result of this chapter, you should be able to
70
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
Upon completing this section, you should be able to
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
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
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
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/
76
Link Colors
The colors of the links can be set through the File menu Page
Properties option and {Clicking} on the
the Link field.
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
Chapter 7 Exercise 1
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
79
Review Questions
1. What are the components of a URL?
80
Summary
As a result of this chapter, you should be able to
Define URL
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
Upon completing this section, you should be able to
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
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.
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
3. The Choose Image File dialog box allows you to see previews of
images that you select in the file list window.
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.
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
to activate the
HoTMetaL Tip
88
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>
90
91
92
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
Chapter 8 Exercise 1
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.
95
Review Questions
1. Why should you describe the image in the ALT parameter?
96
Summary
As a result of this chapter, you should be able to
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
Upon completing this section, you should be able to
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
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.
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
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
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
111
Chapter 9 Exercise 1
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?
113
Summary
As a result of this chapter, you should be able to
114
Insert a table.
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
Upon completing this section, you should be able to
1. Convert a legacy document into an HTML page.
2. Use a template to speed up content creation.
115
To convert a file
116
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
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
Chapter 10 Exercise 1
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.
Chapter 10 Exercise 2
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
As a result of this chapter, you should be able to
122
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
Upon completing this section, you should be able to
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
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
Name =
left_pane
SRC = doc1.htm
Name = right_pane
SRC = doc2.htm
125
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.
132
<A>
<AREA>
<BASE>
<FORM>
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
Chapter 11 Exercise 1
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.
Chapter 11 Exercise 2
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\
135
136
137
Review Questions
1. What is the TARGET attribute used for?
138
Summary
As a result of this chapter, you should be able to
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
Upon completing this section, you should be able to
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
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:
141
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
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.
144
Check Box
Check boxes allow the users to select more than one option.
To insert a check box {Click} on
Option Button
Option buttons allow users to select only one option.
To insert an option button {Click} on
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
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
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
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
147
148
<SELECT> </SELECT>
The two following examples are SELECT elements, where the attributes
are set differently.
The Select elements attributes are:
NAME: is the name of the variable to be sent to the CGI application.
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
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.
150
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
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
Microsoft Internet
Information Server
NSAPI -C++
PERL
Server side JavaScript
ISAPI -C++
PERL
Active Server Pages (ASP)
JScript or VBScript
4
Browser
3
Web Server
Client
Database Server
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.
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
4
3
4
Browser
Web Server
Client
Transaction Server
Database Server
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.
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
155
Procedure
In steps 1 through 5 you will add the form element, and put in a hidden
field.
a new file.
button.
5. Place your cursor between the two parts of the input tag, and double
Click.
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.
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.
Name: FirstName
Size: 20
Max. Length: 25
{Click} OK
13. Insert a Break.
158
In steps 14 through 17 you will add a Text Box, for the user to enter their
Last Name.
Name: LastName
Size: 30
Max. Length: 35
{Click} OK
17. Insert a Break.
159
In steps 18 through 22 you will add a Text Box, for the user to enter their
e-mail address.
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.
Name: Response
Value: Phone
Checked?: Checked
{Click} OK
26. Type Phone
27. {Click} on the Insert Option Button icon.
28. {Double Click} on the Option Button to bring up its properties.
Name: Response
Value: Fax
Checked?: Not Checked
{Click} OK
SoftQuad HoTMetaL PRO Training
161
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.
Name: Leather
{Click} OK
40. Insert a Break.
41. Type CD Player
42. {Click} on the Insert Check Box icon.
163
Name: CD
{Click} OK
44. Insert a Break.
45. Type Sunroof
46. {Click} on the Insert Check Box icon.
47. {Double Click} and bring up the Check Box Properties.
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.
Name: Comments
Width: 30
Rows: 4
Wrap: virtual
{Click} OK
54. Insert a Break.
165
166
In steps 57 through 62 you will specify the Action for the <FORM>, and
test it.
61. Save
the file.
167
Results:
168
Review Questions
1. When would you use Check boxes over Option/Radio Buttons?
169
Summary
As a result of this chapter, you should be able to
170
Create a FORM.
Define CGI.
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
Upon completing this section, you should be able to
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
171
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
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.
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.
175
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.
177
Review Questions
1. Where do the Meta tags go in the HTML Document?
178
Summary
As a result of this chapter, you should be able to
Use the Meta element to add information to your pages that is relevant
to Internet search engines and people viewing your source code.
Add a Marquee.
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
Upon completing this section, you should be able to
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.
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
181
182
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
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?
7. How many mouse clicks are reasonable for surfers to make to get to
the information they are after?
187
Summary
As a result of this chapter, you should be able to
188
15
Cascading Style Sheets
This chapter will help you make use of a powerful feature in HTML page
creation called Cascading Style Sheets.
Objectives
Upon completing this section, you should be able to
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:
189
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.
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
Type `<!--' just after the STYLE start-tag, but before the style sheet
information.
Type `-->' just before the STYLE end-tag, but after the style sheet
information.
193
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
195
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
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
199
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.
200
201
202
inline styles
ID
CLASS
HTML element
203
204
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
9. Save and preview your document in Internet Explorer or Navigator v4.
206
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.
8. Save and preview your document in Internet Explorer or Navigator v4.
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
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
211
Optional Exercise
Modify your #BorderID, and adjust the box padding settings to 10 pixels
each.
212
Review Questions
1. What are three ways to add style information to your web pages?
213
Summary
As a result of this chapter, you should be able to
214
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
Upon completing this section, you should be able to
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)
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:
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 comment -->. 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.
219
220
221
Review Questions
1. Who created the JAVA programming language?
222
Summary
As a result of this chapter, you should be able to
Describe JAVA.
Describe JavaScript.
223
17
ACTIVEX Objects, and VBScript
Introduction
In this chapter you will learn about ActiveX, and add an object to a web page.
Objectives
Upon completing this section, you should be able to
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
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
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.
227
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 <!-- the comment - ->. The script element
lets the browser know what type of script it is with its LANGUAGE
attribute. The comment tags enclose the actual VBScript code so that
browsers that dont support scripting will ignore the code.
Since the VBScript is embedded in the HTML page it is interpreted at the
client when the page is loaded, and activated by an event like pressing a
button. It can also be used in the creation of Active Server Pages, for
developers using Microsofts Internet Information Server as their web
server platform.
The above code takes two numbers from the textboxes, adds them
together and pops up the result.
229
230
231
9. Save
232
233
Review Questions
1. What element is used to support ActiveX controls?
234
Summary
As a result of this chapter, you should be able to
Describe ActiveX.
Describe VBScript.
235
18
High Speed Publishing
In this chapter you will be introduced to techniques that you can use to
speed up publishing.
Objectives
Upon completing this section, you should be able to
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
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
238
{Click} on the Hotlist button and select the URL from the list.
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:
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
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
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
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.
246
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:
249
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.
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
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?
5. Can you create your own toolbars? Can you create your own tool
buttons?
8. Where would you keep your own libraries of Web objects and why?
253
Summary
As a result of this chapter, you should be able to
254
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
Upon completing this section, you should be able to
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
256
257
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.
4. What type of HREF and SRC attribute values are important in template
files?
260
Summary
As a result of this chapter, you should be able to
261
20
Site Management Overview
In this chapter you will be introduced to the site management tools
included in HoTMetaL PRO.
Objectives
Upon completing this section, you should be able to
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
263
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
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
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
267
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
270
Review Questions
1. Why would you use the site management tools?
271
Summary
As a result of this chapter, you should be able to
272
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
Upon completing this section, you should be able to
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
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:
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
{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
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
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.
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.
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.
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.
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
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
288
289
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
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
Choose Orphan Files... from the Project menu. The Site Doctor - Find
Orphan Files dialog appears.
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?
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?
296
Summary
As a result of this chapter, you should be able to
Manage files and links between files; move files, copy files, delete files,
rename files.
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
Upon completing this section, you should be able to
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
299
300
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
302
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
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
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:
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
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
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
312
The Remote Synchronization dialog box will appear with the Remote
Directory and the Local Directory fields already specified.
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.
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.
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
316
317
Review Questions
1. Why do you need to modify some URLs before publishing your site?
3. If you need to use root relative URLs in your site where will you make
settings to enable that feature?
318
Summary
As a result of this chapter, you should be able to
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
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
SoftQuad HoTMetaL PRO Training
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
SoftQuad HoTMetaL PRO Training
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
323