Here we will talk about inserting images in web pages.
that subject here
- Images in Web pages. [ Image Examples Source ]
- The web page refers to the image, which is a separate file.
- <img src="http://www.website.org/some/place/here.png" >
- The web page specifies a URL.
- The browser makes a separate request for the image.
- Rules for partial URLs in a link apply to img src also.
- Placing images from another site.
- Allowed by HTML, but may be prevented by the server.
- Probably legal, unless part of a fraud.
- Usually rude.
- Alt attribute:
alt="MC Logo" />
- Text description of the image, intended for screen readers and/or
browsers which cannot display images.
- Will also appear if the image display fails for reason.
- Actually required, though I've never seen a browser complain.
- What to put?
- If the image is decoration, blank.
- If there is information in the image, try to summarize it.
- For image links, provide a reasonable link text.
- Width and height attributes.
- 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.
- This allows the browser to reserve space for the image before it is
- It is possible to display the image at a different size, but that is
to be avoided.
- If it can't be avoided, it should be done with CSS.
- Title attribute.
- An image may have a title attribute.
- This will often be displayed as a mouse-over by the browser.
- Linking with images.
- Simply place an image inside the <a> tag:
- 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.
- [ Indexed Picture Collection Source ]
- Images at the top are undecorated links.
- No browser scaling; index copies are reduced and stored as thumbs.
- Separate page (and URL) for each large image.
- Uses a small style sheet, which, again, we'll get to soon.
- Images are subject to copyright, and you should only use images for
which you have permission.
- You can always take your own: Phone, digital camera, whatever.
- 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 raster images (png, jpeg, etc.).
- Image*After is a wonderful source
of free images.
- Many Wikipedia images may be
used freely, but but sure to check the one you want to use, since they
have various licenses.
- The US Park Service has many
images which are in the public domain. Again, check the image you are
- 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.