NHS Designs

Resources

Create a folder called lastnamefirstinitial_
mypod
in My Documents.

Create 4 folders inside this folder with the following names:

  • html
  • logos
  • photos
  • thumbnails

Right-click the file below and save it into your mypod folder.

index.html

Right-click each of the files below and save it into the folder indicated.

HTML Folder
applestore.html
britain.html
seattle_med.html
seattle_shuffle.html

Logos Folder
mypod.psd

Photos Folder
applestore.jpg
britain.jpg
seattle.jpg
seattle_downtown.jpg
seattle_shuffle.jpg

Thumbnails Folder
applestore.jpg
britain.jpg
seattle_downtown.jpg
seattle_shuffle.jpg

Web Design
HTML

HTML 17: Working with Images

Creating the Ultimate Fan Site: myPod

iPod owners love their iPods, and they take them everywhere. Imagine creating a new site called "myPod" to display pictures of your friends and their iPods from their favorite locations, all around the world.

My iPod in Seattle

What do you need to get started? Just some knowledge of HTML, some images, and a love for your iPod.

I've already written some of the HTML for this site, but I haven't added the images yet - that's where you come in. But before you get to the images, let's get things set up.

Follow the instructions in the green sidebar to the left.

Open the "myPod" folder and here's what you'll see inside:

myPod directory structure

 

Check Out myPod's "index.html" File

Open up the file "index.html" and you'll see work has already begun on myPod. Here's the HTML so far, including some "Ready Bake" CSS which gives the page a light green background color:

<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>
      </body>
</html>

Check it out in a browser. Not bad, but we need images.

 

Exercise 1: Inserting an <img> Element

As you can see, a lot of the HTML is already written to get myPod up and running. All you need to do is add an <img> element for each photo you want to include.

where the image needs to go

There's one photo so far, "seattle.jpg", so go ahead and add an element to place that image in the page below.

<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>
                                                      
      </p>
      </body>
</html>

  1. Insert a new <p> element beneath the other two.
  2. Figure out the relative path to "seattle.jpg" using the diagram of the myPod site above.
  3. Place your <img> element inside the new <p> element.
  4. Include an alt attribute with the text: "My iPod in Seattle".
  5. When you are ready, save your file and load the page in a browser.

 

Whoa! The Image Is Way Too Large

Well, the image is right there where it should be, but that is one large image. Then again, most of the images that come from digital cameras these days are that large (or larger). Should we just leave the image like it is and let visitors use the scroll bar?

You're going to see there are a couple of reasons that is a bad idea.

Let's take a look at the image and the browser and see just how bad this situation is...

how bad the situation is
Click the image to see a larger version.

What's wrong with having the user just use the scroll bar to see the image? In general, Web pages with large images are hard to use. Not only can your visitors not see the entire image at once, but using scrollbars is cumbersome. Large images also require more data to be transferred between the server and the browser, which takes a lot of time and may result in your pages being very slow to display.

Why can't I just use the width and height attributes to resize the images on the page? Two good reasons:

  1. The browser stills has to retrieve the entire large image before it scales it down to fit your page.
  2. When browsers resize an image, the image looks pretty bad compared to resizing in Photoshop.

You said that the typical browser window is 800 pixels wide; what exactly does that mean? Your computer's display is made up of millions of dots called pixels. If you look very closely at your display you'll see them:

seeing pixels

And, while screen sizes and resolutions tend to vary (some people have small monitors, some large), 800 pixels id the typical width that most people set their browsers to. So, 800 pixels is a good rule of thumb for the maximum width of your images (and your Web pages too, but we'll get to that later on.)

How do the number of pixels relate to the size of the image on the screen? A good rule of thumb is 72 pixels to every inch, although depending on your monitor you can have up to 120 pixels in an inch. Assuming your monitor has 72 pixels per inch, if you want an image to be approximately 3" wide and high, you'd make it 72 (pixels) times 3 (inches) = 246 pixels, or, rounding up, 250 by 250 pixels.

 

Resize the Image to Fit in the Browser

Let's fix up this image so it fits the browser page better. Right now this image is 1200 pixels wide by 800 pixels tall (you'll see how to determine that in a sec.) Because we want the width of the image to be less than 800 pixels, we need to decide on a width that would fit our myPod Web page nicely.

The whole point of myPod is viewing photos of iPods in their surroundings, so we want to have reasonably large images. If we reduce this image size by one half to 600 pixels wide by 400 pixels high, that will take up most of the browser width, while still allowing for a little space on the sides. Sound good?

Let's get this image resized...

 

Exercise 2: Resizing an Image

Here's what you're going to do:

  1. Open the image in Photoshop.
  2. Reduce the image size to 600 pixels by 400 pixels.
  3. Save the image as "seattle_med.jpg".

Open the Image in Photoshop

First, start Photoshop and open the "seattle.jpg" image.

  1. Go to the File menu and choose Browse. This opens Adobe Bridge, the file browser for all Adobe products.
  2. Navigate to "seattle.jpg". Start with My Documents and go down into your Home folder. Keep going down until you get to:
    mypod \ photos \ seattle.jpg
  3. Single-click on "seattle.jpg" to see a larger preview on the right.
  4. Double-click on "seattle.jpg" to open it in Photoshop.

Resizing the Image

Now that the image is open in Photoshop, we're going to save it for the Web:

  1. Go to the File menu and choose Save for Web & Devices.
  2. Near the top of the right-hand panel, there is a drop bow box labelled Preset:. Set this to JPEG Medium.
  3. There is a box in the middle of the right-hand panel. It has two tabs: Color Table and Image Size. Click on the Image Size tab.
  4. Change the Width to 600. Change the Height to 400. Click the Apply button for this change to take effect.

You've Resized - Now Save

  1. Click OK.
  2. You'll get a Save Optimized As dialog box.
  3. Navigate to your "photos" folder inside the "mypod" folder.
  4. Save the image as "seattle_med.jpg" so you don't have to overwrite your original, high-quality photo.
  5. Click Save.

 

Exercise 3: Fixing Up the myPod HTML

Once you've saved the image, you can quit out of Photoshop. Now all you need to do is change the myPod "index.html" page to include the new version of the photo, "seattle_med.jpg".

Here's a piece of the HTML, showing the part you need to change:

      <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">
      </p>

  1. Edit your HTML file to replace "seattle.jpg" with "seattle_med.jpg" in the src attribute of the <img> tag.
  2. Save the file and reload it in your browser.

Go on the Lesson 18.

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
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com
>