Adding Graphics and Pictures Your Web Site Using HTML

Most people who set out to create web sites are interested in adding images to their sites. Graphics and pictures help make a site visually appealing and serve to illustrate the site contents. For our purposes, we'll collectively refer to graphics and pictures as images.

This tutorial will focus on the HTML required to add images to a site, but will not delve into scanning, photo editing, or any other proceedure for readying the images. This tutorial is written assuming the images are already on your computer, in your web space, and ready to be added to the code.

There are two ways to add images to your site. The first method is using images uploaded to your web space. The second method is using images on someone else's web space. The code for these is very similar and is shown in the text area below.

An Explanation of the HTML

Placement : The code for images, both located in your web space or someone else's may be located anywhere within the body of an HTML document. Code should be placed exactly where you'd like the image to appear.

The Format : Image code, both for images located within your web space and for images located on other web sites is very similar. Both begin with a <, followed by an img (image), space (the space is important), src, the equals sign, quotation mark, file name, end quotation mark, >. This code tells your visitors' computers to load the image at a location equal to the file path you set. The only difference between the code for images within your own web space and images elsewhere on the web is that the complete URL must be included for images from other sites, whereas the "shorthand" file name may be used when the image is on your own server. Image tags do not need an ending, or closing tag.

The Image Tag : An image tag tells the reading computers to add the image you specified in place of the code it reads. I'll add an image tag now. The tag was added and the computer shows you the specified image in place of the tag.

A Few Words About Using Other Site's Images: HTML allows us to use images from other websites, as I showed you above. This practice is called hotlinking, pulling, and leeching amongst other things. Linking to images from other sites may not be allowed. Sites can cause the images to not appear on any site other than their own. The result can be a blank space, or another image specified by the site you're pulling an image from. Web etiquette disallows leaching. Rather, you should save the image from another site and upload it to your own web site.

Some visitors may have their browsers set to not display images. Additionally, search engines read code, but don't view images. Both of these facts are good reasons for including what is called Alternative Text to a graphic. Alternative Text is a lot like a caption and shows up next to the cursor as a visitor's mouse moves over the picture in most browsers. Plus, for those visitors who cannot view images, the text appears instead. I've coded an image tag with alternative text in the text area below.

An Explanation of the HTML

Alternative Text : As you can see, Alternative Text is placed within the image tag itself. Rather than adding the < after the second quote, you add a space, the word alt, an equals sign, another quote, whatever text you like, quote, and then the >. This tells the computer that, if the image cannot be displayed, to use Alternative Text equal to what you specify within the quotes. Lets take a look at how alternative text looks. I'll add an image tag with alternative text now . If you move your mouse over the image, you should see the words "DomainsToBuy". This was my alternative text. Browsers that were set to have images off would see just the alternative text. Some browsers do not display the text during a mouse rollover, providing the image displays properly.

On occasion you may want to place a link so that visitors click on an image to visit a link, rather than text. This is done using the code displayed in the text area below.

An Explanation of the HTML

Placement and Format : Use this tag as you would any other HTML link tag. The only difference is that, instead of typing text for your link after the link tag, you add an image tag. The link is closed immediately following the image. In this case, the computer views the image as the link name, rather than the text link names we've used previously.

Images as Links : Images are often used as links in this manner. Most commonly this is done with banners providing a site's logo and linking to the site. It is also a frequent occurance with image based toolbars. Here is an image used as a link. CLicking on it will return you to our home page.

From what we've learned already, we can create a decent looking web page with links, images, text effects, and basic formatting. Let's look at some complete site code which pulls together all of the tutorials we've done so far.