Chapter 5: Bringing your webpages to life with images
This chapter shows you how to add images to your webpages. Images play an important role in modern Web design. When used successfully, images add interest, act as a memory aid for people visiting your site to remember it in the future, and can assist with the successful dissemination of complex information to site visitors.
A Quick Overview on Files
We'll begin this tutorial chapter by briefly summing up the underlying concepts of files. You will need this information to understand how images are added to websites.
As you probably already know, there are many different types of files. For those of you who are not entirely familiar of what they are, here's a brief overview: A file is simply a collection of related computer data that contains some form of information. For example, the webpages that you have created so far are files. Each has a unique name that you specified, and each contains computer data that you can open, read, edit, and save. There are many different types of files such as video files, sound files, word processing files, spreadsheet files, image files... the list goes on. In this chapter, we will concentrate on the image files.
Each file on your computer usually has a file extension. The file extension usually consists of a full stop followed by three to four characters. These characters tell the computer what type of file it is. For example, the most common file extension for Web pages is .htm (although .html can also be used).
Image Files and HTML
Unlike when an image is inserted into a wordprocessed document, image files are not inserted directly into a webpage. Instead, a link is specified to the location of the file. As was discussed in Chapter 2, HTML webpages are actually plain text documents that contain formatting instructions. Since plain text documents only contain text, all other (binary) files must be linked to it.
Since you can't add images into a file that only consists of text, you will need to link to the image file using HTML code.
Although browsers support a wide range of image files, you should always try to use the GIF and JPEG file formats wherever possible. Many of today's image editing programs will be able to convert your image files into these formats.
Inserting Image Files
The element used to insert images into files is <img>. By itself, the element does little since it does not specify what image file should be inserted. This is were attributes play a role again. Use the src= attribute for this purpose.
Essentially, the code to add an image called picture.gif to your Web page is <img src="picture.gif">. Notice how the name of the file to link to is enclosed between two double quotation marks. The value of the src attribute does not need to be a file in the same directory as the Web page file. It can be in a different folder on your computer, in a different hard disk drive, or anywhere on the Internet. So, if you wanted to insert an image stored at the Internet address http://domain.com/images/a_picture_file.gif you would type <img src="http://domain.com/images/a_picture_file.gif">.
Image Attributes
There are a number of attributes which you may find useful when working with images:
The alt= attribute specifies alternative text that is displayed if the image is unable to be opened.
The width= and height= attributes enable you to define the size of the image. These attributes are also useful for maintaining the webpage's overall layout while the image loads or if the image is unable to be displayed.
Combining Hyperlinks with Images
As mentioned in the previous chapter, you can use images as hyperlinks. Simply replace the text between the <a> and </a> elements with an image element. Web browsers will usually place a border around images which are hyperlinks. To prevent this from happening, add the border="0" attribute and value to the image.
In the next chapter, you will learn how to take image hyperlinks one step further in Chapter 6: Image Maps.
