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!
I absolutely LOVE using HTML. Its so fun to sit around and play with until things are looking just right! :D
I love it when it’s working for me. When I forget something, I might go a little insane!
Becca,
Thanks for bringing this awesome guest, Nicole, to your site! I love to learn more HTML and I am constantly trying to find more things online to help me. These are some great tips and I didn’t know them all! thank you so much!
Aaron
P.S. Becca, I am nominating you and your blog for the Liebster Award http://www.dadblunders.com/2012/09/15/liebster-award/
Thanks for stopping by, Aaron! Isn’t Nicole awesome? I’ve already used a few of these tips!
And thank you for the Liebster award! I’ll post about it this week – how fun!!
Such great tips. I’m going to come back to this, for sure.
Aren’t they, Kristi? She has some great information in here!
Brilliant! I am so lost when it comes to HTML! Thank you for the simple guide through what it really all means! Great post! Thanks Nicole and Becca!
Wonderful tips! Thanks so much for sharing!
This is AWESOME!! So very easy to understand now! I know when I was first beginning I was soooo intimidated by html. Thanks for this helpful post!
Thank you for this!! I am so html confused! This helps! Bookmarked, and pinned!
Before I started using Myspace a long time ago, I had never heard about HTML – who would have thought that I’d learn so much from Myspace? LOL
Thank you, thank you! I always need tech help and I love helpful tutorials!
Ahhh, I learned so much HTML when I was on blogger. LOL I was always having to go into the HTML to fix the strange things blogger would do to my formatting. These are invaluable tips for bloggers!
Great tips!
Kas
Love these tips! They’re very helpful and you make it so easy to understand and apply. Thanks!
These are great tips! Thanks for sharing!
Thank you, thank you, thank you! I am always grateful when something as seemingly scary as HTML and coding is laid out in a simple (color coded, even!) way.
My blog, my computer, my brain and I are all filled with happiness . . . as well as new knowledge. Hooray!
This is helpful… now can you please help me find the time to use it???? kidding. Love you.
Ha! Thank you…but I’m so new and so HTML challenged that I’m not even sure these tips will help! Finding the time to play with it is the hardest part. Definitely coming back to this!
Love this! So helpful. I am very novice at using HTML in my blog posts. You lay out simple explanations and tips. Much appreciated!
Thanks, Marvia! It definitely takes some getting used to :)
Great information. Lucky me I found your site by accident
(stumbleupon). I have saved it for later!