Adding an Image

"An image is worth a thousand words".

You can build your Web pages without images, but, hey, when was the last time you saw any kind of content without images?

Add some images to spice up your Web pages.

In this chapter you will:

Add an image (homePage.html, about.html)
Create an image link to another image (about.html)

At the end of this chapter your Web pages will look as follows:

The entire material needed for building a personal Web site is in the book's Web site. Each chapter has a link on the left of the page (see figure 5.1).

Downloading images from the book's Web site

Surf to the book's Web site
Click on Chapter 5 in the menu on the left hand side.
In the content pane, on the right side, you will see the images: grandfather.jpg, myPicSmall.jpg, myPicBIG.jpg
Download the three images to your computer. Instructions for downloading the images are available under Help on the left.

Figure 5.1: The book's Web site.

Add an image to homePage.html

Add the image images\grandfather.jpg to the homePage.html file, after the line justin's site.

Open Windows Explorer.
Go to drive C, select the justin folder that contains the homePage.html file that you built.
Double click on the homePage.html file.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file homePage.html, right-click with the mouse and choose Open With, and then choose Notepad.

Typing the content

In Notepad, position the cursor following the </h2> tag and press Enter.
Add an image aligned to the right of the window (align="right") with the caption (toolTip, attribute: title) my grandfather, and with space around it (for vertical space [top, bottom] use the attribute vspace, and for horizontal space [left, right] use the attribute hspace) in the following manner:
```
<img src="images/grandfather.jpg" align="right"
hspace="10" vspace="10" title="my grandfather" />
```
Save the changes that you made in the homePage.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the homePage.html file (see figure 5.2).

Figure 5.2: The home page with an image.

The purpose of the <img /> tag is to add an image to an HTML page. The value of the src attribute is the address of an image.

The image is aligned to the right of the window (align="right"), with a toolTip bearing the words my grandfather (attribute: title), and with space around it (vspace="10", hspace="10").

What are the dimensions of the image?

To check the dimentions of an image, position the cursor on the image.
Right click and from the shortcut menu (also called pop-up menu)select Properties.
Write the dimensions of the image:_______x _______pixels.
Close the Properties window.
Close the browser window where the homePage.html file is displayed.
Close the Notepad where the homePage.html file is displayed.

Add an image to about.html

Add the image images\myPicSmall.jpg to the about.html file, following the line About.

Open Windows Explorer.
Go to drive C, select justin folder that contains the about.html that you built.
Double click on the about.html file to view it with the browser.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file about.html, right-click with the mouse and choose Open With, and then choose Notepad.

Typing the content

In Notepad, position the cursor following the </h2> tag, and press Enter.
Add the image images\myPicSmall.jpg so that it is displayed on the left with space around it.
```
<img src="images/myPicSmall.jpg" align="left"
vspace="12" hspace="9" />
```
Save the changes you made in the about.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the about.html file (see figure 5.3).

Figure 5.3: The About Web page with an image.

Look at the image. Is the image a link? Yes / No (circle the right answer). Right now, the image is NOT a link. Now we will learn how to link an image.

Link an image to an image

Link the image named myPicSmall.jpg to the image images\myPicBIG.jpg so that it will open in the same window. Create a link with the title (toolTip): click to enlarge:
```
<a href="images/myPicBIG.jpg" title="click to enlarge">
<img src="images/myPicSmall.jpg" align="left"
vspace="12" hspace="9" />
</a>
```
Save the changes you made in the about.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the about.html file (see figure 5.4).

Figure 5.4: The image is a link.
Click the image to activate the image link.
Now you are looking at a much bigger image of justin. Can you see his legs? Yes / No (circle the right answer). Of course you can!
Close the browser window where the about.html file is displayed.
Close the Notepad window where the about.html file is displayed.

Part I

Part II