Inserting and Linking a Picture

Print This Procedure ( doc :: pdf )

By now, you should be very comfortable with inserting and linking graphics. (You had a lot of practice just a little while ago when you were creating the navigation bar.) For this page, we opted to display the picture below the size 3 heading and along the right side of the page. Furthermore, because the photograph is a picture of Chris, we linked the photograph to the Background page.

To insert a linked picture within your page’s body text, follow these steps:

1.      Open index.html in a text editor if necessary, click after the </h3> tag in the second cell in the second row of the table, press Enter, and press Tab.

2.      Type the following link and image information:

<a href="background.html"><img src="images/p_chris.jpg" alt="pic: Chris Soll" width="170" height="250" border="0" hspace="25" vspace="10" align="right"></a>

In this step, you can see some added attributes to the <img> tag, which are defined as follows:

·      hspace enables you to specify extra space (in pixels) between the image and text on the left and right sides of the image.

·      vspace enables you to specify extra space (in pixels) between the image and text above and below the image.

·      align indicates to align the picture on the page, and text wraps accordingly. In this example, the picture is aligned to the right side of the page.

3.      Save index.html.