Now that we have the skeleton of our website in place, the next step is to add content. Content or the lack of same, is what makes or breaks a website.

Text and Other HTML Considerations Before we start adding content to the site, let's touch briefly upon HTML text considerations. Unlike print where you have an endless variety of fonts in sizes ranging from 2pt to 260pt and larger, HTML text is more limited.

It is best to use fonts that are installed on most computers such as the following: Arial, Arial Black, Comic Sans, MS Courier, Georgia, Tahoma, Times New Roman, Trebuchet , and Verdana. You can use other fonts if you wish, but if the user does not have these fonts installed on her or his computer, then they will just see Times Roman or Arial. Plus, fonts such as Verdana, Tahoma , Trebuchet and Georgia have been designed especially for the web and will look and read better than most other fonts.

The font sizes you should use range from 8pt for very small text, 10 and 12pt for normal body copy text, and 14 - 24pt for headlines. I would not go bigger or smaller than these sizes.

If you have to use a special font for dramatic effect, or want a large and dramatic size font, consider making this text a GIF or 8-bit PNG bitmap.

Xara exports every item on the page. This can create a lot of items which can take a long time to load depending upon how many objects you have on your page, specifically how many photos. If you group items whenever possible, such as we have done with the buttons and banner, then these export as single objects instead of several objects and will make your page load faster.

For sake of illustration, let's add some text to the page. Of course when you create your website, you'll use actual text but for this tutorial we'll use placeholder text, sometimes called Greeked text, because these non-words sometimes resemble Greek or Latin words.

Drag a Text Area rectangle with the Text Tool (F8) that is the width of the banner (the image above is smaller than the actual page we have created) and comes about 4/5 of the way down the page.

Press Shift Ctrl L a few times to add some Greeked or placeholder text text.

What? You can't see the text? Of course you can't, it's the same color as the background. Press Ctrl a (select all), change the text color to 60% Black and make the font Arial Regular and the point size 12pt. That's better. If you want to be less subtle, make the text color 20% Black. And if that is still too subtle, make it white. I'm easy. Really!

Add some space to simulate paragraphs.

Add a photo or two to break up the text.

When the photo is in position, right click on the photo and select Repel Text Under... Enter an Extra Repel Margin: of 6pix and press Repel. The text will wrap (be repelled) around the photo or object. This begs the question, does the text find the photo repellent or is it the other way around?

TIP: In this first implementation of the Repel Text feature there is only a single margin setting, so 6pix is 6 pixels on each side of the object. This may be fine on the right side but not on the top of bottom. To get around this, I like to add a rectangle the same color as the background that is just the amount of space on each side that I need. Then group the rectangle with the photo and repel the text with no extra margin.

Add the individual page names to the banner text to help your visitors know what page they are currently on.

Here is one more cool trick we can add to this tutorial. It's called Pop Ups. When the visitor mouses over a certain object, such as a photo or text or any object, a larger or different image pops up.

To give people a better idea of what the folks in the photo really look like, we can use a pop up to display a larger photo when the visitor mouses over the postage stamp sized photo.

Create a new layer and give the new layer a name like BigPhoto. Paste a larger version of the photo onto this layer. Make sure the BigPhoto layer is selected (the title bar will be highlighted when the layer is selected). When you are happy with the location of the large photo, make it and the MouseOver and MouseDown layers non-visible by unchecking the check boxes under the eye symbol.

TIP: After writing this Workbook, your editor, discovered this important tip. The photo and the big photo were exported as 8-bit PNG files. The problem with that is larger file size. And larger file size means slower loading.

So, here's the tip. select the large photo and click the Create New Name yellow tag icon on the Infobar. Name the image JPEG. Nothing more, nothing less. The big photo now exports as a JPEG and the file size saving is about 100K! And I am told you can name more than one image JPEG. You will get a warning dialog that says the name exists and do you want to create a new name. Just say YES.

Select Layer 1.

Select the smaller photo then open the Web Address dialog (Shift Ctrl w). For the URL key in BigPhoto. Press Add and then close. This links the small photo to the big photo.

Aha! So you can link not only to another page, or an outside website, but you can link to a photo! Yep. And you can use this feature to create anchors. Anchors are a place in the text that you can link to. For example. If you have a very long page with a number of topics covered, you might want to put a group of linked subheads at the top of the page. Find the first word in the text for each new topic and Name it using the yellow tag Create New Names icon on the Infobar. Then simply link to the Name.

A pop up image can appear anywhere on the page at any size. You can also use pop ups to create what is known as an image swap. Here's an example of an image swap. You have a page with 5 T-shirts you wish to sell. You have a photo of a model wearing the T-shirt and underneath, five color swatches. Each time the visitor mouses over a color, the color of the T-shirt changes to match the swatch. This is real easy to do. Put the five colors on five different layers with all the photos aligned and the same size. Add a Web Address link to each layer for each color. Cool?

Continue to add appropriate content to each page. And remember to add the text to the banner text to identify the page.

If you want to link any of your text, another website, for example, highlight the text with the Text Tool cursor, open the Web Address dialog, and add the web address. And remember if you want people not to leave your site, use the New Window option.

You can add an e-mail link to your site so that people can contact you by e-mail. To do this use the HTML MAILTO: tag. When the visitor clicks this link, her or his e-mail program will automatically open. Please substitute your e-mail address for mine if you don't mind.

You can also add an automatic Subject: line to the visitor's e-mail program. Just add a ?subject= and your subject line after the mailto: and e-mail address. No spaces except for the subject text. When a visitor clicks this link it opens his or her e-mail program and automatically displays the Subject line you have specified.

And finally, this. The standard highlighted text colors that Xara uses are fine for white pages or light colored pages. But against our very svelte well digger's knee black background, the highlight color is very hard to see. You can change these colors to lighter colors by editing the default.css file which is created when you export your HTML document.

Open the default.css file (it is in the folder with all the other images and stuff) in Notepad or Wordpad or any pure text editor. If you edit in Microsoft word make sure you save the file as a .txt file. Change the three colors shown above to the hexadecimal colors shown. You can specify other colors but remember most people associate blue with linked text.

You can find the hexadecimal number for any color in the color editor. Is is in the box preceded by the # sign. The pairs of numbers or letters represent the RGB values.

Click here to see the actual site I created.

On the next page I'll show you how to add a Flash animation to your site.