Tutorial: Using the Format Font Dialog

 

Introduction

Inline styles are the recommended way for you to create different looking fonts on a webpage. This tutorial shows you how to use the Format Font dialog.

Step 1. Creating A New Document.

Assuming you have started HotDog, close all the open documents.

Now, start afresh by creating a new document by doing one of the following:

Add the following text to your document, between the BODY tags:

This is my sample Text.

Save your document:

  1. From the File menu, click "Save As..."

  2. Use the Save As dialog to navigate to the "HTMLFiles" directory (under the HotDog6 directory).

  3. In the "File Name" box enter the name "InlineStyleDemo".

  4. Click "Save".

Step 2. Selecting the Text.

Select the text you want to format:

Step 3. Opening the Format Font Dialog.

Do one of the following:

Step 4. The Difference between Inline Styles and Font Tags.

Font tags are special tags (such as the <B> tag) that can be used to change the appearance of text. The World Wide Web Consortium recommends that people now use styles (or inline styles) to change the appearance of text.

To Change to the Inline Style Section of the Font Dialog:

Step 5. Changing the Appearance of your Text.

Use the boxes under "Inline Font Styles" to change the appearance of your text. A preview of your text (in this case "sample") appears at the bottom right of dialog. This preview displays to you how your text will appear on a users browser once inserted into your document.

Step 7. Applying the Font Changes to Your Document.

Your HTML text will now appear something like:

This is my <SPAN STYLE="{font-size : small; color : fuchsia; text-decoration : underline;}" >sample</SPAN> Text.

The text in red above defines your style.

To preview your text in a browser:

NOTE

Styles are not supported by older browsers (version 2 browser generally). You may want to also include Font Tags (see step 4 above) as well for backwards compatibility.