A Brief Introduction

Almost anywhere you look on the internet, you’re bound to see an image being used. Images help pages to become more visually stimulating, and can really make a website stand out as opposed to using plain text. Today we’ll look at how to use images in your HTML pages, as well as how not to use them.

Step 1: The HTML

An HTML image tag looks like this: <img src=”smiley.png” height=”200″ width=”200″ alt=”smiley face”/> As you can see, the image tag is a self closing tag, so adding </img> at the end is not required. Let’s go over the basic attributes of the image tag.

1. src - this is the location of the image relative to the HTML document.
2. height/width – These attributes determine the height and width of the image in pixels
3. alt - This is the alternate text to be displayed if the browser cannot find your image.

This is a required attribute of the image tag.
Now that we have an idea of how to write an image into an HTML page, let’s see this in action. The first thing we’ll need is a basic HTML setup. Have a look at the following code to get you started:

Step 2: Adding the Image

Now that we have a basic page layout, we can go ahead and add our image to our document. The image is located in the same folder as the HTML file, and is called smiley.png. We’ll be adding the image in the body section of our HTML page. Here’s what the HTML page should look like now:

Great work! Now, if you load the page up into your browser, you’ll see our smiley face image grinning from ear to ear. Recall, however, that the browser is finding the image relative to our HTML page. This can pose a problem in our situation. In most websites, the file structure needs a bit more organization. Suppose we had hundreds of images on our site. We may want to have a folder for images only. We’d have to change our code so that our browser would be able to find the image. Inside of the downloadable folder for this tutorial, there is a folder called images. Inside, there is another smiley face image called “Smiley 2″. Let’s have a look at how this might affect our code if we wanted to show this image instead of the first smiley.

Do you notice anything different about the src attribute for Smiley #2? Well, we had to give the browser the full path of the image since it wasn’t located in the same folder as our HTML document. Although it is an extra step, putting images in their own folder will drastically increase the organization of your website, which is always a good thing. However, the organization of your site is, of course, a matter of personal opinion.

Step 3: Styling an Image

Lucky for us, there’s no difference in styling an HTML image from styling a standard element. We simply need to apply a class or an ID to our image element, and then add our CSS styles as we see fit. Let’s give the first smiley a class of “smiley” so that we can add a border around it to demonstrate styling an image. Here’s what the HTML should look like now:

Now, the last step will be to add a bit of CSS that will give our original image a border. Here’s what the CSS file should loook like:

That does it! If you load the page up in the browser, you’ll see our original smiley face decorated with an awesome CSS border.

A Few Last Words You’ll find yourself using HTML images nearly as often, if not more often, than a lot of other tags. Knowing how to properly implement them canbe a very rewarding skill, and will make your pages look exponentially better. Join us next time when we’ll talk about adding scripts directly into your HTML pages.

Download Source Files