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.
Basic HTML for Bloggers
Common HTML Terms
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 <center> your closing tag is </center>. 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).
HTML for Images
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:
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:
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:
HTML for Links
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:
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:
The Style Basics
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:
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:
Bold:
Italicize:
Underline:
Strike Through:
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.
Ordered Lists:
The ol tag is for ordered, or numbered, lists.
- List item one.
- List item two.
- 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:
- List item eighteen.
- List item nineteen.
- List item twenty.
Block Quote:
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:
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:
It looks like this:
The Better Your Blog Series is a series of posts written by myself, Angie of My So-Called Chaos, from my own personal experience as a long-time blogger, small-business owner, and as someone who’s worked with technology and customer service for many many years. They are written with the intent of sharing the knowledge I’ve acquired through years of practice and education (both self-taught and school-taught) with others in the blogging community.
In this collection of posts you’ll not only find tips for maintaining your blog, but also for anything that goes along with being a blogger and/or small business owner-like design tips and tutorials, social media, tools, and more.
The posts in this series are constantly being updated to make sure they stay current, and the series is constantly being added to. Please contact me if there’s something you’d like to learn.
