NHS Designs
Web Design
HTML

HTML 18: Adding Links to Images

More Photos for myPod

A new batch of photos has arrived for myPod: two more from Seattle and a few from a friend in Britain. The photos have already been resized to less than 800 pixels wide. Add the <img> elements for them (you'll find the images already in the photos folder), along with some additional text:

<html>
  <head>
    <title>myPod</title>
    <style type="text/css">
      body { background-color: #eaf3da; }
    </style>
  </head>
  <body>
    <h1>Welcome to myPod</h1>
    <p>
      Welcome to the place to show off your iPod,
      wherever you might be. Wanna join the fun? All
      you need is any iPod, from the early classic iPod
      to the latest iPod Nano, the smallest iPod
      Shuffle to the largest iPod Photo, and a digital
      camera. Just take a snapshot of your iPod in
      your favorite location and we'll be glad to post
      it on myPod. So, what are you waiting for?
    </p>
    <h2>Seattle, Washington</h2>
    <p>
      Me and my iPod in Seattle! You can see rain
      clouds and the Space Needle. You can't see the
      628 coffee shops.
    </p>
    <p>
      <img src="photos/seattle_med.jpg"
      alt="My iPod in Seattle, WA">
      <img src="photos/seattle_shuffle.jpg"
      alt="An iPod Shuffle in Seattle, WA">
      <img src="photos/seattle_downtown.jpg"
      alt="An iPod in downtown Seattle, WA">
    </p>
    <h2>Birmingham, England</h2>
    <p>
      Here are some iPod photos around Birmingham.
      We've obviously got some passionate folks
      over here who love their iPods. Check out the
      classic red British telephone box!
    </p>
    <p>
      <img src="photos/britain.jpg" alt="An iPod in
      Birmingham at a telephone box">
      <img src="photos/applestore.jpg" alt="An iPod
      at the Birmingham Apple store">
    </p>
  </body>
</html>

 

Exercise 1: Add Photos and Text to myPod

  • Type in the additional code for two more photos after the first. The new code for these images is highlighted in yellow.
  • Below the last <p> element, add a new <h1> element and another <p> element.
  • Add the heading "Birmingham, England" to the <h1> element.
  • Add the text and the last two photos to the bottom <p> element, as highlighted above.
  • Test drive the page in a browser.

 

Reworking the Site to Use Thumbnails

This page is starting to look downright interesting. But we're not done yet. The images are still quite large. Including a bunch of them all on one page means a long time to download, and your visitor has to do a lot of scrolling to see them all.

Wouldn't it be better if users could see a "thumbnail" image for each photo, and then click on the thumbnail to see the larger image?

Here's how to do this, one step at a time:

  1. Create a new directory for the thumbnails.
  2. Resize each photos to 150 by 100 pixels and save it in a "thumbnail" folder.
  3. Set the src of each <img> element in "index.html" to the thumbnail version of each photo.
  4. Add a link from each thumbnail to a new page containing the larger photo.

 

Exercise 2: Creating Thumbnail Images

To keep things organized, you need a separate folder for the thumbnail images. Otherwise, you'll end up with a folder of larger images and small thumbnails all lumped together, which could get quite cluttered after you've added a significant number of photos.

Lucky for you, a "thumbnails" folder has already been created inside the "myPod" folder. Since you've got a place to put your thumbnails, let's create them.

  1. Open "seattle_med.jpg" in Photoshop.
  2. Go to the File menu and choose Save for Web & Devices.
  3. Preset: Set this to JPEG Medium.
  4. Click on the Image Size tab.
  5. Change the Width to 150. Change the Height to 100. Click the Apply button for this change to take effect.
  6. Click OK.
  7. Navigate to out of the "photos" folder and into the "thumbnails" folder.
  8. Click Save.

The other thumbnail images have already been created for you.

 

Rework the HTML to Use the Thumbnails

Now you just need to change the HTML so that the <img> elements get their images from the "thumbnails" folder rather than the "photos" folder.

And, because you're currently using relative paths like "photos/seattle_med.jpg", that's going to be simple.

 

Exercise 3: Change the Relative Paths in the src

For each <img> element, change the folder in the relative path from "photos" to "thumbnails".

Here's the part of the HTML code to change:

    <p>
      <img src="thumbnails/seattle_med.jpg"
      alt="My iPod in Seattle, WA">
      <img src="thumbnails/seattle_shuffle.jpg"
      alt="An iPod Shuffle in Seattle, WA">
      <img src="thumbnails/seattle_downtown.jpg"
      alt="An iPod in downtown Seattle, WA">
    </p>
    <h2>Birmingham, England</h2>
    <p>
      Here are some iPod photos around Birmingham.
      We've obviously got some passionate folks
      over here who love their iPods. Check out the
      classic red British telephone box!
    </p>
    <p>
      <img src="thumbnails/britain.jpg" alt="An iPod in
      Birmingham at a telephone box">
      <img src="thumbnails/applestore.jpg"
      alt="An iPod at the Birmingham Apple store">
    </p>

 

Take myPod for Another Test Drive

myPod screenshot after changing to thumbnail images

Ahhh...much better. Visitors can see all the available pictures at a glance. They can also tell which photos go with each city more easily.

Now we need to find a way to link from each thumbnail to the corresponding large image.

The images used to be on top of each other - now they're side by side

Right. That's because the <img> element is an inline element. In other words, we didn't "pull anything." Because <img> is an inline element, it doesn't cause linebreaks to be inserted before and after the element is displayed. So, if there are several images together in your HTML, the browser will fit them side by side if the browser window is wide enough.

The reason the larger photos weren't side by side is that the browser didn't have room to display them next to each other.

 

Turning Your Thumbnails into Links

You're almost there. Now you just need to create a link from each image to its larger version. Here's how it's going to work:

turning thumbnails into links
Click the image above for a larger version.

To do this you need two things:

  1. A page to display each photo along with a heading that describes its content.
  2. A link from each thumbnail in "index.html" to its corresponding photo page.

Let's create the pages first, and then we'll come back and finish off the links.

 

Create Individual Pages for the Photos

First, you'll need a new folder called "html" to hold these individual pages. Luckily, there is already one below the "myPod" folder already waiting for you:

myPod site map

Now we're going to create one HTML file for each photo. If the photo is called "seattle_med.jpg", then let's call the HTML file "seattle_med.html" just to be consistent. In each HTML file, we'll have a heading that describes the photo, followed by the photo.

Here's the HTML for the first Seattle photo. All the other pages will follow this same format:

HTML for the first Seattle photo
Click the image above for a larger version.

 

Exercise 4: Creating "seattle_downtown.html"

If you look in the "html" folder in your myPod folder, you'll find all of the single photo pages already there, except one - the page for "seattle_downtown.jpg".

  1. Start a blank file in Notepad.
  2. Type in the HTML skeleton.
  3. Use this <title>: myPod: Downtown Seattle
  4. Inside the <body> element, put in one <h1> element followed by one <p> element.
  5. Put this text in the <h1> element: Downtown Seattle
  6. Put an <img> element inside the <p> element, with the following attributes:
    1. src - ../photos/seattle_downtown.jpg
    2. alt - An iPod in downtown Seattle, WA
  7. Save the file in the "html" folder and name it "seattle_downtown.html".
  8. Test the page.

 

So, How Do I Make Links Out of Images?

You've got your large photos, your smaller thumbnails, and even a set of HTML pages for displaying individual photos.

Now you need to put it all together and get those thumbnails in "index.html" linked to the pages in the "html" folder. But how?

To link an image, you put the <img> element inside an <a> element, like this:

putting an image into a link
Click the image above for a larger version.

Once you've placed the <img> element inside an <a> element, the browser treats the image as a clickable link. When you click the image, the browser will retrieve the page in the href attribute.

 

Exercise 5: Add the Image Links to "index.html"

This is the last step. You just need to wrap <a> elements around each thumbnail's <img> element in your "index.html" file.

Remember, the href of each <a> element should link to the page containing the larger version of the image in the "html" folder.

Make sure that your links, thumbnails, and pages all match up correctly.

Here's the complete "index.html" file. All you need to do is add the HTML highlighted in yellow. Then save and test your page.

<html>
  <head>
    <title>myPod</title>
    <style type="text/css">
      body { background-color: #eaf3da; }
    </style>
  </head>
  <body>
    <h1>Welcome to myPod</h1>
    <p>
      Welcome to the place to show off your iPod,
      wherever you might be. Wanna join the fun? All
      you need is any iPod, from the early classic iPod
      to the latest iPod Nano, the smallest iPod
      Shuffle to the largest iPod Photo, and a digital
      camera. Just take a snapshot of your iPod in
      your favorite location and we'll be glad to post
      it on myPod. So, what are you waiting for?
    </p>
    <h2>Seattle, Washington</h2>
    <p>
      Me and my iPod in Seattle! You can see rain
      clouds and the Space Needle. You can't see the
      628 coffee shops.
    </p>
    <p>
      <a href="html/seattle_med.html">
        <img src="photos/seattle_med.jpg"
        alt="My iPod in Seattle, WA">
      </a>
      <a href="html/seattle_shuffle.html">
        <img src="photos/seattle_shuffle.jpg"
        alt="An iPod Shuffle in Seattle, WA">
      </a>
      <a href="html/seattle_downtown.html">
        <img src="photos/seattle_downtown.jpg"
        alt="An iPod in downtown Seattle, WA">
      </a>
    </p>
    <h2>Birmingham, England</h2>
    <p>
      Here are some iPod photos around Birmingham.
      We've obviously got some passionate folks
      over here who love their iPods. Check out the
      classic red British telephone box!
    </p>
    <p>
      <a href="html/britain.html">
        <img src="photos/britain.jpg" alt="An iPod in
        Birmingham at a telephone box">
      </a>
      <a href="html/applestore.html">
        <img src="photos/applestore.jpg" alt="An iPod
        at the Birmingham Apple store">
      </a>
    </p>
  </body>
</html>

 

Turn in Your Files

Turn in your lastnamefirstinitial_mypod folder into the Inbox.

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by >