If there's one thing I've learned over the past year, it's that Blogger's "Compose" view can be frustrating to use. I've ofter found myself switching to "HTML" view to correct formatting errors that were otherwise uncorrectable. In fact, I've found this happening so frequently, that now I bypass the Compose view altogether and just do everything in HTML mode.
Of course, if you're going to do it that way, it helps to have some understanding of how HTML works. The good news is, if you're used to using <b>bold</b> and <i>italics</i> tags in Blogger comments, you already understand the most fundamental aspect of writing HTML — tags.
But just to make sure we're all on the same page here, let's have a little refresher on the basics, shall we?
What you should know about tags:
When tags surround something, like a chunk of text, there will be an opening and closing tag.
eg: <b>bold</b> => bold
Note the forward slash in the closing tag.
Some tags, that don't surround anything, can be written using a type of shorthand, where the opening and closing tags get smooshed together into a single tag.
eg: <br /> => A line break (new line).
Some tags require extra information to be useful. The "link" tag needs a "href" attribute and the "image" tag needs a "src" attribute so that the browser can find the stuff they are referring to.
These attributes go inside the opening tag, and take the form of <a href="http://ABC.com"> or <img src="http://XYZ.jpg">.
eg: <a href="http://melbgirltakeonthings.blogspot.com">Melba's Blog</a> => Melba's Blog
eg: <img src="http://melbalearnstoblog.blogspot.com/favicon.ico" /> =>
Note that the image tag uses the smooshed tag style while the link does not.
The style attribute
There is a special "style" attribute that can be used with almost any tag to change the way the content within that tag will look. The "style" attribute uses a special format of style="property:value; property:value; etc". There are many, many properties that can be set with "style", but we are only going to look at two — color and text-align. Note the Yank spelling of "color".
<p style="color:red; text-align:left;">Some text.</p>
<p style="color:green; text-align:center;">Some text.</p>
<p style="color:blue; text-align:right;">Some text.</p>
Note that setting text-align on a paragraph tag (<p>) will actually align everything within the paragraph, including images.Formatting
There are a few things to keep in mind when dealing with HTML. Firstly, since "<" and ">" are used to create tags, you shouldn't try to type them willy-nilly in your code. Instead, if you want a literal greater-than or less-than symbol, you should type "<" or ">". There are many special characters with codes like these. They follow the pattern "ampersand, character-code, semi-colon". You can see here that the codes for less-than and greater-than are "lt" and "gt" respectively. There are two other codes you should know about. Since the "&" character is used for starting these special codes, you should use "&" when you wish to type a literal ampersand. The other code you should know about is " " which is used to type a blank space. Why do you need a special code to type a blank space? Well, that brings us to the second thing you need to keep in mind...
Interpreters, like your web browser, will collapse any excess whitespace. What does this mean? It means that multiple spaces will be reduced down to a single space and regularly-typed line-breaks (by hitting the "enter" key) will be discarded altogether. So this ...
What I
typed.
will collapse down to this ...What I typed.
So, to achieve a literal representation of what you typed originally, the code would have to look something like this...
What I <br />
<br />
typed.
It's up to you whether you want to wrap your paragraphs in paragraph tags (<p>) or break your text up using the line-break tag (<br />). I prefer to use paragraph tags, but I've noticed Blogger's "Compose" mode uses line-breaks. And here's something to be wary of; if you format your text in "HTML" mode, then switch to "Compose" mode, and then switch back to "HTML" mode, Blogger will reformat everything, including stripping out your paragraph tags and replacing them with line-breaks. My suggestion — if you're going to do any specialty formatting in "HTML" mode, avoid "Compose" mode like the plague.
In conclusion
There are a million other things we could cover. For instance, the sub-headings in this post are formatted using a level three heading tag (<h3> (— there are six levels all up)). There's also lists, and tables, and embedding things like YouTube videos. But I wanted to keep this post restricted to the most basic elements that you're likely to use in your posts.
I can cover other topics in other posts. Or you can check out w3schools.com or tizag.com if you want to learn more on your own.
If you become an author on this blog, you'll be able to go nuts making your own test-posts and experimenting with the stuff I've covered here. And theoretically, if you run into any problems, I'll be able to come in and look at your code and make suggestions or edits as need be.
