Site Development
Downloads
Help!!
Home
The Image LinkAn image link is a clickable image that works like a link. It's made like a text link except that an <img> is placed between the <a> tags: <a href="http://www.winzip.com/" target="_blank"> This code would produce the image link below. Click it to go to WinZip's site. It will open in a new window (target="_blank").
We can position this image link by using the ALIGN attribute in the <img> tag for left and right alignment. It can be centered by enclosing the entire link's code inside <div align="center"> and </div> tags. You should already be familiar with the components of the above code. It's just an image between <a> tags as opposed to a text link. The link takes the viewer to http://www.winzip.com/ (HREF) and opens their page in a new window (target="_blank"). The image between the tag is one of WinZip's logos (SRC="winzipnow.gif") and I've added some ALT text to better describe that the image is a link and what it does ("Get WinZip"). Notice that the image has a blue border around it. That border is not part of the image. Here's a side-by-side comparison:
You can increase or decrease the border with the BORDER attribute. To remove the border in image links, just set BORDER to "0": <img src="winzipnow.gif" alt="Get WinZip" border=0> This would make a borderless image link. The value of BORDER is the thickness of the border in pixels. You can add borders to regular images, too.
The color of your image's borders will be the same as the surrounding text. Image link borders will be the same color as link text. We'll talk more about coloring the border around images when we study CSS. One more detail: You'll notice in the code example above, that I always code the closing </a> tag on the same line of code as the <img> tag. In fact, not only is there no line break, I didn't even use a space between the <img> and closing </a> tag. I did this to avoid an odd glitch. Sometimes in making image links, a line break or space between the <img> and closing </a> tags in the code can be rendered as an annoying underscore ( _ ) when rendered by the browser. It's not a consistent glitch, but it can be avoided entirely by merely coding your closing </a> tag right after your <img> tag. Below is what the glitch looks like:
Page BackgroundsYou can also make an image a background for your page. To do this add the BACKGROUND attribute to your <body> tag: <body background="coffee.gif"> This would "tile" our small coffee cup image to cover the whole page. Click here to see what this would look like. Images "tile", or are replicated across the page, by default when used as a BACKGROUND. If you size your image in an image editor to be large, a single image can be a photo background for the page. This is rarely done as the image file size is large and downloading the BACKGROUND takes up too much time. Most people using BACKGROUND use a small, specially made image that will readily tile across the page. Pay special attention to text color when using a background. It can be very difficult to get a text color that looks good over the entire page. In my coffee cup example, this becomes apparent as the text blurs over the darker parts of the BACKGROUND. If you're using a BACKGROUND image and colored text, you might want to add BGCOLOR, too. Think about this. You've got a page with a dark, starry night BACKGROUND and white text. When someone visits your page, it takes a while for the BACKGROUND to load. If they have a default white screen background, they won't be able to see your text until the BACKGROUND loads. They may think the page is blank and go elsewhere. The above can be avoided by using a black BGCOLOR along with BACKGROUND: <body background="stars.gif" text="white" bgcolor="black"> Now when your page is being loaded, the black BGCOLOR is immediately loaded and the text is visible. When the BACKGROUND loads, it will automatically be displayed over the BGCOLOR. BACKGROUND always takes precedent over BGCOLOR when the both are used together. The BGCOLOR just lets the viewer see your text before BACKGROUND loads. There are a couple of other reasons to use BGCOLOR when you use a BACKGROUND image. Some BACKGROUND images my have transparent parts. BGCOLOR would be the color seen through this transparency. Also, your BACKGROUND image might get corrupted by your server, uploading, etc. In this case, BGCOLOR would substitute for your BACKGROUND image until the problem is cleared up. There's one other neat property of background images you can use. It's the BGPROPERTIES="fixed" attribute/value. This "freezes" the background image in place so that it does not scroll when the text does. It appears as if the text is floating over the background when the page is scrolled. BGPROPERTIES is only recognized by the Internet Explorer browser. Netscape does not support this effect.Here's and example. Here's the code for "fixing" a BACKGROUND: <body background="coffee.gif" bgproperties="fixed"> CONGRATULATIONSYou've completed the Beginning HTML course. You've learned how to make a basic HTML file. Add and format text, links, and images. Text, links, and images are the cornerstones of web pages. I'd suggest you make an overall review of what you've learned so far and then go to the exam to see how well you really know your stuff. Keep reviewing as needed until you can make all of the exam pages. When you can make all of the exam pages, move right on to Beginning CSS. |
To the left is a 10 pixel border around the coffee cup.
To Beginning HTML Review
Back To Beginning HTML Index