Images
Here we will talk about inserting images in web pages. Readings for that subject here.
  1. Images in Web pages. [ Image Examples Source ]
    1. The web page refers to the image, which is a separate file.
    2. <img src="http://www.website.org/some/place/here.png" >
    3. The web page specifies a URL.
    4. The browser makes a separate request for the image.
    5. Rules for partial URLs in a link apply to img src also.
    6. Placing images from another site.
      1. Allowed by HTML, but may be prevented by the server.
      2. Probably legal, unless part of a fraud.
      3. Usually rude.
  2. Alt attribute:
    <img src="http://www.mc.edu/images/logos/mcclock.gif" alt="MC Logo" />
    1. Text description of the image, intended for screen readers and/or browsers which cannot display images.
    2. Will also appear if the image display fails for reason.
    3. Actually required, though I've never seen a browser complain.
    4. What to put?
      1. If the image is decoration, blank.
      2. If there is information in the image, try to summarize it.
      3. For image links, provide a reasonable link text.
  3. Width and height attributes.
    1. The img tag has width and height attributes. These are optional, but, if used should be set to the actual physical size of the image.
    2. This allows the browser to reserve space for the image before it is downloaded.
    3. It is possible to display the image at a different size, but that is to be avoided.
    4. If it can't be avoided, it should be done with CSS.
  4. Title attribute.
    1. An image may have a title attribute.
    2. This will often be displayed as a mouse-over by the browser.
  5. Linking with images.
    1. Simply place an image inside the <a> tag:
      <a href="http://www.gutenberg.org/"> <img src="http://sandbox.mc.edu/~bennet/icons/PG_Button_104x40.gif"></a>
    2. Older browsers would put a blue border on any picture used as a link. You may observe CSS or HTML to turn off for images used as links.
    3. [ Indexed Picture Collection Source ]
      1. Images at the top are undecorated links.
      2. No browser scaling; index copies are reduced and stored as thumbs.
      3. Separate page (and URL) for each large image.
      4. Uses a small style sheet, which, again, we'll get to soon.
  6. Resources
    1. Images are subject to copyright, and you should only use images for which you have permission.
    2. You can always take your own: Phone, digital camera, whatever.
    3. The Open Clip Art Library is sort of a clip-art cooperative. They have much content stored in the SVG format, which can be downloaded as rester images.
    4. Image*After is a wonderful source of free images.
    5. Many Wikipedia images may be used freely, but but sure to check the one you want to use, since they have various licenses.
    6. The US Park Service has many images which are in the public domain. Again, check the image you are interested in.
    7. The free book Project Gutenberg has some images from scanned books. These can be used freely, though it can take a bit of hunting to find something interesting.