Starter Guide to HTML

Whether it's converting Word documents to HTML for use on a web site or blog, or just sprucing up your web site, some simple tricks and some easy HTML code can be yours to use. All it takes is a little practice.

Note: For more information, consider taking our course Web Presence for Writers

My web designer says not to use Word to create HTML—even though it has a "Save As HTML"option. What's up with that?

Your web designer is telling you the way it is. Microsoft is a company not noted for caring a whit for any conventions on the Web. Their "save-as HTML" option must work somewhere, for someone. I guess. But it's useless for the most part. I notice that my Dreamweaver professional web-design program has "Clean Up HTML" and also "Clean Up Word HTML" options but the few times I ran the latter I had to scrap the results and start over.

Since I do both Word and HTML and flip 'em back-and forth all the time, some tips:

Reset your Word preferences. I use Word for the Mac, so under this file: WORD/preferences/AutoCorrect
I turn OFF: "Replace as you type: "Straight quotation marks" with "smart quotation marks"

The factory default is ON and those "smart" marks (includes apostrophes too) are higher-order ASCII and can be counted on to turn to garbage in any conversion to HTML. Now you have simple quotes and apostrophes. They are not pretty. They also do not screw things up. You get accustomed to not pretty very quickly.

Other items that may not work:

• Anything in italics, bold or underlined in Word will come out normal in HTML. You just have to fix those on your own in the HTML More on that in a moment.
• The "em" dash (the long one) might not work. Use two "en" dashes instead to be safe.
• A bullet in Word might turn into some odd character in HTML.
• Accent marks? Don't even go there.

Simply put, lower-order ASCII, which is easily converted to HTML, is what you see on your keyboard without using any modification keys. And a few of even those won't work well. Common things only, please.

Paragraphing: If you just indent a new paragraph, get out of the habit. It won't convert and you can go blind and postal trying to figure out where the paragraph breaks go in your HTML. Just double-space between 'grafs, even in Word.

To convert paragraphing, do these steps:

1. In A COPY OF the Word document (never mess with your original), do a "Find/Replace" on all paragraph marks. You will need to go to the advanced option in the Find/Replace menu. Replace all paragraph marks with something else. I use zzzz. Now COPY this.
2. Now go to your HTML page. PASTE your material. Now tell the HTML program to replace all "zzzz"s with the paragraph code, which is <p>. This must be done in the CODE view, not the TEXT view.
3. If you end up with too much double-spacing, do a replace of two <p> with just one <p> and things will look better. I don't know why this happens sometimes and not all the time; it could be my program, or my brand of Scotch.

ASCII: American Standard Code for Information Interchange.
more info

HTML: Hyper Text Markup Language.
more info

URL: Uniform Resource Locater
more info

SIMPLE HTML: So now you're feeling all froggish about this? Here are some common codes. Don't type these into your Word documents; instead, use them in the HTML pages:

OLD HTML:

• Italics: <i> starts the italicized phrase and </i> ends it.
• Bold: <b> starts the bolded phrase and </b> ends it.

NEW HTML (yes, they have changed some things. Most pages will work with the old code but prefer the new code:

• Italics (now called "emphasized"): <em> starts the italicized phrase and </em> ends it.
• Bold (now called "strong"): <strong> starts the bolded phrase and </strong> ends it.
• Underline: <u> starts the underlined phrase and </u> ends it. (Generally not a good idea to even use underlining, as it looks to the reader like a link. Reader clicks. Nothing happens, Reader gets mad at you.

Always remember to close the font code with a "/" statement or the program will go merrily on making the rest of your document bold or italic or red or whatever you told it to do and forgot to tell it to stop doing.

• Colored text: there is an almost infinite number of shades of colors to use, all identified by six-digit alphanumeric codes. #FF0000 (those are zeroes), for example, is the code for plain red. Black is #000000. To make something red we could type (in the HTML code):

<font color=#FF0000>this is some red text</font>

But who wants to memorize six-digit codes? A few simple colors also have names: red. blue. green. yellow. black. white, a few others. So all you need to do is type:
<font color=blue>this is some blue text</font>

• Font size or typeface: You may do the same trick:
  This is <font size="3" face="Arial">Something typed in Ariel type and in size 3</font>
• Let's add a color and also bold the word "the":
  <font color="red" size="3" face="Arial">Something typed in Ariel type <strong>and</strong> in size 3</font>

Note that we start with:
< font
Note the space. This tells the program we're going to specify something about the font. Now we can pick from options:

color="red"
size="3"
face="Arial, Helvetica, sans-serif" (see note to the right)
or all three.

Finally, we tell the program to stop using all these modifications, with the </font> statement at the end.

But usually you can create the color and size in Word and it copies OK into the HTML. No need for the complicated code. Unless specified, all programs default to, well, the default font, whatever that happens to be on your end or on the viewer's end. A lot of web sites leave the settings at default because, frankly, that's less of a pain in the butt for the programmers. Some want more specific control over the viewing experience and may go ito considerable detail as to what to show and how to show it.

face="Arial, Helvetica, sans-serif"

There are only a relatively few "web-safe" typefaces on the Web. If you do nothing to specify which, the page will use "Default" which is whatever the viewer's web browser uses as a standard.

If you specify a typeface it is usual to tell the viewer's browser what to substitute if it does not have the specified typeface in stock.

This
face="Arial, Helvetica, sans-serif"
example is typical. Your web page is telling the viewer's web browser:

Use Ariel if you have it. If you do not, then use Helvetica. If you have neither of those, use ANY sans-serif font you do have.

Remember that these simple codes must be typed into the CODE view, not the TEXT view. Type 'em into text and that's what you get. Text. As you saw above. Rarely, one finds some blog program or whatever that can recognize and automatically use such text-embedded code, but usually you have to create HTML in its own window.

Now let's get more ambitious and do some links.

Email Links are easy. In the HTML view, type in:
mailto:Steve@StephenMorrill.com
and, presto! You have created a link. Click on that and the email program pops up. Here's the working version: Steve@StephenMorrill.com

Web hyperlinks are more complex. The HTML code for a link consists of several parts, as follows:

< a href=
(note, one place we want a space, between the "a" and the "href") this code tells the program to start a link.

"http://www.whatever.com"
This is the place where you want the reader to go. It's common to see the "http://" part left off and the link start with just the "www" but it is poor discipline and can occasionally get you into trouble. Do it right.

>
closes the link phrase. Now the program knows where to send the viewer. But all this is going to be invisible; so far we don't have anything the viewer can actually see.

type anything you want here
Really. This is the visible part of the link. It's common to use the actual URL, the "http..." thing, or, more frequently, just the "www..." part. But, in fact, it does not matter at all what you type here. I like to use "Click Here for More Info" but that's a personal choice. We'll use "WritersCollege" for our sample.

</a>
This closes off the entire link code. You recall, from our examples above of italics, bold, etc., that the "/" means to stop whatever the program was doing.

Now let's look at our constructed link:
<a href="http://www.writerscollege.com">WritersCollege</a>
or, the working version:
WritersCollege

Not so simple? Sure it is. Try these ideas. You will get accustomed to it over time.

LINKS are extremely important to web pages and blogs. They not only bring you more viewers but they (and links back to you) also tell search engines that yours is an active and popular site.

But it is verboten to have a broken link (one that does not work. That counts heavily against you, so check those occasionally.