How to use html for banner links (and other adventures)

[Anika Mae]

I was going to put this in a message to Lexie, but I expect there are other people who could use it, so gather 'round to hear about the wonders of html. It's long, but hopefully if you read it all and play around with the html a bit, you'll understand what you're doing and won't have to shout at your computer.


How HTML works

Firstly, it'll help if you have a simple way of seeing what your html does. You can use this page. Just put the html in the box and press "view".

HTML is made up of "tags", which tell your browser what to do with some text. Most tags need to be opened and closed. I'm going to start off by explaining how html works, using some of the simplest tags. One of them is the bold tag.

The bold tag looks like this: <b>
It tells your browser to show the text in bold from that point on. When you come to the end of the text that should be bold, you let the browser know by closing the tag, like this: </b>

Here are two examples you can try:
<b>This text is all bold.</b>
Only the word <b>bold</b> in this text is <b>bold</b>.

There are other tags which work in exactly the same way:
<i>This text is italic.</i>
<u>This text is underlined.</u>

You can also mix up your tags:
<b><u>This text is all bold and underlined.</u></b>
<u>This underlined sentence has one <b>bold</b> word.</u>
<b>This text starts off bold and then <i>becomes italic as well</b>, then it's just italic</i> and finally it becomes plain.

By the way, if you're previewing the html and don't like that there are no line breaks, insert the <br> tag (which doesn't need to be closed) wherever you want the line to end.


How to make links

A basic text link looks like this:
<a href=http://www.saafe.info/main/index.php>SAAFE forum</a>

The tag is called anchor and is represented by <a>, but that doesn't do much on it's own. The "href" tells it that it should point to a web page, then after the "=" you tell it exactly where to point. In this case it's the main page of this forum. If you go to that page you'll see the address in the address bar at the top of your browser. You have to include the "http://" at the beginning. It's ok to just type "www.saafe.info" into your address bar, but if you use that in a link tag, it will be interpreted as a link to somewhere on your site, rather than this one.

Ok, so after the anchor tag is opened, you write the link text. That's the text that you see, and can click on if you want to follow the link. Then you close the tag with an "</a>".


How to insert an image

Most sites ask for a banner link. A banner is an image, so you'll need to be able to insert one. The image tag is one that doesn't need to be closed, it just looks like this:

<img src=http://allgirltogaparty.co.uk/images/ichoose2.jpg>

"<img>" tells the browser that it should show an image, "src=" points it to where that image is on the web. Like with links, if you don't include the whole address including http://, your browser will think you're talking about an image on your own site. Even if you are though, it doesn't hurt to include the whole address, so include it unless you know what you're doing.

If you want anyone else to see your image, it has to be on the web somewhere, not just on your computer. You can use images that are on someone else's website, but this is called hotlinking and you shouldn't do it unless the owner of the website says it's ok. If you're just playing with the html preview it doesn't matter, so feel free to hotlink the image in my example while you experiment.

An image on the web has it's own unique address. Usually, it'll end in .jpg, .jpeg, or .gif. It might also be .png or .bmp.

If hotlinking is allowed, you can get the address of the image by right-clicking on it and selecting "copy image location" (not "copy image", that won't work). The address is then in your clipboard and you can paste it into your html code (right-click and select "paste").

If hotlinking isn't allowed, you'll have to upload the image to your own webspace. If you're using a website generator like moonfruit or escortsite, you'll have to find where it allows you to do that. Once you've uploaded the image you should be able to find out what it's address is. If you don't see that anywhere but you can see the image, try the right-click > "copy image location" method.


Making a banner link

To do this, you have to combine the anchor tag and the image tag to make a link where you can click on an image instead of some text. If you understand what's going on so far it's pretty simple.

The text link looked like this:

<a href=http://www.saafe.info/main/index.php>SAAFE forum</a>

You can add an image to the text like this:

<a href=http://www.saafe.info/main/index.php>SAAFE forum <img src=http://allgirltogaparty.co.uk/images/ichoose2.jpg></a>

Or replace the text and just have an image:

<a href=http://www.saafe.info/main/index.php><img src=http://allgirltogaparty.co.uk/images/ichoose2.jpg></a>


So that's how you can build a banner link yourself. If you have one that's gone wrong, you should be able to fix it by replacing it with your own code. In the next post I'll tell you how you can fix existing code.

[Anika Mae]

I lied. In this post I'm just going to ask you if you've been able to make sense of the last post. Can you make a link where you can click on the image you want to be taken to the page you want? If there are any problems we'll work through them here and then move on to the next bit.