Boneyard HTML Help

Example Image HTML Help

The new Boneyard allows html within posts, so many people are trying to learn how to use it. This page points you to some resources.

Quick Help

Husky Nan put together a help page with many of the common html commands, specifically intended for Boneyarders:
HTML'ing in the Boneyard

Editor

My typing is atrocious. I'm old enough that when I was going to school, typing class for was the girls. A mistyped word in a post merely looks sloppy, a mistyped html command probably won't execute.

I'm a big fan of NoteTab.
It serves as the editor I use for all my posts. If a post is longer than a couple words, I compose it in NoteTab, and copy it into the post box. If you've ever written a long post and lost it because of a glitch at a site, and despaired over rewriting it, this alone makes the product worthwhile.

But the main benefit is the way it handles HTML. Instead of trying to remember the format for a link, just click on the command in a list at the left side of the composition area, and it brings up a dialog box, prompting you for the text and the url. It never forgets to close the html, one of the banes of new users.

You can't beat the price. It's free. I opted for the Pro model, because it comes with a spell checker. That set me back all of $19.95, the best $20 I ever spent on software.

Advice sites

There are literally reveal thousands of sites with html help. I'll list three that have been useful to me. I suggest the first two should be viewed in order. I went to the first one for CSS help, but I also looked at the HTML pages and they were very good.
Getting started with HTML (with internal links to advanced and style help)
Completely Free Web Building Tutorials !!

I went to the second one first, but I suggest starting with the "getting started" page. It walks you through basics in a readable way. The second site does the same, but it is better as a reference. Use the first to get an overview, go to the second when you want to look up something specific, because the menu on the left makes it easy to find what you need. Notice that the second site contains far more than just html. I linked to the main page, but you will probably want the first item in the left menu most of the time:
Learn HTML

The third site is the Webmonkey site. This has some heavy duty help, as well as some handy reference pages (look to the right side of the main page.)

Thumbnails

More than one person asked me specifically about creating thumbnails. You can figure it out from the sites listed above, but it may not be obvious (partly because it is simpler than it sounds), so I'll include the instructions here:

One question is how to create the thumbnail image itself. Graphics editors, such as Photoshop and Paint Shop Pro can do this easily, but it can even be done within Paint, automatically included in most PC's. Load the full size image into Paint, then Click on "image", then "stretch/Skew" and enter values. I'm using 33% for each dimension, which produces an image 1/9 the area of the original, with a lot smaller load time.

The other question is how to write the html line to display the thumbnail image with a link to the larger image. Ironically, it is not a special form of html, it is the standard link format, except that the place where you normally put the text to show up is simply replaced with the url of (the thumbnail) image.

Starting with the html for the classic link:

<a href="www.somewhere.com">Viewable text.</a>

The above would display "Viewable text ". Clicking on it would bring you to the site "www.somewhere.com".

Instead of putting text between the ">" and "<" symbols, replace it with an image:

Note that this is really the same format, except now, instead of showing a scrap of text, it shows a graphic. Clicking on the graphic is the same as clicking on a link, it invokes whatever is after the "href=". It could be a web site. In other words, you can use pictures as links to other pages. Or it can be a picture. If it is the url for the full size picture, clicking on the small picture makes the large one appear, and hitting back, brings you back to where you came from, viewing the smaller image.

(Obviously, you need full path names, not just the name of the images.)

This page last updated on 3 Dec 02.