New Blogger Series: Basic HTML for Bloggers

When I was in high school I took a web design class. Back then, HTML was pretty much the name of the game, so my classmates and I took the time to design websites for ourselves using HTML coding and editing. These days there are so many different types of code that are more commonly used, however my basic HTML skills have been some of the most useful when it comes to updating my blog.

I can edit my design, alter little things in my post, or do so much more with HTML-sometimes I can even use that HTML coding to go around some of the pre-set conditions by blogger. So today I wanted to take the time to share a little bit of my basic HTML knowledge with you so you can use it in your blog posting.

Before we get started with actual coding, it's important for you to understand some of the common HTML terms you may need to know. Here are some of the more important things:

Angle Brackets:
In HTML coding, the "greater than" and "less than" signs are actually called angle brackets. You need angle brackets around anything you post. So all of your coding will be put in angle brackets for it to be recognized as code and not just as something you've written. Each section of your code will need to start with a less than sign < and end with a greater than sign > to be complete.

Attribute
An attribute is something added to a basic tag/HTML code to give it further description. For example, if you were to have a basic image code, but want to define it further-you could add a size attribute to change the size, or add an alternative text to the photo. The additions to the basic IMG tag are what we would call attributes.

HTML Converter
A software that converts HTML into actual code. Most blogging software automatically does this when you switch between the HTML and Compose tabs. Though, in Blogger at least, you can turn it off in the right hand menu of your post-which I have done for this post so I can show you the HTML.

Closing Tag:
Some codes require a closing tag which is usually just a mirror of the start of the opening tag but with a backslash in front of it. For example, if your opening tag is your closing tag is . This tells the HTML code to stop there, so you can move on to something new. Some tags require closing (links, formatting, etc.) and some do not (such as and image).

Image Code:
Alt Text is the text that shows in place of a photo on your blog/site before the image has fully downloaded. This text provides an alternative description of what the photo is in case the photo stops loading so that someone can see whatALTERNAT there-or for those people who have disabled images entirely in their browser. Without the Alt Attribute it would just show up as a missing photo icon, like this:

But if you have an alt tag and the photo link is broken, it would look like this at least:

It's also extremely useful for SEO (Search Engine Optimization) as the search engines can pull from your Alt Text when crawling-Google has officially stated that they use the alt tag for this purpose. This is also useful for someone with a disability such as blindness, as the software they may be using to read your blog can also typically pull from that alt text to tell them what they would be seeing if they could see the image. In Internet Explorer the Alt Text shows up when you hover over the image.

To add an alt tag to a photo you would add the above code to the IMG code. For example:

Title Text/Title Attribute: title="TITLE OF PHOTO"
This one is pretty self explanatory, it should be a concise title of the image. In browsers such as Firefox or Opera, this is what shows when you hover over an image.

If you add both, your new IMG code would look like this:

Image Sizing: width="###" height="###"
If you want to adjust the size of your photos you can add width and height tags to it. The numbers for the sizes is in pixels though, so you'll want to make sure you understand the width of your blog post in pixels.

Your IMG code would now look like this:

For example, the main photo in this image (at the top) has a code that looks like this:

Anchor:
An anchor tab is for linking. Meaning you are anchoring whatever you want to "link" (a photo, some text, etc.) to a specific location. To anchor/link something you use the code above, and the HREF stands for Hypertext Reference. You must use a closing tag.

If you want to link to an external location with text, the code would look like this:
TEXT

If you are linking a photo to an external location, the code would look like this:

If you want the photo to link to itself so it simply opens larger when someone clicks on it, simply place the URL for the picture in both the anchor tag and the image tag. For example:

Most of the time when writing a post your blogging platform or document will allow you to just do this using their toolbars, however the tips are still good to know in case you want to change things on your sidebar or clean up your HTML.

Center:
TEXT/IMG
This will center whatever you're working on. It does need the closing tag or everything after putting in the opening tag will center.

DIV Alignments:
TEXT/IMG
TEXT/IMG
TEXT/IMG

Bold: TEXT/IMG
Italicize: TEXT/IMG
Underline: TEXT/IMG
Strike Through: TEXT/IMG

Line Break:
I use this one a lot. Sometimes blogger makes an absolute mess of my posts and simply hitting enter doesn't fix it. In those cases I can go in and use the br tag to put in my own breaks. Each br tag takes you to a new line, so if you want a line space between instead of it just being on the next line, use two br tags right next to each other.

Horizontal Line:

---

---

Unordered Lists:
The ul tag is for an unordered list-which we may just call bullet points.

• List item one.
• List item two.
• List item three.

• List item one.
• List item two.
• List item three.

Ordered Lists:
The ol tag is for ordered, or numbered, lists.

1. List item one.
2. List item two.
3. List item three.

1. List item one.
2. List item two.
3. List item three.

Start Your Ordered List with a Specific Number:
Sometimes when using an ordered list you want to add something after and then start with the next number, but the code wants to start with 1 again. Never fear, you can change that by adding a "start with" code, like this:

1. List item eighteen.
2. List item nineteen.
3. List item twenty.

1. List item one.
2. List item two.
3. List item three.

Block Quote:

QUOTE HERE

Sometimes you want a quote to show up in a different format so it's clear that it's a quote. Like so:

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something – your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.

-Steve Jobs

Add a Text Box:
YOUR TEXT < /textarea >
Possibly one of the most useful HTML bits of code I've used in composing blogs is a text box. I've used it a lot through this post-since you can put HTML in a text box without it converting. This is really useful if you want to provide HTML For a button or something other people can grab from your site. You would remove the extra space in the closing tag from my example though, as I had to remove it so my text box wouldn't close prematurely.

Scrolling Text Box:
YOUR TEXT HERE

It looks like this:

This is a scrolling text box. You can use the slider bar on the right there to scroll up and down and read my code here. You would replace what I've written here with the information you want in a scroll box. The more you rattle on in here, the longer your scrolling could be. The sky is the limit!
Are there any HTML tags you use regularly that I missed?

Lesson 1: Blogger Lingo Lesson 2: Finding Your Niche Lesson 3: Social Media Lesson 4: Start a Conversation Lesson 5: Tips for Good Blog Design Lesson 6: Becoming a Blog Sponsor Lesson 7: Accepting Blog Sponsors Lesson 8: Running a Giveaway Lesson 9: Hosting Linky Parties Lesson 10: Back Up Your Blog Lesson 11: Sizing and Positioning Blog Photos