Saturday, April 17, 2010

HTML for BLOGGERS!

What the heck is HTML and why do you need it? Because you're a blogger, and if you don't know a little HTML, you're selling your blog, your posts, and yourself short. Here are some pointers.

HTML stands for Hypertext Markup Language, and it's the formatting language used to build websites. In fact, http:// stands for Hypertext Transfer Protocol.

See how that works!

You use HTML Tags in your editor to generate the HTML code. The browser then translates the HTML code into the visual representation you see on your screen.

Of course you can do the same things in the Compose editor on Blogger. You can even upload from word or another web editor and never worry about HTML tags.

And the readers respond: "What's your point, Eric? You just said I don't need to know HTML to compose my blogs."

You don't.

But what about comments on other blogs? No "Compose" tab there. What if you want to add a link-back to one of your blog posts!

What about adding flair to your sidebar menus. Take a look at my Required Reading and Links and Publications and Works to your right. See the italics? See the web links? See the image of my book? I did that with HTML. No editor there.

In fact, the Required Reading section is entirely composed of HTML, from an editor, because it's the HTML/Javascript Gadget you can add from blogger.

HTML is defined with TAGS. TAGS are enclosed within the less-than and greater-than signs on your keyboard. <open TAG> Your Text </close TAG>

Each tag requires an opening and a closing tag. Note that on the closing tag, a slash / is used.

For example, this is the tag for a hyperlink: <a>link</a>

Text between the tags is displayed on the browser according to industry standards.

In blogger, you can also swap between Compose and Edit HTML to see the markup text and get some ideas there. I do this all the time.

Some BASIC HTML TAGS


<hr> Forces a horizontal break point, as above. I didn't find this one in blogger's Compose editor.

<i>ITALICS</i>

<b>BOLD</b>

<u>UNDERLINE</u>

Hyperlinks and Images require a reference inside the tag, href and src respectively.

HYPERLINKS
<a href="http://diggingwiththeworms.blogspot.com/">HYPERLINKS</a>

IMAGES: Height/Width in pixels, or leave blank. Note that this tag has no closing tag.

<img src="yourimage.jpg" width=250 height=200>
or to display without changing the size
<img src="yourimage.jpg">




SANDWICHING
You can sandwich your HTML tags by combining them together. For instance, you want an italicized web link:

<a href="http://yoursite.com/"><i>HYPERLINKS</i></a>

gives you: HYPERLINKS

Going into more detail is beyond this scope. Google HTML Tags if you want more information. My intent is to show a few basic formatting tags that help with your posting and blog management.

For a great post on customizing your BLOG, check out Jon Paul: Sky Blogs


CHALLENGE

Add a BOLD HYPERLINK to your comment linking back to your website. Use your preview feature to ensure it is working properly before saving.

Hope this helps improve the look and feel and usefulness of your future posts!

- Eric

17 comments:

Tara said...

Woot! Can I keep you? I knew a couple of these, but not how to do the links. Thanks :)

Anastasia V. Pergakis said...

This is a great post. I do HTML and CSS coding in my sleep, and often I forget that others don't know it! Thanks for sharing!

Jemi Fraser said...

Okay - here goes my attempt (crossing fingers):

JEMI

I know diddly-squat about HTML so this is great :)

Eric W. Trant said...

JEMI: Nice, it works!

Tara: Yes, you can keep me. Please do!

Harley: I noticed a buncha bloggers cut-n-paste a link, but not a hyperlink. It's just text. I'm new to this, so maybe I'm a newb.

- Eric

Shelley Sly said...

Very helpful post! I rely on using HTML in so much of my blogging. Love the picture of the tattoo, that made me chuckle.

Thanks for linking me in your last post. Sorry I didn't get a chance to swing by earlier to thank you. Your wordle looked really cool. :)

Raquel Byrnes said...

Hey, that is cool! I love learning new things! Great post...

Raquel's New Hyperlink

Katie said...

HTML is definitely important! Studies have shown that not only do readers prefer short paragraphs online but also italics, bolding, and linking.

Good post! :)

Jon Paul said...

Eric--Very nice post! And timely too, since I did a post on customizing Blogger templates today, I linked over.

Thanks and great work.

Eric W. Trant said...

All, thanks! I hope this helps.

KM: I've also seen studies that show short paragraphs are more effective. When I can't use italics I'll use ~squigglies~ to highlight a word.

That's a habit I picked up from good-ol usenet. Remember that one! (maybe not)

JP: I linked over to your post in my main heading. Great post on blog customizations!

- Eric

Unknown said...

My whole world changed when I started learning HTML. This is a great post and very informative. Here's my link:

Chez Nicole!

Unknown said...

Arg! My link doesn't work :P Do over:

Chez Nicole!

Lola Sharp said...

Tar, darling, my love. I'm afraid I'll have to fight you for him!

Okay, Eric, let it be known right now, that I am THE most technically challenged person on this planet. I don't know what html is, have never done it, but I'm going to try right now.

Ready?

HYPERLINKS</a

Lola Sharp said...

Oh man, why didn't it work?

I'll try one more time, if you don't mind. (told you I just don't get it)
HYPERLINKS

Lola Sharp said...

Okay, it worked in that it does lead you to my blog...but is it supposed to say 'hyperlinks'? I thought it would say my blog name?

Thanks for teaching me something new today. :o)

~Lola

Eric W. Trant said...

Lola, Nicole, good job!

Lola, the link will say whatever is between the brackets. Replace the word HYPERLINKS with whatever you would like the link to say.

- Eric

Theresa Milstein said...

Great post. I've been intimidated by HTML, but I don't know why. I'm going to bookmark this post, so I can try these. Thanks!

Patricia Stoltey said...

I learned the code to make a link open in a new window so I didn't lose my blog reader if he followed a link. That was most helpful.

Now I want to find a way to put a frame around the photos I post, because my template doesn't do that for me. HTML is best learned one step at a time for those of us who don't know what we're doing.