The basics of html

Limiting Image Size

• As we said before, the size of images in web design is one of the most important things for you to keep in mind.
• Simply put, users will not wait for large images to load. If your page has too many large images, no one will ever see your content.
• What does "large" mean?
• Lynda Weinman suggests the following rule of thumb: "If you assume that the average viewer of your page will be using a 14.4 modem, you can expect it to take 1 second per kilobyte for an image to transfer. This means that a 60k file would take minute to download and your 10mb files could take almost 3 hours". Most people have enough patience for about 10 seconds.
• So how do you reduce the size of images?
  • Make smaller images.
  • Compress your images using .GIF or .JPEG.
  • Use fewer colors or lower resolution.

Making Smaller Images

• Obviously, the first thing you want to do is prepare smaller images. Consider using only icons or similar type graphics on your page. If you must incorporate larger images, use clickable thumbnails to link to the larger versions.

• We have already talked about compression with .GIF and .JPEG files so we won't repeat ourselves here. However, it is worth mentioning that the .GIF compression algorithm called LZW follows a particular logic that affects file size.
• Specifically, the .GIF compression algorithm looks for changes along the horizontal axis. When it finds a change, it adds to the file size. Thus, the more vertical changes in your image, the larger it will be.
• Lynda Weinmann offers the following rules for using GIF compression:
  • Artwork with horizontal changes compresses better than artwork that does not.
  • Anything with noise will more than quadruple image size.
  • Large areas of flat color compress well and complicated line work or dithering does not.

Reducing Color

• The fewer colors that you include in your images, the less information the image needs to keep track of. Anti-aliasing, that uses intermediate colors to blend edges in an image for example, can increase images size by 30% or more.

A Sigh of Relief

• One fortunate thing about the newer web browsers is that they intelligently cache images. Thus, once the user has downloaded an image, they do not need to again. This is yet another reason to settle upon standard images for your site. If you have a single image on all your pages, it will only have to be downloaded once and will immediately be displayed on all pages after the first.

Image maps

• An image map is a very interesting way to utilize an image on the web. Specifically, image maps allow you to specify specific regions of an image and make those regions clickable so that when you click on that area, you will be transported to a corresponding web page.
• A good example of this can be found at Selena Sol's Homepage that is simply a single image map with pointers to other areas of the site.
• Notice that when your mouse moves over an area that can be clicked on, it will change its appearance.
• Image maps can provide a very fun interface, but they can be dangerous as well
• Specifically, you should take care to make your image as small as possible so that it does not take too long to load.
• Further, you should make sure that a browser has an alternative to using the image map in case they are blind or have turned off image loading. At the bottom of Selena Sol's Homepage, you can see that every link within the image map is duplicated with a text link.

Defining Image Maps

• Image Maps can be defined in two ways.
• The first way is to use one of the various shareware programs available to create a map file that can be read by a CGI program on your web server.
• However, since most people do not have the privilege of executing CGI applications, the developers of HTML came out with the <MAP> tag to allow HTML designers to create client-side image maps.
• The <MAP> tag allows a designer to embed information about the image within the HTML code itself. Thus, the browser is able to decide what areas of the image are hot-linked without using a server CGI script.
• Client-side image maps introduce two tags(<MAP>, <AREA>) and the USEMAP attribute for the <IMG> tag.
• The tags and attribute are described in the table below
  
  MAP
  Defines an image map. Takes an attribute of NAME that is used to tie an image to a map
  
  AREA
  Specifies a clickable area. Takes a SHAPE attribute of POLY, CIRCLE, or RECT, a COORDS attribute that specifies the area to be made clickable, and an HREF attribute that specifies the anchor URL for user clicks.
  
  USEMAP
  Used within the <IMG> tag to specify a map to use. This value will correspond to the value of NAME in the <MAP> tag

• To define an image map, you will use the <MAP> tag. This tag takes an attribute that defines the name of the map. The name is necessary so that you can tie a specific image to its corresponding map in case you have more than one image map on a page.
• To define clickable areas within the image, you use the <AREA> tag with its corresponding SHAPE, COORDS and HREF attributes.
• The shape attribute specifies a circle, rectangle, or a polygon. The COORDS attribute specifies the points that define those shapes. The HREF specifies the URL that should be linked to if the given shape is clicked on.
• A POLY shape will take a set of x/y coordinates to use as the dots in a connect-the-dot game. For example, the following AREA description would make a triangle:
  
  

  <AREA SHAPE = "POLY" COORDS = "0,0, 10,10, 0,20" HREF = "poly.html">



• The RECT works just the same except that it expects four sets of points whereas the POLY does not care.
• Finally, the CIRCLE shape takes a center point and radius such as in the following example that creates a circle area centered at 10,10 with a radius of 30 pixels
  
  

  <AREA SHAPE = "CIRCLE" COORDS = "10,10, 30" HREF = "circle.html">



• In addition you can use NOHREF instead of HREF to specify that the area does not link anywhere.
• Once you have defined the clickable areas of your image, you need to tie the image to the mappings. To do so, you specify the map name in the USEMAP attribute of the <IMG> tag.
• Let's take a look at the code for the Selena Sol Homepage imagemap.

<IMG SRC = "Graphics/sol_frontpage.gif"
          BORDER = "0" WIDTH = "365"
          HEIGHT = "273"
          ALT = "[Navigation Image Map.]"
          USEMAP = "#solmap">

<MAP NAME = "solmap">
<AREA SHAPE = "rect" HREF = "Personal/"
           COORDS = "1,1 96,24">
<AREA SHAPE = "rect" HREF = "Personal/Resume/"
           COORDS = " 212,47 254,60">
<AREA SHAPE = "rect" HREF = "Personal/creations.html"
           COORDS =  "214,62 317,73">

<AREA SHAPE = "rect" HREF = "Scripts/"
           COORDS = " 291,77 365,103">
<AREA SHAPE = "rect" HREF = "Library/Struggle/"
            COORDS = " 0,89 113,115">
<AREA SHAPE = "rect" HREF = "Library/"
          COORDS = " 211,144 360,169">
<AREA SHAPE = "rect" HREF = "Library/Barnaby/"
          COORDS = " 1,201 77,220">
<AREA SHAPE = "rect" HREF = "Launchpad/"
          COORDS = " 233,175 340,206">
<AREA SHAPE = "rect" HREF = "kudos.html"
          COORDS = " 87,224 142,243">
</MAP>