Chapter 5. Adding Images to your Pages: Meeting the Media

  • Use the <img> element to place images in your web page.

  • Only three of those formats are commonly used on the Web: JPEG, PNG, and GIF.

  • JPEG is a “lossy” format and is great for photos

  • PNG and GIF are “lossless” formats.
    • GIF is the original image format of the Web. (only 256 colors)
    • PNG can represent complex images like JPEG and also is lossless like GIF.
    • GIF and PNG: great for logos and text images
    • PNG: transparency as well as lots of colors.
      • PNG-24 supports millions of colors
      • PNG-16 supports thousands of colors
      • PNG-8 supports 256 colors
  • You can also put a URL in your src attribute.

  • Images are stored on web servers right alongside HTML pages, so every image on the Web has its own URL, just like web pages do.

  • The alt attribute of an <img> element is a meaningful description of the image.
    It is displayed in some browsers if the image can’t be located, and is used by screen readers to describe the image for the visually impaired.

  • If you’re placing a transparent image in your web page, make sure the matte color of the image matches the background color of your web page.

  • A width of less than 800 pixels is a good rule of thumb for the size of photo images in a web page.

  • Images can be used as links to other web pages.
    To create a link from an image, use the <img> element as the content of an <a> element, and put the link in the href attribute of the <a> element.

<html>
  <head>
    <title>myPod</title>
      <style type="text/css">
        body { background-color: #eaf3da; }
      </style>
  </head>

  <body>
    <p>
      <img src="logo/mypod.png" alt="myPod Logo">
    </p>

    <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_video_med.html">
      <img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle,WA">
      </a>

      <a href="html/seattle_classic.html">
      <img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle,WA">
      </a>

      <a href="html/seattle_shuffle.html">
      <img src="thumbnails/seattle_shuffle.jpg" alt="An iPod Shuffle in Seattle,WA">
      </a>

      <a href="html/seattle_downtown.html">
      <img src="thumbnails/seattle_downtown.jpg" alt="An iPod in down town Seattle,WA">
      </a>
    </p>

    <h2>Biemingham, 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 classis red British telephone box!
    </p>

    <p>
      <a href="html/britain.html">
      <img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
      </a>
      <a href="html/applestore.html">
      <img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store">
      </a>
    </p>
  </body>
</html>

Word list

  • finer point
  • trivia
  • needle
<
Previous Post
0828 Another Chill Day: Making Flyers and Reading Books
>
Next Post
0829 Payday, good day — added some pictures to my blog!