HTML Basics Every Blogger Should Know

Some of you may already be super familiar with HTML, but to some of you, it may look like a completely incomprehensible foreign language. If that is the case, allow me to help break down some of the very basic components of HTML. Manipulating the HTML within your blog can help you enhance your posts.

Open in a new window/tab.
Keep people in your blog when they click on the links within your posts. You can edit the web URL link by adding target=”_blank” to the end of the web address, as shown in the example below. This will make it so that whenever your readers click on one of your links, the new location is opened up in another tab or window. They will never have to hit the back button to try to navigate towards your blog!

Adjust the size of your images.
The width of this blog is 470 pixels. The width of images in my Etsy shop are 570 pixels. That means, I have to adjust them so they are 100 or more pixels smaller when I place them in the context of one of my posts. I do this by adding width=”470″ after the image location URL, as shown in the example below. The picture will stay proportional in size when only given a specified width or height measurement, so there is no need for me to figure out what the other measurement would need to be. This comes in handy when I am working with images of different widths, but want them all to be the same height, or vice-versa.

Aligning images and text.
If an image is smaller than the width of my blog column, then it tends to look better if it is centered, or embedded into the left or right of a field of text. Simply adding align=”center” or align=”left” does the trick! To align text so it is centered, use style=”text-align: center” in your paragraph tag, as shown in the example below.

Working with HTML tables.
Many of you have seen and adore my Treasury Tuesday features. These are Etsy treasuries, translated into HTML tables so that they can easily be allied to this WordPress blog. While I could construct these tables on my own if I wanted to, I cheat a little bit and let Red Row Studio make up the basic code for me to begin with. Now, because my blog column is 470 pixels wide, the best fit is a 3 column treasury, which leaves one odd item dangling at the bottom. To eliminate this awkward balance, I can go into the end of the code and delete the last table row, or “tr”. I also add the align=”center” to the table properties so that the tables are nicely centered in my blog posts.

Those are some of the most common HTML bits I utilize when blogging. I know that there are some small differences when working with WordPress or Blogger, but most of the general rules apply.


Tagged: , , , ,

4 thoughts on “HTML Basics Every Blogger Should Know

  1. salla April 9, 2012 at 10:46 am Reply

    a note on your image size tag – it resizes the DISPLAY of the image, but not the actual image. So if your original is 1200 pixals wide, 1200 pixals worth of picture still have to load. This can cause problems for those with more limited internet speed or bandwidth. So, if making major changes to an images size, go ahead and actually resize it in a photoediting program, then post it.

  2. elsielight April 10, 2012 at 5:44 pm Reply

    Thank you!! I am new at blogging and have looked at the HTML version of what I am doing but have been lost except for eliminating empty space at the top which would not disappear with the ‘backspace’ key. I very much appreciate you giving a few tips.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: