Basic HTML: Adding Images

By Joe Burns

https://www.htmlgoodies.com/primers/html/article.php/3478181/Basic-HTML-Images.htm (Back to article)

(with updates by editorial staff 1/12/16)

How To Add HTML Images To Your Web Pages!

By now you know enough to write a very nice, text-based home page in HTML, but it is the ability of the Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, you'll learn how to place an image on your web page and also how to turn an image into a link to another page using HTML to display the image.

Placing An HTML Image On Your Page

The HTML command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything on your web server because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in a subdirectory called "images". That means place the image in a directory (to be called "images") under the directory where your web pages are located (which would be the "root" directory for your site). There's more on that coming up in Primer #7.

Here's the HTML format for placing an image:

<IMG SRC="image.gif" ALT="some text" WIDTH=32 HEIGHT=32>

By replacing "image.gif" with "homepage.gif", one of my own graphics, you get this...



Here's What's Happening: the Image Element Parameters

Image Formats for the Web

There are four basic formats you will find on the Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Primer #1?



Where Do I Get Free Images For My Page?

They are literally everywhere. There are plenty of sites out there that offer tons of free images. Plus, since you've been surfing, you've seen hundreds of images already. If you see something on someone's page that you really like, ask to use it. Don't just take it. That's not right and could be against copyright law. Ask.  You'll probably get the image. In no time you'll have a slew to use on your page. One great place to start is freeimages.com where they have over 300,000 free images to choose from.

Activating An Image: Turning An Image Into a Link

Okay, this gets a little fancy. In Primer #4, I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on the hyperlinked words, to make the hypertext link. I'll make a link to my home page using the image above. Here's the format:


<A HREF="http://www.htmlgoodies.com"><IMG SRC="homepage.gif" ALT="Home"></A>

Look at it again. See what happened? I placed an image tag where I would normally have placed words. However, in case the image isn't visible for any reason I've added some alternate text stating where the link goes.

Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:



Neat, huh? But what's with that new border around the image? That's what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording it's replacing, so it places what's known as a "border" around the image. Some people like it. I don't, and I know how to get rid of it.

To make the border disappear, we need a tiny bit of inline CSS (Cascading Style Sheets). This used to be done using the Border attribute, but that's unfortunately no longer with us...

Here's the format:


<IMG STYLE="border: none;" SRC="homepage.gif" ALT="Home">

See what I did? I added some CSS that denoted that there should be no border. You can go the other way too if you'd like. Make it "border: 55px solid blue;" if you want. It'll just make a huge border. Note that the CSS is in quotes.

Here's what you get using the CSS:



Again, lay your pointer on the image without clicking. You'll see that it is active but doesn't carry that annoying blue border.

And that brings this to a close. The next lesson will deal almost exclusively with attributes you will use in order to manipulate your images. You'll truly impress your friends with this one.