Basic HTML with Blogger for first time users

A couple weeks back Mike P. wrote me asking for a little HTML help and I wrote him this big ass e-mail with all sorts of info in it to get him started. Then Jeremy asked and today Will and I just forwarded them the same mail. Now, instead of doing that, I’m going to post all of the basics and then some here on J’s Notes for everyone to enjoy. This is in no way thurough, but it’s a start.

This is an edited and expanded version of the e-mail I sent Mike on April 17th:

Start with knowing cut and paste. Highlight something, hit “Ctrl + C” and that cuts it. then, find where you want to paste it and hit “Ctrl + V”. Well lookie there…

My first recomendation is to get your website on your computer and do all edits there first. That way you can stop and look at what you’ve done and not risk ruining the whole site. The best way to do this is, in Blogger, hit “Template”. Highlight everything in that box, that’s the HTML for your page, and cut and paste it into Notebook. Save that page somewhere on your harddrive as myblog.htm and now this is what you’ll edit. Do all of your edits in Notebook and be sure to save to this file. View it like you would any other website on your harddrive, open up the folder, click on it, it pops up, looks pretty, don’t it? Don’t worry about the Blogger gibberish, leave it there, that’ll fix itself once you put it back on blogger, it’s what reads your posts. For the love of God, leave it alone or you may be in a world of hurt.

To get a link to send you e-mail:

<a href=”mailto:j_man2@hotmail.com”>Mail Me</a>

will look like: Mail Me

Now you will have a link “Mail Me” that will let viewers send you e-mail. You can change the “Mail Me” part, but always always always be sure you have the closing tag (</a>) with any links. Actually, it’s good to have closing tags with everything but line breaks (<br> or <p>) (and some people will say have it with line breaks as well, but I don’t. So there.)

To make links is roughly the same. say you wanted to link to my site (hint hint):

<a href=”http://jsnotes.blogspot.com”>Jason Kenney</a>

will look like:

Jason Kenney

Now folks will see “Jason Kenney” and it will link to me. Yea!

NOTE Always, always, always remember the http:// part of a link that is not hosted on your server. If you do not have that, it will look for the page where your page is. What do I mean by that?

Well, let’s us J’s Notes for example. J’s Notes is http://jsnotes.blogspot.com/ and if I wanted to link to Yahoo, my links would have to be http://www.yahoo.com. If I forget the http:// the link will direct to http://jsnotes.blogspot.com/www.yahoo.com which doesn’t exist.

If you want to add buttons to the side like I have for some links, well, with blogspot you can not host images of your own (though, if you have space provided by your providor you can host the pictures there and reference them). But say you wanted to link to Elkboy like I do (erlend larsen’s site).

First you need to find the url by clicking on the link of course. http://elkboy.cjb.net

Then you need to find out the URL for the image. Right click on the image on J’s Notes and click on “properties”. There’s the address. Highlight it, cut and past it where you want the image to be. http://home.no.net/jolt43/elkboy/blog/elkboy.gif

Now, how do we make that show up?

will look like:

Now the image will show on your page (when you’re connected to the internet).

Want to make that a link? Start by adding something in that image tag, border=0, and then put the link around the image so it looks like this:

will look like:

Now you have a button! You need that border=0 thing, otherwise there will be a line around the picture for the link. Border=0 keeps it nice and clean.

Want to change the alignment of things? EASY!

There are a couple different ways to center something. I recomend:

<center>stuff you want centered</center>

will look like: stuff you want centered

though, you can also use:

<div align=”center”>stuff you want centered</div>

will look like:

stuff you want centered

But that sometimes puts a space before and after itself, I don’t know why, it just does.

Want something aligned to the right? Best way is:

<div align=”right”>stuff to the right</div>

will look like:

stuff to the right

And there ya go.

Hmmm…. I can’t think of much else in the way of tags. Blogger will do bold (<b></b>) and underline (<u></u>) and italics (<i></i>) for ya. If for some reason you want to strike through something, use:

<strike>stuff struck through</strike>

will look like:

~~stuff struck through~~

If you want a horizontal bar:

<hr>

will look like:

And you can set the width of that with the width=”x%” tags, so, if we wanted it to be 50%:

will look like:

And you can set the alignment with the align=”x” tag:

If you want a message board, best spot to go is http://www.server.com, it’s easy and pretty self explaitory. For a hit counter, I recomend http://www.sitemeter.com.

Oh, almost forgot, so you want links to open in a new window, eh?

you can do this one of two ways, have ALL links on the page open in a new window or specify what links.

To specify links you’ll add the target=”_blank” tag to your link tags:

<a href=”http://jsnotes.blogspot.com” target=”_blank”>Jason Kenney</a>

will look like: (click on it to see the effect)

Jason Kenney

But, if you wanted EVERY link on your page to open in a new window you could place the following tag in between your head (<head></head>) tags:

But ONLY do this if you want EVERY link to open in a new page. Some folks don’t like when you force an open in a new page.

I think that’s it, if I think of anything new I’ll be sure to let you all know. Or, if you have any comments or questions, let me know.

04.30.02 UPDATE 1337 EST Aligning images or having the text wrap around them (same thing) works like aligning anything else, simply add align=”x” in the image tags, so:

will look like:

You can make it align left and center as well. With the align tag, the text will wrap around it.

Leave a Reply Cancel reply