I’m super excited to introduce to you a dear friend of mine, Nicole (she’s an amazing blog/web designer). I talked her into giving you a few of her best HTML tips because it’s one area that I wish I knew more about. Go ahead and bookmark this post so you can refer back to it when you get stuck!
And? I made that snazzy button up there with all of the Photoshop skillz Nicole taught me – I have finally gotten past my PicMonkey crutch. She has tons of tutorials on her blog – check them out!
Hey there! I’m Nicole from The Pixel Boutique and I get to call Becca an IRL friend (that’s “In Real LIfe” for you non-geeky, blogger types). Becca asked if I’d guest post for her today and I said a hearty, “Sure!”
So I thought I’d talk about the exhilarating world of HTML. If you’re a blogger, I bet you’ve run into situations where you wished you knew just a little HTML. Am I right?
It 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 button 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 doesnt 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 doesnt 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!
