Everything But the Posts

Tips, Advice, and Templates from a Blogger Who Has Been in Your Shoes

  • Home
  • About Becca
  • The Book
    • Testimonials
    • Media Room
      • Links to share
      • Book Summaries
      • Cover Images
      • Ads/Buttons
    • Bonus Content
    • Buy The Book

HTML Simplified: 4 HTML Tips For The Savvy Blogger

This site contains affiliate links. Please see Policies for more information.

September 15, 2012 Becca Ludlum

Sometimes you need some code in your life! Here are a few easy to follow HTML tips for your blog. Knowing basic code can save you a few dollars down the line.

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

You might also like these posts:

  • SEO for Bloggers: 10 Tutorials from Beginner to ExpertSEO for Bloggers: 10 Tutorials from Beginner to Expert
  • How to set up your free MailChimp AutoresponderHow to set up your free MailChimp Autoresponder
  • How to: Edit a MailChimp CampaignHow to: Edit a MailChimp Campaign
  • How To Add A Subscribe Button For MailChimp To Your SidebarHow To Add A Subscribe Button For MailChimp To Your Sidebar

Blog Tutorials, Blogging Basics Tutorial

Comments

  1. Cameron says

    September 15, 2012 at 6:55 pm

    I absolutely LOVE using HTML. Its so fun to sit around and play with until things are looking just right! :D

    • Becca says

      September 17, 2012 at 8:30 pm

      I love it when it’s working for me. When I forget something, I might go a little insane!

  2. dadblunders says

    September 17, 2012 at 2:17 am

    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/

    • Becca says

      September 17, 2012 at 8:32 pm

      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!!

  3. Kristi {at} Live and Love Out Loud says

    September 17, 2012 at 12:56 pm

    Such great tips. I’m going to come back to this, for sure.

    • Becca says

      September 17, 2012 at 8:33 pm

      Aren’t they, Kristi? She has some great information in here!

  4. Jenny F says

    September 17, 2012 at 9:02 pm

    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!

  5. Bridget A says

    September 17, 2012 at 9:16 pm

    Wonderful tips! Thanks so much for sharing!

  6. Annie @ Mama Dweeb says

    September 17, 2012 at 9:18 pm

    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!

  7. Emily @FamilyNLifeLV says

    September 17, 2012 at 11:19 pm

    Thank you for this!! I am so html confused! This helps! Bookmarked, and pinned!

  8. Jenn @therebelchick says

    September 18, 2012 at 4:32 am

    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

  9. Alicia says

    September 18, 2012 at 4:33 am

    Thank you, thank you! I always need tech help and I love helpful tutorials!

  10. Amy @ Oh So Savvy Mom says

    September 18, 2012 at 7:11 am

    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!

  11. Kasandria Reasoner says

    September 18, 2012 at 1:07 pm

    Great tips!
    Kas

  12. Tesa @ 2 Wired 2 Tired says

    September 18, 2012 at 6:13 pm

    Love these tips! They’re very helpful and you make it so easy to understand and apply. Thanks!

  13. Kristina Vanni says

    September 19, 2012 at 1:40 pm

    These are great tips! Thanks for sharing!

  14. Becky Smith says

    September 24, 2012 at 6:34 am

    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!

  15. Amy says

    October 1, 2012 at 8:02 pm

    This is helpful… now can you please help me find the time to use it???? kidding. Love you.

  16. Jill says

    April 15, 2013 at 5:50 pm

    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!

  17. Marvia says

    August 15, 2013 at 5:07 pm

    Love this! So helpful. I am very novice at using HTML in my blog posts. You lay out simple explanations and tips. Much appreciated!

    • Becca says

      August 15, 2013 at 5:09 pm

      Thanks, Marvia! It definitely takes some getting used to :)

  18. unique gifts says

    February 17, 2014 at 7:34 pm

    Great information. Lucky me I found your site by accident
    (stumbleupon). I have saved it for later!

Search The Site

Subscribe Here

Looking for Something?

Buy the Book

Buy the EBook

Buy the EBook

Purchase on iBooks

© Copyright 2016 Everything But the Posts · All Rights Reserved · Site Design Carol Jones Media • Wordpress VPS