 |
Now start HoTMetaL. and make sure you
get the important tool bars (Try: Menu,
Standard, Full screen, Tables, Quicktools, Formatting, Preview) Try
all if you like: Click on "View"
in the top menu, then "Toolbars". |
|
 |
If a new page appears - OK, otherwise start one
(Press the "New Page" button,
upper left). |
|
|
There are a few symbols on the page named
"HTML, head title, body". |
|
There are three ways to look at a HTML document in
HoTMetaL. You can switch from one to the next by activating the buttons on the
lower right. |
|
|
The left hand one (<>) will give the
source code. |
|
|
The middle/left gives the "Tags on" view. |
|
|
The middle/right gives the "WYSIWYG" view (its a good
idea to forget about this one right now). |
|
|
The other ones are of no interest at this
point. |
|
Now note: There are as many ways as
there are browsers to look at your document in the Internet. In your HoTMetaL
version at least one browser can be activated by clicking on the symbol
(usually Netscape or Explorer). |
|
|
Try it. You see no tags and non of the heading,
only your text - i.e. nothing at the present moment. |
|
Now turn to the source code. |
|
|
There will be some writing containing the names
from above. You cannot change this, except for the top line, which identifies
the editor used and gives you away if you use unlicensed software. |
|
|
Any and all HTML documents contain a
"Head" part which will not be seen on the
browser but contains information about the document, and a "Body" part that contains everything that should be
displayed on the browser (Well, almost everything). The words "head"
and "body" are enclosed in pointed brackets: <head> and
<body>; the appear twice: first as shown, then with a slash in
front: </head>, </body>. |
|
|
The combination of the two
(<head></head>; <body></body>) is called a tag; and those tags are just two of many to come. The first
part of the tag always starts some special
activity, the last part ends it. Everything
that is to be influenced by the commands symbolized by the tags must be in
between the beginning and ending part. |
|
|
Now switch to the "tag on" view. The
tags are now displayed as arrow-like symbols and this mode is the most
convenient way to generate a document. |
|
|
Now put your cursor between inside the body tag
and write something. A new tag <P></P> appears (short for
paragraph). This tag will always be at the
front and the end of a paragraph in your document as long as the enclosed
content is not within another tag with a similar function, e.g., the headline
tags (H1 to H6) or within a table. |
|
|
|
|
Put your cursor somewhere in what you
wrote an now press the F6 key. That is the most
important function of HoTMetaL Pro! |
|
|
A list of attributes appears. Attributes
are more detailed specifications of every tag function. All tags carry their
own attribute lists which appears upon pressing the F6 key. |
|
Lets see how this works.
Pick a word you wrote (here it is
"Pick" and mark it the usual way
(move the cursor over it while holding the mouse key depressed). Now click on
the color icon of HoTMetaL (the palette or
colored circle); a color table will appear. Choose a color and OK it. You
created the new tag <font></font>. |
|
|
Now lets see what the attributes do. Use the
F6 key inside the font tag. You find several attributes - one (color)
carries some numbers because you selected a color
and that is but one of the attributes of the font tag. |
|
|
Now write "symbol" (without the "") in the entry
"Face" and hit the enter/return
key or click away the attribute menus. The word inside the font tag looks
unchanged. But now look at it in your
browser. |
|
If it looks "Greek" to you, that is what is should. The
attribute "symbol" hidden in
the tag, tells the browser that it should switch to the symbol part of whatever font it is using. Mostly,
but not always, this is "Greek". But the important point is: You
have no control over it! It is thus always possible that some people see
your document in a way different from what you see or intended. |
|
|
Now look at your document in source code. Here
you will find the attributes included in the tag. It looks, e.g., like
<FONT COLOR = "#FF00FF" FACE =
"symbol">pick</FONT>. |
|
|
If you like you can try a few more attributes,
e.g. "center" Find out what
happens, for some more attributes, it is often fairly obvious. |
|
Lets try the attribute thing on other
tags. Pick the "Body" tag. Being
logical, we know that whatever is specified here will affect the whole document
because it is always completely enclosed within the body tag. |
|
|
Click on "bg color" and the
... symbol at the end of the line. You get the color palette again.
Click on the color of your choice (as long as it is very bright) and see what
happens. |
|
|
Your document turns colorful (if
it doesn't you have disabled that function in HoTMetaL, but look at it with the
browser) and an 6-digit alphanumeric code behind a # appears in
the "bgcolor" line. This is the hexadecimal code for colors. |
|
The first two digits define the
brightness of the Red part, the next two couples define Green and
Blue in hexadecimal units (0 = 0, 1 = 1, 2 = 2,
.... a = 10, b = 11, ...., f = 15) |
|
|
"ff" thus is the maximum
intensity corresponding to a "strength" of 15 · 16 + 16
· 1 = 256. |
|
|
The color "white" = maximum intensity
for all three basic colors thus is ffffff. It´s a bit tricky to mix
colors if you have no experience, but no harm is done in trying. Some
examples: |
|
|
|
|
|
black
000000 |
grey
cccccc |
red
ff0000 |
yellow
ffff00
red + green |
pink
ffaaaa
red on white |
blue + green
00ffff |
red + blue
magenta
ff00ff |
dark blue
000080 |
|
|
|
|
|
|
|
|
|
|
|
|
|
You are now ready to save your
document. But before we do this, lets look at a few rules and tricks in the
next subchapter. |
