Lesson 3 - Images
 Images are undoubtedly an important part of the WWW. Many people use the internet almost
solely for sharing and viewing images. This lesson will teach you how to place images on
a web page as well as how to do some formatting on them. Like the anchor tag in the
previous lesson, this image tag has a lot of attributes. We will hardly scratch the surface
on everything that you can do with manipulating images on a web page, but we will give you a
very good jump start. The general form for inserting an image on a page is: The src or source attribute is the most common attribute that you will use; it is a required attribute of the image element. The only other attribute that is required is the alt attribute (note: most browsers will work fine without it). The purpose of the source attribute as you have probably already realized is to tell the browser what image to use. The purpose of the alt attribute is to display alternative text if the browser cannot find the image; it is also used by web page readers for people with vision problems. |
||
|
The image element has a much more complex align attribute then most other elements. The align attribute values are absbottom, absmiddle, baseline, bottom, center, left, middle, right, texttop and top. We will not go over all of these in this lesson, but all of them effect the way text is laid out around an image when that image is laid "inline" within a paragraph (between an opening and closing p tag). The border attribute specifies the number of pixels the browser should border an image with. If you want to turn the border off, you can set it equal to zero. The width and height attributes can be used to resize an image. The browser will only resize the image to the these attribute values if the image size is different then the size you specified. The two graphic types that are usually used on web pages are GIF with a .gif file extension and JPEG with a .jpg or .jpeg file extension. These are not the only types of graphics that browsers are able to display, but they are the most common, and the only types we will discuss in this lesson. Each of these graphic types has different applications. The reason for this has to do with the differing compression schemes. JPEGs are typically better suited for photographs, while GIFs are better suited for graphics with few colors in solid color patterns (Example: company logos, text, etc.). Example: |
||
  |
||