Day 3 of Blogging Boot Camp!
Missed a day?
Day One: 10 Best Apps for Blogging On the Go
Day Two: Simple Photo SEO
Today:
HTML: 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?
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>Blogging Boot Camp 2013 ROCKS!</blockquote> will do this:
Blogging Boot Camp 2013 ROCKS!
(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?
<img src=”http://www.creativekristi.com/wp-content/uploads/2013/06/html-cheat-sheet-for-bloggers.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:
Do you need to create an image that is linked to a web page?
<a href=”http://www.creativekristi.com/?cat=66″><img src=”http://www.creativekristi.com/wp-content/uploads/2013/06/blogging-boot-camp-square.png”></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
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!
Have a happy day,
If you like what you just read please Subscribe so you don’t miss a thing!
Follow me on Twitter & Facebook for updates in between blog posts & also sneak peaks!!
