kworks: HTML in Appleworks

If you are interested in creating HTML in Appleworks, this FAQ was created from a huge number of posts on the subject.

It was culled from a very long thread that ran for several months, so it rambles a bit and "I" refers to many different people, but there is a lot of useful information if you are willing to wade through it.

Michael Wasley has kindly created a page with a summary of much of the information found here. It can be seen at http://homepage.mac.com/wasleys/test/

HTML FAQ:

Q: I'm using a word processor to write HTML. When I save the file, I
change the format to HTML. I get a pop-up saying it is converting to HTML,
but when I get info on the file, the "kind," it is com.apple.appleworks.text
and the file won’t display correctly in a browser.

A: Save your HTML code As a Text file instead. When you Save a file in
AppleWorks as HTML, AppleWorks writes the HTML code for you. AppleWorks
thinks that your code is the text that should be formatted in HTML and
displayed on the page. If you're writing your own code, then just select
Save As Text.

*

Q: I can put a HTML doc in the sites folder on my iDisk and access it
through:

http://homepage.mac.com/myusername/filename.HTML.

But when I do, all the tab stops in the original AppleWorks doc have been
lost. How can I keep the tab stops?

I haven't experimented further - but would other formatting be lost when
converting to HTML? (e.g. bold, italic, etc?)

A: You will keep style and size but cannot define the font. You will keep
left, centre, right alignments. Tabs will be lost but can be simulated by
using non-breaking spaces (option space). Before putting into HomePage you
can see what it will look like by opening it from your HD with your browser.

Tab stops are ignored by all the HTML programs I've used, as are multiple
spaces. You can make the text involved into a graphic, rather than actual
HTML text, and it will preserve the formatting.

If you need the text to be searchable, there are several things to try:

If you want to make a list and have the returns recognized, so that each
item is on a separate line, you can try making a "soft return", by holding
down the option key as you hit the return key. I don't know if AppleWorks
can understand those or not.

If you want horizontal tabs, the best way is with a reinforcement table,
which I personally would not undertake in AppleWorks, if it is possible,
which I doubt. You might try using BBEdit Lite, which is a free download, to
create the HTML and just paste it into your AppleWorks doc. Or you could try
making multiple separate columns of text, if AppleWorks will let you do
that.

HTML is much more fluid generally than regular text, and even in the
high-end programs your control comes more from being able to specify the
level of HTML, and from the program's table-creating/reinforcing
capabilities.

*

Q: I was trying to create a list of web site addresses, in two columns, very
simple format: just the names of the sites in the first column, then tab to
the second column, which contained the http addresses.

A: If you're trying to do something like this,

http://www.seasidemusic.com/dealers.HTML

the way I did it here was to create three separate HTML boxes--the wide one
across the top and two long skinny ones beneath it. Of course, that's not
AppleWorks, but I would think something similar might apply. You might try
using section breaks and previewing in your browser.(Disclaimer from Barbara Brundage: That is a commercial site and I do have a financial interest in it.)

The suggestion for using non-breaking spaces seems to give the best results
for preserving horizontal spacing.

*

Q: Did you put the three separate boxes into one folder so that the page
publishes correctly as a whole?

You also write that it's not AppleWorks - what did you use?

A: AppleWorks formats as three tables, but only maintains vertical
separation, not side by side, with a nice beveled border around each one.

Also, don't forget that Netscape Composer and BBedit Lite are both free
downloads.

I was using

http://www.softpress.com

a web program called Freeway. Freeway works like any desktop publishing
program. Unfortunately, it's getting kind of pricey now. Their site has a
nice gallery of sites made with the program. If you need design ideas, it's
a good resource even if you don't plan to use the program.
If your library gets MacAddict, you might want to look through back issues.
I seem to recall a how-to a truly killer site made with AppleWorks in an
issue from the winter of 2001-2002.

*

I tried to do what you want using a table. It works!

You still see the table lines and I don't know how (if) you can control
column width, but that is probably not important.

To my surprise you can create links that work off the table. Selecting the
text in the table can be hard. You have to double click to get the cursor
in, one click just selects the table. I tried one internet link and it
worked, BUT you may not be able to prove the link in the .cwk document
before you convert to .html.

If it is a jpeg you need to watch the font and size as I find jpegs don't
handle text well. As for graphic text, you should always use the highest
res. PICT format for things with only a few colors. They will be much
sharper and the file size will be smaller if correctly adjusted.

*

Q: How do you create a GIF file?

A: In a program that supports GIF, you just choose that as your file format.
GIF used to be treated as open-source, then lately the inventors have been
demanding royalties, so it's not as widely available as before. I think
Apple probably dropped it as much in protest as because of the money.

Q: If you put PICT into AppleWorks won't it convert to a JPEG when you save
to HTML?

A: Yes, a PICT will convert to a jpeg, but you can place a PICT in
AppleWorks at a high resolution, as opposed to say, a TIFF file. All
graphics for the web will convert to GIF, JPEG, or sometimes PNG in most web
conversion programs.

Go to:

http://www.softpress.com/tutorials/

and scroll about halfway down the page, there's a little online tutorial
about when it’s best to use gifs and when to use jpegs. Worth watching even
though the program-specific stuff won't apply.

*

I have spent a little time experimenting with AppleWorks6 for a webpage.

The output is very simple and was really just seeing what might be done with
AppleWorks. It is not intended to be beautiful but is a description of
trials and errors. It's at:

http://homepage.mac.com/wasleys/test/p1.html

Tables seem to come over the same width as in AppleWorks. Page Set Up used
was portrait. Using landscape you could get wider tables.

*

I wouldn't recommend using Appleworks for creating html pages for a number
of reasons but the main one is that the code it creates will not pass an
HTML validator. You want code that does because it will display, as a
general rule, the way you want it in the widest number of browsers.

Word processors such as AppleWorks and Word can save to html but the HTML
code it creates will not pass an HTML validator. You can test your pages for
compliance at

http://validator.w3.org/

I would suggest using the Netscape or Mozilla Composer. It gives you WYSIWYG
interface, you can view the html code as it will look in a browser, and it's
free. I would also test the page in IE Explorer as well. Each browser
renders pages slightly differently.

I would suggest the following primer for creating Web pages:

http://www.w3.org/MarkUp/Guide/

it is quite good. The W3C is the authority on HTML code.

Also, if you can get your hands on a copy of "Create your first Mac Web page
in a Weekend" I would recommend that as well. My copy is slightly out of
date but it give you a good grounding in the basics in creating web pages.

*

I would suggest not using AppleWorks for the actual creation of Web pages.
AppleWorks is great for outlining and pre-planning your Web pages. However,
when you translate from AppleWorks to html you will usually need to do some
fine tuning to get the pages to look the way you want.

It would be much easier and will save you some time if you use an HTML
editor to create the actual html page.

For simple pages Composer will do fine. If you really get into HTML and a
complex site than upgrading to commercial software such as BBedit or
Dreamweaver might be well worth the money.

*

If you know HTML code, you can create Web pages using any tool because all
that a html page is plain text file.

My favorite tool is Jedit from

http://www.jedit.org/ (link verified)

Its free and cross platform. I used on a PC and at home on my Mac. However,
it's not WYSISWG.

What is nice about it is you can set it up to display the HTML tags in color
which making editing them much easier than In Notepad and if you download
the Clipper plugin you get a library of HTML tags which you can use to
create your Web page.

The most impressive aspect of Jedit is its Search and Replace capability. It
has the ability to search and replace text in an entire directory of Web
pages all at one go without having to open each individual file.

That feature alone saved me a great deal of time.

*

Table Information:

To control Table columns, the following rather convoluted process works for
me.

Set up an in line table and adjust the width of columns to the width needed.
Paste a graphic (I used jpeg picture) of that width in the top cell of each
column.

Work as normal, but when saving to HTML ensure that AppleWorks is at 100% or
smaller.

I find that if AppleWorks is at 100+% the columns are uncontrollable. (This
may be linked to screen resolution - I normally work at 120% as that gives
me 1:1 on screen - and found this out by chance.)

I can't get any control over table/cell boundaries.

*

When dealing with tables you really need to be able to edit the HTML code
directly in order to able to have any control.

A good simple primer on how to set up the table and cell boundaries can be
found at the following web page

http://www.w3.org/MarkUp/Guide/Advanced.html

*

The following might be of interest

http://homepage.mac.com/wasleys/test/p2.html

as I wanted to see if it was possible to boss the columns and produce
something reasonable.

The good news is that you can control column width by properly sized
graphics into columns first thing.

The bad news is that later height might go a bit astray, but that's livable.

I think the important thing is to PLAN first - the test page cited just
grew.

If anyone sees any real problems please let me know - it seems to work on
IE5 with OS9.

*

I find it can be quite hard to get the cursor into a table. When putting the
ordinary text at the top of the page the table got pushed onto a second
page, where I found getting the cursor in virtually impossible. It may be
best to produce each table on a separate page and then paste together if you
were doing a large doc.

For simplicity I used equal width columns. It should be possible to alter
width of some when laying out and 'set' them with graphics of the right
size, but I haven't tried that.

*

I would suggest using the Drawing environment and create your table
there. You will be able to create a table which will span more than a page
and you will be able to edit it much easier that way. When you are done copy
and paste the table into a word processing document and then save it as
HTML.

I would then change your page set-up in both the drawing and word
processing documents to legal and landscape.

Then go under the Format menu and change your ruler settings to points. When
you are designing a web page it is good idea to design it for 800X600
resolution. Quite a few people have their monitors set at the resolution and
it will look quite fine at higher resolution. This will give you a good idea
as how it will look your browser.

Do not use text frames because if you paste in the word processing document
the HTML translator will not recognize it.

To have a bit more control how your table is converted do the following:
1. Go under preferences and then select HTML Import/Export.
2. Then select HTML Export (Advanced)
3. Scroll down to to OpenTable.
4. In the Start Tag box you will see the following:

<TABLE BORDER=COUNT width=COUNT height=COUNT>

TABLE BORDER=COUNT width=COUNT height=COUNT

5. The TABLE BORDER tag controls how the border is displayed. If you Replace
the word COUNT with a 0 the border will disappear. The higher the number the
thicker the border.
6. The width tag controls how wide your table will be. I would suggest
leaving this alone because if you create a table as 600 picas and you have
400 in the width tag the table will be converted to 400.
7. The height tag controls how height of your the table.
8. I would suggest adding the following tags cellspacing and cellpadding.
Cellspacing controls how the space between two cells and cell padding
controls the padding inside a cell.
9. When you are done OpenTable should look like something this:

[Note replace { with "< or >"]
{TABLE BORDER=0 width=COUNT height=COUNT cellspacing=0
cellpadding=1}

TABLE BORDER=0 width=COUNT height=COUNT cellspacing=0 cellpadding=1

You can undo any changes by clicking the Restore All HTML Defaults button,

Also, the more I think about it it's most unfortunate that you can't convert
a Drawing document to HTML.

That is really the best place to use to create your HTML pages. All of your
necessary tools are there to create some really nice pages. The pages, like
a real Web page are, continuous. You can layout the Web page more accurately
and with alot less fuss then in the word processing document. The only other
thing that really is needed is the ability to create a table within a table.

With a good HTML converter it would be an excellent tool to create HTML
pages.

*

I would suggest freeway's mailing list, freewaytalk, as a most excellent
resource, mostly populated by professional web designers. A great deal of
the conversation is way over my head, but I have learned a lot from them.

*

Rather than go through preferences I have found it easier to open the HTML
file and edit the Open Table Start Tag there in line with your suggestions,
not forgetting to save it as Text, not HTML, when finished.

If you want to use a table (which seems a useful way of doing many things) I
still can't find a way of keeping columns the width you want them without
putting a correctly sized graphic in each one. As soon as text is entered
they seem to change width unpredictably.

On occasions row height goes awry. I find setting height=1 seemed to
be the easiest way of getting things back to how they should be (though I
suspect you may say this is bad practice).

If width=COUNT will the table be enlarged beyond its WP size by the addition
of spacing and padding? It seems logical to assume that spacing would
increase the overall width, but that padding might just restrict line length
within a cell. Incidentally it would seem useful to set margins within a
cell when typing (although they're inoperative in HTML) to mimic the effect
of padding.

*

Working with tables in HTML can be extremely frustrating because you can't
work with them as easily as you would in word processing doc.

If you want to control the height and width of the cell you can do the
following:

1. In the table HTML code you will find the following code:

TR which indicates a cell row
TD which indicates a cell

2. In the TD you may see the following tags:
td align="left" indicates to align the text to left. You
can change the tag to center or right if you wish
valign="top"indicates to align the cell to top. You can
change the tag to middle or bottom if you wish.

3. You can add the following tags:
width= to control how wide the cell will be
height= to control how the height of the cell.

By the way you can use either percentages and pixels to control the width
and height of the cell. If you want it to stay at a specific size use
pixels, instead of percentages.

If you a specifying the cell width, it may be a good idea to specify the
table width as well. As far as AppleWorks if you specify the width of the
table cell spacing and cell padding will not enlarge beyond the width you
specify.

*

A. If cell sizes are specified for the top row will those hold for all lower
rows, or do they have to be specified row by row?

A: It works if you put width=xpoints (but only if you have specified table
width in points) or width=x% in each TD for the first row.

*

As a general rule, once you specify the width of a cell all of the cells of
in the column will have the same size. The only way in which you can have
cells of a different size in a column is by creating a another table within
a cell.

AppleWorks will not allow you to create a table within table.

As I mentioned previously, working with HTML tables can be frustrating and a
pain in the neck. Dreamweaver has given me no end of frustration with tables
and it's WYSIWYG HTML editor which I use at work.

However, it is important understanding tables as most Web pages use tables
to layout and control their Web pages. You may not see the tables because
the table border has been set to 0 but they use tables nevertheless.

Tables within a table is neat to have because you can layout your Web page
in columns with the border set to 0 and then have an interior table with
borders to emphasize any text.

Try making sure that you add the .html behind the file before you save.
I've found that if I save a AppleWorks file to a MS Word file, I must add
the .doc extension myself or it doesn't work.

A simple all text page using tables and advice from Barbara and Francesco is
at:

http://homepage.mac.com/wasleys/test/p3.html (valid link)

*

Here's my first attempt at a web page created entirely in AppleWorks,
following the input given in this thread

http://homepage.mac.com/johncharlespotts/indiAppleWorkseb2.html (valid
link)

A few notes:
it was created using a 4 column table in AppleWorks Drawing; then
copied and pasted into AppleWorks WP; then converted to html and re-edited
to remove the cell borders, add cell padding etc (see Michael's third sample
page above for details)
I apologize for the pictures - I can't work out how to resize from iPhoto
to make thumbnails and so I had to use screenshots - hence the triangles
bottom right. (I don't have Photoshop)

I'd change some things of course (the header is very bland, for example,
and needs a darker element) but never mind for now...

This is meant to show the very minimum of what AppleWorks can do in the web
page creation field - I would like to point out:

- the first version took only about 40 minutes to do (I had the web
addresses already in another very very very basic web page I had written,
and I simply pasted them in)

- I subsequently re-edited and re-published the page to make some
adjustments (eg reducing the font size, changing the layout etc) in under 10
minutes

I hope this is of interest to other users of AppleWorks, as evidence that
one can create reasonable web pages from within AppleWorks.

*

Just one thing. You say "click on the blue text..." for links. FYI, older
versions of Netscape tend to make purple link text no matter what you do
within your web program, so for some of your viewers there won't be any blue
text.

*

Thanks for this info about the blue text - I was completely unAppleWorksare
of this! Obviously something to edit next time I do a page.

To answer one of my own issues, namely resizing pictures to thumbnails: I
found out how to do it, namely

1 In Drawing, paste the full picture into the required cell (it will
expand the cell with the full picture but don't worry)
2 Click on the picture /cell to make it active
3 Still in DR, go to Arrange in the tool bar and open the menu
4 Go to Scale by Percent and change the value to say 25% for both the up and
across values, and enable. The picture (and cell) will shrink to the
required size.

I found that 25% gave me a good size for a 4 column layout in DR. I should
also add that first I edited the images in iPhoto to give them the same
dimensions. That's neat because the images are then all the same size when
scaled and so they fit the column cells equally.

*

Freeway does give you the option to specify link colors, but netscape
overrides it.

and anyone else who's feeling ambitious: If you have the developer tools cd,
here are instructions for building your own HTML editor:
http://www.stepwise.com/Articles/HTMLEditorX/htmleditorx-1.1.html (valid
link)

*

Q: I'm using AppleWorks 6.2.4 in Jaguar and the ability to save a document
in HTML format is GONE. When I click on save as, and look at my file
choices, I get ascii text, AppleWorks, and several flavors of MS documents,
but no more HTML. What happened???

A: It appears you may be trying to save a spreadsheet document as an HTML.
The ascii text appears on my system only when I try to save a spreadsheet or
database document.

Unfortunately, you only can save a document in HTML format from the Word
Processing document.

*

Indeed, this is the case. I was working from a spreadsheet. Which I tend
to use when I want to do a very quick table layout and want to put it on the
web... its kind of intuitive and faster than firing up a web-page layout
application.

So hey, Apple, why can't I export an AppleWorks spreadsheet as an HTML
table?

It would seem, if I can only do HTML exports from AppleWorks word
processing, that I have to take the table into a word processing document in
AppleWorks, then export from there. Sorry, but that's so completely
non-intuitive and silly. Seems it makes more sense for me to just go to
GoLive right from the get go. Not a problem for me since I have the
application, but not everyone has GoLive or Dreamweaver or other
high-powered webdev tools.

*

I agree. My previous suggestion was to be able to save as html out of the
drAppleWorksing environment because all of the tools you need to layout a
nice web page are all at hand.

*

I checked the AppleWorks 6 Help Files, and in the TOC found a number of
listings for creating HTML. For example:

Text style, size, color: use text appearance commands.

Text alignment, centering: use alignment commands.
Note: Fully justified text is changed to left-aligned on a Web page.

Date or time when document was saved as HTML: use Insert Date or Insert Time
in the Edit menu.

Endnotes: use regular footnotes.

Bulleted list: use a bullet, checklist, or diamond outline.

Numbered list: use a number or Harvard outline.

Interactive table of contents: use document links and anchors.

Links to other Web pages: use Internet links.

Tip: Add horizontal lines to divide sections of your Web page.

Related topics

Formatting a Web page
Previewing and testing a Web page
Entering and editing text

Most listings had links to other parts of the Help file related to HTML.

*

I've recently been fiddling with AppleWorks HTML to get some control of
fonts. I can manage to change fonts in individual bodies of text.

For example if I change

FONT SIZE=4

to

FONT face="Times, Times New Roman, serif" SIZE=4

I get Times.
Q: Is there a way to define the font (or at least the family) you want for
the entire document at the start?

A: After going round in circles I think I found the answer which is to put
(for example and within ):

basefont face="Verdana, Geneva, Arial, Helvetica, Sans-Serif"

somewhere between HEAD and /HEAD.

It seems to work.

*

I had reservations about resurrecting this ancient thread but the following,
though obvious to those versed in HTML, may help others like me who just
want to fiddle around with it a bit.

Links on webpages made with AppleWorks will open in the same window, so an
external link will take people away from your site with only a back
button to return them. Getting a link to open in a new window is simple.

If you look in the HTML for the link you will find something like:

A HREF="http://homepage.mac.com/username/filename.html"

All you need to do is add

target="new"

so you end up with

A HREF="http://homepage.mac.com/username/filename.html"target="new"

I have to admit to getting a copy of PageMill through eBay recently, but
many of the comments in this thread apply there too.

Try the tutorials at:
http://www.w3schools.com/ (valid link)

for the bona fide HTML stuff.
http://www.webmonkey.com

has some good JavaScript starters.