Sunday, December 19, 2004

BLC102 - hyperlinks, italics and other basic formats

Okay, I’m sure all of you have broken your great big fear of the template by now and are ready for a bit more. You’re looking for something in particular that you’ve seen one everyone else’s site. You’re looking for a blogoll. Worry no longer! You’re in the right place. This article will cover creating links and a few other things like simple formatting. To get things rolling, I’m familiar with three ways of setting up a blogroll:

1. Go to Blogrolling and use their intuitive program.
2. Go to Bloglines and set up your feeds and then have the system create a blogroll.
3. Create the links yourself. This may be the least fun but the most functional.

The coding I do today is past what I’m showing here, but I’m tied to some weird code that pops stuff up when you put your mouse over the link. Without further adieu, here’s the basic format for a link (Remember, everything uses brackets. [], not carats):

[a href=”http://americanwarmonger.blogspot.com”]American Warmonger[/a]

The two important parts in this is the name you will see: American Warmonger, and the web address: http://americanwarmonger.blogspot.com. For a basic link this is all you will need. If you’re happy with this much, you do not need to read further. Go home and lead a sheltered blog life. For those that want to know the cooler stuff read on.

If you’ve clicked on most of the links on my sidebar you will notice that they usually pop-up in a new window. This is done with a simple modification to the normal link code. The added part looks like this:

target="_blank"

When used in a link (also known as a hyperlink) it looks like this:

[a href=”http://americanwarmonger.blogspot.com” target="_blank"]American Warmonger[/a]

Properly placed, this little addition of code will allow people to stay on your site while looking at other people’s sites that you are suggesting. In addition to this, there is the problem with turning a picture into a link. Take a look at that “blogger” icon either on your sidebar or the bottom of your page. Wouldn’t you like to be able to do that? It’s really not that hard. Usually, you can just link to a picture online, but some people don’t like you to do that so you need to get a picture host. I would recommend Photobucket. They offer free hosting with no pop-ups or strings attached. (I’d like to give a hat tip to Miss Patriot because she’s the first person I saw that was using them.) Something else neat is that they provide the code to insert into your site. Take, for example, my elephant and donkey picture. It can be turned into a link. The code off of photobucket looks like this:

[img src=”http://img.photobucket.com/albums/v473/aakaakaak/elephantdonkey.gif”]

This code, by itself, will add a picture to wherever you would like it to go. You can also add it to your link to create a linked picture like so:

[a href=”http://americanwarmonger.blogspot.com” target="_blank"][img src=”http://img.photobucket.com/albums/v473/aakaakaak/elephantdonkey.gif”][/a]

Did you see that? I took out the words “American Warmonger” and inserted the code for the picture. That wasn’t so hard now was it?

There’s still one last little cute piece. Have you noticed how most picture links will have a silly little saying about what the link address is or some stupid remark pop-up when you put your mouse over it? Well, that’s just another small piece of code. It looks like this:

Alt=”A proud member of the Christian community”/]

When you place it in a hyperlink it looks like this:

[a href=”http://americanwarmonger.blogspot.com” target="_blank"][img src=”http://img.photobucket.com/albums/v473/aakaakaak/elephantdonkey.gif” Alt=”A proud member of the Christian community”/][/a]

Well, that’s about as detailed I can get with a hyperlink. There are probably more bells and whistles like making them flash when highlighted but this should suffice.

Something you may have noticed is the tags that are around the other information. It looks like this:

[a][/a]

Here’s a breakdown of the basic tag format:

[a] = You can place most of your formatting features in here.
In between is the place for plain text or other, non-formatting features
[/a] = This always closes a tag.

There are many more tags to enjoy that are very functional in adjusting the text that you see on the screen. Most of these use two tags and change things within them, but two of them require no inner tag. They are:

[/br] = This is a line break. Treat it as hitting the enter button once. It can be done multiple times.

[/p] = Similar to [/br] but the spacing is different and can be used like an [a][/a] tag set.

Other tags include but are not limited to:

[b][/b] = This will make your text bold

[strong][/strong] = This will also make your text bold.

[I][/I] = This will make your text italics.

[strike][/strike] = This will put a line through your text.

[u][/u] = This will underline your text.

[blockquote][/blockquote] = This will move your text into a news-clipping format.

[li][li] = This will create a bulleted format. It is also used with other codes.

[ol][li][li][ol] = This will create a numbered list. Text should be in-between the LI marks.

There are many more tags available for use in many different forms. A good point of reference for additional tags is located here. This is just the basic quick-list and the parent site has many more examples. All of the above tags work with Haloscan comments as well as your blog (except for maybe the [strike]. I’ve heard that doesn’t work.) This means that all the formatting you put into your template you can also put into comments. It sort of shows that you’re techno-savvy enough to type the code yourself. It’s sort of like instant street credit.

Now that I’ve provided you with a healthy toy you should have something to play with until part three. Part three will include something I don’t see on a lot of sites these days: COLOR! Take a look around. Nearly everyone’s sites are either black or white with tid-bits of color thrown in. I’ve worked very hard to find some colors that don’t blind people while preventing the coldness of non-color. If you’d like to take the next step and delve into the world of color wait for course three.

(Course 2 of 3)
(The next and last course will be: BLC103 - changing colors, widths and other topics)
(I’ll probably add an addendum or two later as well.)

2 comments:

Anonymous said...

good evening ppl. I'm actually into shoes and I have been searching for that exact make. The prices as regards the boots were around 310 bucks everwhere. But definitively I set this locate selling them for the benefit of half price. I in reality want those [url=http://www.shoesempire.com]prada sneakers[/url]. I will absolutely purchase them. what can you tell me about these?

Anonymous said...

Nice fill someone in on and this mail helped me alot in my college assignement. Say thank you you as your information.