Thursday 6 November 2008

HTML hints for blogger users

Amy asked me to give her few tips on HTML for her blog so here they are.

For all the code instructions below, where I have given the code in Courier font, you must enclose this text in triangular brackets, thus:<>. Sorry for the confusion but I'm not sure how to include HTML code in my post without it actually working as HTML code.

The code for italics is em and /em or i and /i. These pairs of code are used at the beginning and end of the text to be italicised. The one without the backslash goes at the beginning, the one with the backslash goes at the end. (This is the same for all HTML tags.) I have found that the i code works in both the body posts and within the pre-coded page element gadgets. In contrast, em does not work in all of these gadgets, in particular the list one, I have found. You can use the i code in comments on blogger as well. Having said that, I remember reading somewhere that em is more widely used and accepted, so it might be better to get in the habit of using that where possible.

The code for bold is b and /b to begin and end bolded text.

The code for strike through is del to begin and /del to end. I am not sure that it works in every gadget, but it definitely does in the HTML script one, which is what I use for my book list where I cross things out.

The code for underline is slightly longer. To begin, use this: span style="text-decoration:underline;" and to end, use this: /span. According to the blogger help page I found this on, "The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links." Line-through works the same way as del but of course del is a whole lot shorter to remember and type.

If you want to make a list of items where each item is slightly further spaced apart than is achieved with a standard line break (the br tag), and there is a hanging indent (that is, second and subsequent lines of one item are indented but the first is not) - such as you can see in my list of "Classics I'd like to read in 2008" on the right hand column, then you need to use two sets of tags. The code to begin a list is ul, and to close it and go back to normal, you use /ul. Within these, you also need to surround each item of the list at the beginning and end with li and /li.

Why would you want to do all that when there is a gadget that makes lists, just as I have described? Because blogger's list gadget does not allow the del and span tags to be used, so if you want to use strikethrough, you can't unless you do it within an HTML/Javascript gadget.

And of course you might want to make such a list in a blog post as well. The only thing is that this tag is actually to create bulleted lists. It puts in the bullets when you use these tags in a post, but for some reason blogger doesn't show them in side bar elements, even using the same code. Don't ask me why, I don't know!

You can also make a numbered list using the tags ol and /ol instead of ul. Don't forget to use the li tags as well for each individual list item.

With all the above, don't forget to enclose the code within triangular brackets, or nothing will work.



And now for the biggie! How to centre the title on your blog.

Note, the curly brackets in the code below are real curly brackets. Don't go changing them to triangular ones like you needed to for the examples above.

If you go into the blogger dashboard, there should be an option to called "Layout". Go there and select "Edit HTML". Then follow the instructions to save a backup copy of your template in case this doesn't work! There are options to preview the changes and to clear your edits, but you can't clear saved edits.

Scroll down to where it says,
/* Header
-----------------------------------------------
*/


Then just a little bit below that you should find the following code:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

The bit I have rendered in bold is the bit you need to check. Does this say center or left, or is it missing? It must say center.

If that's okay, check down a little bit further to where it says something like this:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
text-align: center;
letter-spacing:.2em;
font: $pagetitlefont;
}

and here as well:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
text-align: center;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

As I have shown in this example, you can insert the text-align:center code anywhere in each of these sections as well.

Amy, I suspect that since your main title (which relates to the #header h1 portion) is centred but your title description (which relates to the #header .description portion) is not, you will find that you have to change a line of code in this third place. The code in these lower two sections seems to override the code in the first section, if my observations are correct.

HTH, Amy!

5 comments:

Mrs. Edwards said...

Thanks! I just scanned it over and wanted to thank you before you turn in for the night, if possible. I'm peaking at this before I grab my coffee and meet with the Lord, so I'll work on it later.
Blessings,
Amy

argsmommy said...

If only I had been able to read this post 5 months ago when I was starting my blog and trying to center the title, I would have eliminated so many hours of frustration! : ) Thanks for all the tips. I've just recently starting learning some of the HTML.

Sorry I have been absent for a while! I'm so silly -- I was starting to catch up with you in the Don Carson book, so I didn't want to read your latest post until I finished the chapter. But then life happened, and I still haven't finished that chapter, nor read your post! So now I have to finish my reading and catch up on reading your blog! With that kind of logic, sometimes I'm embarassed to say I teach my kids. : )

Kellie

Mrs. Edwards said...

Thanks again. I didn't have the "text align: center" bits, but after I inserted them, I still had the problem. Closer scrutiny revealed that my header description had the old width of 700, but I had changed the others to 950. I've had my fill of html for a while!

Sharon said...

Hi Kellie! I'm glad you let me know; now I don't have to feel guilty over not doing a post on the next chapter yet, since I was so busy writing my submission to the curriculum board last weekend. So thanks.

And Amy, I'm glad you worked it out. I wouldn't have thought of that even though i do vaguely remember changing those widths myself a few months ago when I went to three columns. It is so much more convenient, having more space to fill, isn't it? (he he he!)

~ Sharon

Mrs. Edwards said...

Hi Sharon-
This is nothing to do with HTML, but I saw this article about your PM Rudd and how he might potentially influence an Obama administration. It ran in the Wall Street Journal, which I subscribe to and read. Anyway, for what it is worth:
http://online.wsj.com/article/SB122576045510195491.html

Have a great weekend,
Amy