HTML Simplified: 4 HTML Tips For The Savvy Blogger

y dear friend Nicole is a hard core coder! She knows bloggers, and knows that sometimes we all need a little code in our life. She has written this post to help you learn some basic code that can help you with your blog.

___________

Code can be intimidating, but its a good thing to have in your blogging arsenal. Don’t fret, it isn’t as scary as it seems and I’m going to break it down to its most basic parts and give you 4 real world scenarios where it may come in handy. It will save you so much time you’ll have an extra hour to spend on Pinterest every day. I exaggerate.

The biggest problem people have with HTML is leaving something out or not putting things in the right order. HTML is an exacting science and one missing “ or < will crash your site. I exaggerate again, but it will cause things to not work correctly.

Lets begin with the HTML element. What’s an element? In it’s simplest form, it’s a set of instructions enclosed in two tags…a beginning and an end. The tags are enclosed in brackets…like these: <>. All of these elements tell your computer what to do with the information you give it.

Behold the link element. Its made of 7 parts (according to me.)

Let’s go through them one by one.

1. The Brackets –  Like I mentioned, the tag has to have an opening and closing bracket. That tells your computer what to do.

2. The Attribute Name – A fancy word for “this is what kind of tag this is.” In the above example, the attribute is a link. It’s going to tell your computer to make the text between the two tags (in blue) be linked to another website. So far so good?

3. The Equals Sign – There’s no fancy name for this, but it HAS to be there. After the attribute, you have to include it…much like the days of algebra. Remember  x2 + 8 = 3y? Yeah, me either.

4. The Quotes – This is another common thing people forget. Your value (we’ll get to this next) always has to be surrounded by quotation marks…single or double, it doesn’t really matter, but they have to be there.

5. The Attribute Value – This is the other side of the equation. On one side of the equals sign we have the “name” and on the other side we have the “value.” It’s telling your computer, “I want you to LINK (name) to a website and this is the ADDRESS (value).” If you have one, you need to equal it out with the other.

Now, up to this point all of these pieces are part of the first tag. Remember, an HTML element is made of an opening tag, the content and a closing tag. Onward.

6. The Content – This is what goes in between the two tags. In the case of the sample above, it’s the text that gets…you guessed it…linked!

7. The Closing Tag – And last but not least, we have the closing tag, made up of another set of brackets, a “/” to tell the computer, “It’s the end, baby,” and the same attribute label. In this case it’s an “a” short for “anchor link.”

That’s the basics. From there tags are combined, nested, built on, etc. But that’s really all there is to it!

Real World Situation #1: Image Linking

So now what? “What does all of this mean and why do I need to know about it?”, you’re thinking. Well, let’s say Martha Stewart has found your blog and she wants to pay you $10,000 a month to put her small square ad at the top of your sidebar, linking to her website. The problem is, she only gives you the image and expects you to know how to add it and link it.

No problem, right? You whip out your handy HTML know-how and write this code like a boss, because you know all the elements that need to be included already…

<a href=”http://www.marthastewart.com”><img src=”http://www.the-address-of-where-your-button-image-uploaded.jpg”></a>

See what you did there? You added TWO elements together… a link element with an image element inside it. (You fast learners may notice no closing “img” tag. You’re right! There doesn’t need to be a closing tag on “img” tags. I said HTML was an exacting science…not one without exceptions).

Real World Situation #2: Open a Link in a New Tab/Window

Lets say you are a pro now with your text and image ads, but you notice that when you click on the link, it takes viewers away from your site to the advertisers site. No good. There’s a simple addition you can make to the link element to make sure that doesn’t happen. Take our example…

<a href=”http://www.marthastewart.com” target=”_blank”><img src=”http://www.the-address-of-where-your-button-image-uploaded.jpg”></a>

In the opening tag, I added target=”_blank”, which means, “open the link in a blank (or new) tab.” Now you are starting to see how HTML is so cool and powerful and can build on itself. It makes me giddy.

Real World Situation #3: Centering an Image or Widget

Have you ever wanted to pull your hair out because a widget you installed on your sidebar is left justified and everything else in your sidebar is centered? The Facebook Like box is famous for this. Some try to use a simple <center> tag to do the trick, but to no avail. I won’t go into a whooooole other aspect of HTML here but there’s a little trick you can use to center the most stubborn of widgets. Its call the div tag. See if you notice the pattern we know and love…

<div align=”center”>the code you want to center…all of it</div>

The div align tag takes all of the code and centers it (or left or right justifies, if you choose). Try it the next time you can’t get something to center…just remember both the beginning and the end tags!

Real World Situation #4: Page Breaks

Finally, lets say you have a bunch of text to add in a widget or in the footer of your blog. You typically don’t have to worry about page breaks in your post because your blogging platform takes care of that for you. But lets say you want to put a page break between two paragraphs or sentences. Enter the “br” tag…

Text text text text text text text text text text text text text

text text text text text text text text text text text text text

<br />

Text text text text text text text text text text text text text

text text text text text text text text text text text text text

If you want a blank line in between your text, then use two <br /> tags next to each other. Using only one just breaks the lines apart, but doesn’t separate them. As I said before, there are exceptions in HTML and this is another one. It looks a little different, doesn’t it? There’s no need to have an opening and closing <br /> tag. It just is what it is.

Now that your head is spinning and you hate me, go test it out! And if you want more, check out w3schools.com. Its an excellent and easy to follow resource on HTML and much much more.

Happy blogging!

Save