HTML Basics for Bloggers

DATED but USEFUL

When you first begin blogging, you just want to get your thoughts down on the screen and out on the Web. You probably already concentrate on spelling and punctuating correctly, check the grammar and double-check your sources. After all, content is what's crucial. But sooner or later, you look around at the way other's thoughts are dressed up in prettier clothes and seem, somehow, just more presentable because of it. How can you get those little extra touches into your own Posts and Comments?

The page engine takes care of the basics for us—a highly-tweaked Movable Type in the case of BlogCritics, and the plain vanilla Blogger at my own site. To get the extra styling, you need just a little HTML code. It really doesn't take much to make a difference.

   Pairs Are Important

The most crucial point to keep in mind is that HTML tags come in pairs. You "turn on" a style element like emphasis, then turn it off again when you're done with it. (With many style-sheets, the emphasis style is italic—to insure you get italic text, use the italic tag instead.) Once the emphasis style is on, if you leave off the second half of the pair, all the rest of your post will be emphasized. NOTE: In Movable Type, this style will extend into the Comments as well, forcing everyone's comment into emphasized mode.

   Bold Text Stands Out

When selected words or phrases are rendered in bold text, they stand out from the rest of your post, drawing the eye and emphasizing it in a way italic sometimes will not. In fact, italic text often appears light-weight in the midst of the site's standard font. You can embed these two tags to get italic bold text. Movie, book, and CD titles can be rendered in italic in place of enclosing them in quotes: Abbey Road rather than "Abbey Road." (This usage also resolves my personal dislike of placing punctuation inside quotes when I'm citing a title.)

Other tags are used in the same way, with the opening tag inside the "<" and ">" brackets, and the closing tag inside "< /" and ">".

• blockquote—indents the enclosed text. Some style sheets automatically italicize blockquote.
• u—underlines the enclosed text.
• small—reduces the size of the enclosed text. The site's style sheet will determine how much.
• ol and ul—these generate ordered (numbered) and unordered (bullet-point) lists. You need at least one element pair enclosed within these list tags
• li—"list item" or element. Be sure to close the element too—some sites will not render your list correctly unless you do.

   Links Are Easy

You only need two things to link text in your post or comment to another Web page: the URL of the site to which your link will lead your reader, and some text which that reader will click to invoke the link. You can link with a weak click here, but a better method is to link the title of the page or post, or to use an inviting phrase to induce click-through, like free money or wild sex. The extra switch target="new" causes a new browser window to open when the reader selects your link.

   Images Are Almost As Easy

Now for those pesky pictures, you need the same kind of information. There's a great shortcut to use when you see a picture online, and you want to include it in your own post. Right-click the picture and select Properties from the menu. The Location of the image is what you want—simply highlight it and click Ctrl-C. That's the URL of image for your HTML code. We want to properly credit such images, and you can use the floating caption to do that. (I used the floating caption to add the colored sub-heads under each code image.)

You may recognize the link code that is part of this block—this lets the reader click on the picture to go straight to the site you borrowed it from. This is very useful if the image does not load, but you should also add some text to cover that contingency. The alternate text might be a description of the image, or some other information that will help your reader if they don't see this picture. Other switches are available for img code.

• height="value"—If you specify height only, your image will be sized in proportion. The code images in this post are specified at height="270".
• width="value"—If you specify width only, your image will be sized in proportion. If you specify both height and width, the image may be distorted.

TOOLS: There are plenty of useful resources on the Net. My favorites include a table of HTML characters—great when you need an umlaut or grave accent—and any of several basic HTML tutorials. I can also heartily recommend My Function Keys, an inexpensive ($13) utility for Windows that lets you drop whole strings of text by clicking a function key. I have the tags I use most often—both halves of the pair—ready to drop at a single key-stroke into my text.

These are by no means the only useful HTML tags for posting. The best thing you can do is, when you see a tasty effect in someone's blog, use the "View Source" option in your browser. Cut the interesting code out and save it to your own system. Play with it—see if you can figure out its parameters, based on what you already know.

Have fun!
0321130073,0072132736,0764519956