Monday, September 14, 2015

Basic HTML for blogs and email

HTML (HyperText Markup Language) is the code used to create much of the content found on the Internet.  It can be a difficult and confusing language to master, but picking up the basics doesn't take much time.  By learning just a few simple HTML commands, you can add some snap, zing, or pizzaz to your blog, email message, or other online content.

Most free blogs as well as many email providers will allow the use of basic HTML commands.  You may not be able to embed video streams or create complex tables inside your email message or blog post, but there are some neat things that you can do.  This article will discuss simple HTML commands that are both easy to learn and easy to use.

- Text styles and fonts

Plain-text emails tend to be bland -- all the text looks exactly the same.  With a little well-placed HTML you can spruce up your emails and make them more attention-grabbing.

To alter the text style, there are simple commands for bold, italic, and underline.  The commands for all three are similar.  You use one command (called a tag) to turn on the style you want (bold, italic, or underline) and another command to turn the style back off, after the word or phrase you want to alter.  For example, to make the word "fruit" appear bold in this sentence:

This is a fruit stand!

You would type the sentence like this:

This is a <b>fruit</b> stand!

The <b> tag turns on the bold style, and the </b> tag turns it back off.  For underlining, the two commands would be <u> and </u>, and for italics -- you guessed it -- it would be <i> and </i>.

With HTML you can also change fonts and colors.  These commands may or may not be available in your email or blog editor, but here they are anyway.

To change a font, you would use <font face="fontname"> to turn the change on (where fontname is the name of a font, such as Arial or Times or Verdana -- all in lowercase) and </font> to turn it off.  Be wary of using weird or uncommon fonts; if the recipient or reader does not have that font installed on their computer, the text will probably not appear the way you want it to.

To change the font size, use the same tag but with a different attribute: <font size=x>.  "x" would be the number you want to make the text, ranging from 1 to 7.  The same tag as mentioned above -- </font> -- turns off the change in size.

To change the color of text, the command would be <font color="red">.  HTML recognizes and uses most common colors, but to increase the range of color you can use a six-digit hexadecimal code instead, which would look like this: <font color=AB1943C>.  Each digit changes the hue just a bit, ranging all the way from white to black.  There are several websites online where you can look up a color chart to find exactly the color you want.  Again, </font> turns the change back off.

- Links

Links are an essential part of many blogs, and they can be handy to include in email messages as well.  To insert a link, the command is:

<a href="address">text</a>

"Address" would be the web address or URL of the link you want to use (including the "http://") and for "text" (no quotes) you would type the text that would represent the link -- the word or phrase readers would click on to access the link.  For example, clicking on Yahoo! takes you to Yahoo!'s main page.

Using these basic commands, you can make your blog posts and emails better looking, more user-friendly, and more powerful.  Many blog sites and email providers will display a list of the HTML commands you can use in their editor, but if you don't see one, try the commands you want to use and see which ones work.

(Originally published on Helium.com, January 2010)

No comments:

Post a Comment