HTML Tutorial: Cheat Sheet For Bloggers

As bloggers we usually worry more about the projects we’re posting & the SEO to go along with it right? We don’t usually think too much about how to make a word bold or italic–I mean there are buttons for those right?

Well what about when you want to create a cute sidebar widget area? HTML should be used since it’s better for search engines and overall design.

Plus it’s really simple! (pinky promise!)

Today we’ll go through some of the basics but if you want to learn more in depth you should check out HTML Goodies or W3Schools.

HTML Basics for Bloggers

Have you ever clicked the html tab in your post editor? It looks like this:

When you click it the post looks all funny with added characters mixed in:

Most of us don’t need to use that very often and with all the ‘short-cut’ buttons available in the visual editor portion of the post editor we shouldn’t need to for the basics.

But still, sometimes, it’s better to know some basic html.

Perhaps you would like to make some text bold:

<strong>Bold Words</strong> will do this: Bold Words

Need to place some emphasis on a word? Try italics.

<em>emphasis</em> will place emphasis on a word.

Do you need to center an image or some text?

<center>Words To Center</center> will center them:

Words To Center

Need to quote someone in your post? Block quotes will indent and separate it for you.

<blockquote>When Life Hands You Lemons</blockquote> will do this:

When Life Hands You Lemons

(you can change the way a block quote looks using CSS but we won’t get into that here since it is more in depth. Just know that your block quote might look different than this one)

Underlining text isn’t used that often online because it can so easily be mistaken for a link but if you have the need to do it here’s how:

<span style=”text-decoration:underline”>Underline This Text</span> will Underline This Text

Need to Insert an image? (we’ve covered this before in my very first post here on 30 Days: How to Create Your Own Blog Button)

<img src=”http://www.thirtyhandmadedays.com/wp-content/uploads/2012/11/Free-Printable-Cheat-Sheet.png”> will do this:

How about linking a word to a specific page?

<a href=”http://www.creativekristi.com”>Creative Kristi</a> will do this:

Creative Kristi

Do you need to create an image that is linked to a web page (like a blog button!)?

<a href=”http://www.thirtyhandmadedays.com”><img src=”http://www.thirtyhandmadedays.com/wp-content/themes/30daysv2/images/1-1.jpg”></a> will do this:

 

Perhaps you need to cross something off a list?

<s>I am totally organized</s> will do this: I am totally organized

And the best part? You can combine the tags to create a different effect:

<strong><em>This is really important</em></strong> will do this: This is really important

Whew! That’s a lot for the basics isn’t it?

Worried you will forget it? Never fear! I have created a free printable HTML cheat sheet just for you! It is in pdf format and I split it into two 6 inch by 4 inch boxes so you can tape them up in your desk area or inside a binder for easy reference.

Want to download it?

Click the image below to be taken to the page to download!

 

If you have any questions please feel free to ask in the comments below! I will do my best to answer them!


Kristi
Kristi, known online as Creative Kristi, began blogging in 2008 when she found herself a new stay-at-home mama & new wife of a deployed soldier. Now a Military wife, mom of 2 & homeschooling wannabe she uses entirely too little sleep and too much coffee as she tweets the day away as @CreativeKristi. You can find her creating crafty things, giving away freebies & talking tech on her personal blog, Creative Kristi and if you are in the market for a blog makeover that is gorgeous, custom & affordable check out her graphic design business, Creative Kristi Designs.
Kristi

Latest posts by Kristi (see all)

Comments

  1. Audrey says

    Is there an easy way to use fonts that arent the default fonts? I don’t really like the boring standard fonts lol Thanks!

    • says

      Audrey, Yes there is! If you check out my DIY Your Blog Design page about half way down is a video tutorial on how to add web-safe fonts to your wordpress blog (blogger has some built in). If you want to target specific fonts you have installed then you can use html to ‘call’ on those fonts within a post. Similar to this: <h1 style=”font-family:verdana;”>A heading</h1>
      Check out w3schools.com for more specifics (you can change colors and other things as well). I hope that was helpful!!

  2. says

    thank you SO much for this! you are awesome indeed! i do have a question though, regarding the popular posts on blogger. is here any way to change the picture because blogger always uses the first one on the post which isn’t always the one i want used! thank you so much again and again :)

    • says

      Lisa, I am honestly not sure. I did a quick Google search and couldn’t find anything but maybe if you search with the actual widget title (I’m assuming popular posts is a widget?) then you might find something to help. Most of the time I suggest using the title image or the best image as the first image because that is usually the one people will pin anyway.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>