Easy Web Design, 3rd Edition
  EWD Projects :: Oldschool

Demystifying Basic HTML

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.

tip The <h3> tag is near the top of cell 2, row 3

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.

Next section

top of page