HOME  Subscribe [RSS]  Podcast [RSS]  HTML Tutorials  Podcast Posts  My Design Blog  LinkXchange  CafePress Shop  
Showing posts with label links. Show all posts
Showing posts with label links. Show all posts
Sunday, September 3

Images & Image Links

Let's start w/a basic image tag: <IMG SRC="image.gif" ALT="text" WIDTH="specified in pixels" HEIGHT="ditto">.

Now, let's break down these attributes, one by one.

SRC-This is the source/url of your image file.

ALT-This is text that will be seen when you mouse over the image. Also, if some of your viewers have a TEXT ONLY Browser, they'll be able to see the text you wrote. So, it's probably a good idea to be somewhat descriptive.

WIDTH/HEIGHT (specified in pixels)-By specifying the width & height of your image, the browser makes it load faster, which makes, happy visitors! If you don't know the pixel width & height of your image, you can find out by using an Image Editor/Maker. For the sake of explanation, I'll use Photoshop. Click on the Image menu, then click Image Size. When the Image Size dialog box comes up, DON'T CHANGE ANYTHING! Just take note of the height & width, write them down if you need to.

Now, let's make Image Links

To begin, we need a basic link. If you dont know how to make a link, please refer to the links tutorial. Now here's our link: <A HREF="page.html"></A>.

Instead of putting text between the <A></A> tags like we would normally do, we put an image tag. If you'd like, you can refer back to that tutorial.

Here's how it'll look:
<A HREF="page.html"><IMG SRC="image.gif" WIDTH="specifiedinpixels" HEIGHT="ditto" ALT="description" BORDER="0"></A>

That's It, I hope this has been helpful!

Links

For starters, we need the <A></A> tags. This is where all your link info goes, URL, etc. Ok, let's focus on the <A HREF=""></A> tag. Your URL & text info will go within this tag.

First let's focus on the HREF attribute. Here's an example of how the tag will look: <A HREF="http://www.yoururl.com"> HREF lets you know that, what follows is an URL & that you're going to link to it. Now say you want your link to read, My Site!

Well, here's how we do it. Note the </A> tag that occurs at the end? This makes it so your link will read the way you want.

Here's an example:
<A HREF="http://www.domain.com">My Site!</A>

Here's how it actually looks: My Site!

Now we'll go over the target attribute. This attribute has many good uses. (In use with frames, for example) You can use this attribute to open a new browser window, or to break your site out of Frames. First, I'll show how to open a new window for your link: <A HREF="http://www.yoururl.com" TARGET="_blank">My Site!</A> This opens a new window when you click on the link.

Here's how it works: My Site!

Now for a frame breaking link. Here's an example: <A HREF="http://www.yoururl.com" TARGET="_top">My Site!</A> This opens the new page "on top" of the old page, thereby breaking the page out of any Frames. Cool, Huh!

Here's how this one works: My Site!

I hope this helps!