| | |
Before plunging into the technical details and minutiae of digital imaging, I wanted to review the basics of placing images into HTML using the IMG tag.
As we discussed in an earlier module, HTML is text-only. Therefore, you can't actually paste images themselves into an HTML page. You need to use a piece of HTML code called the IMG (image) tag to mark where you want your picture to be inserted; you'll use one IMG tag for each picture you want to insert. The IMG tag, then, contains a URL (either absolute or relative) which points to the location on the Internet where the actual picture (image resource) is stored. When a web browser loads an HTML page into a browser window, it reads the HTML code, finds the image resources marked by the IMG tags, and downloads them; it then assembles the text and pictures together and displays them in the browser window. Wherever you place an IMG tag in the flow of HTML text, a picture will be inserted.
Again, wherever you want to place a picture into your HTML page, you need to type in an IMG tag to mark where it goes.
Tag: IMG
Description: Use the IMG tag to indicate where you want to place a picture in an HTML page. The IMG tag does NOT have a closing tag; because of this, you must use the XHTML-standard shorthand closing syntax in the tag, namely, a space and the closing slash character just before the closing bracket of the tag.
Example:
<img src="./graphics/capitalA.gif" width="54" height="54" />
Obviously, the IMG tag alone is not enough to do the job; you need to use the SRC (pronounced "source") attribute of the IMG tag to assign an actual picture to the tag.
Tag: IMG
Attribute: SRC
Value: a URL (relative or absolute) which gives the location of the image resource.
Description: The SRC attribute of the IMG tag states exactly where the desired picture resource is located on the Internet.
Examples:
<img src="./graphics/capitalY.gif" /> (relative URL) <img src="http://www.michaelmasumoto.com/graphics/capitalA.gif" /> (absolute URL)
The IMG tag has two additional attributes which are REQUIRED: WIDTH and HEIGHT. These attributes state the width (in pixels) and the height (in pixels) of the digital image in question.
Tag: IMG
Attributes: WIDTH, HEIGHT
Value: integers representing the width/height of the image in pixels.
Description: The WIDTH and HEIGHT attributes tell the browser how wide and tall the picture is; this allows the browser to reserve the correct space on the page for the picture. An IMG tag will operate without WIDTH and HEIGHT attributes, but not efficiently. If you forget to put WIDTH and HEIGHT into your IMG tag, the web browser may prevent the display of anything on the HTML page following that IMG tag until the entire picture is finished downloading (I'm sure you've witnessed this phenomenon on websites in the real world, and wondered why nothing was displaying for such a long time... Now you know the answer!)
Example:
<img src="./graphics/myGif.gif" width="54" height="110" />
(the above code says that myGif.gif is 54 pixels wide and 110 pixels tall)
You may resize an image in the browser window, on the fly, by setting the WIDTH and HEIGHT attributes of the IMG tag to values other than the actual width and height of the image. This is not recommended for most pictures, however, as browsers are extremely poor at resizing images on the fly, introducing ugly pixelations, distortions, empty gaps, or other visual flaws into the picture. The only time you'll resize pictures in this manner is when you are putting what are called "spacer" GIFs into an HTML page; because these "spacer" GIFs are just one color (white, black, some other color, or transparent), the browser can resize these flat-color images beautifully whenever and wherever you like. We'll talk about spacer GIFs when we discuss professional tables in a later module. In the meantime, always make sure you know the exact width and height (in pixels) of your image, and set the WIDTH and HEIGHT attributes of your IMG tag accordingly.
Here are some examples of on-the-fly image resizing (all examples use the same GIF file):
Normal:
<img src="./graphics/capitalY.gif" width="54" height="54" />
Normal Displayed:
Expanded:
<img src="./graphics/capitalY.gif" width="200" height="200" />
Expanded Displayed:
Distorted:
<img src="./graphics/capitalY.gif" width="100" height="200" />
Distorted Displayed:
As you can see, browsers do not resize images very gracefully, and, believe it or not, it used to be much MUCH worse! So always state the image's ACTUAL dimensions for WIDTH and HEIGHT in your IMG tag (unless you are using "spacer" GIFs, as mentioned above).
Note: Most image editing programs can tell you the width and height dimensions of your image in pixels. Netscape Communicator has a special feature, however, which is very handy. If you drag the icon for your image file (GIF or JPEG) into an open Netscape browser window, you can see the dimensions of your image (WIDTHxHEIGHT) stated in the drag region at the top of that browser window. Try it! (Internet Explorer 5 for the Mac also has this feature, but earlier versions do not.)
In conclusion, the minimum complement of attributes for the IMG tag must include SRC, WIDTH, and HEIGHT.
A pixel is a square or rectangular dot of colored light. Computers use pixels to display visual content to a user; you put enough pixels together, and you have a picture. Pixels are always formed in a square grid, just like graph paper, in rows and columns.
Here is a picture of my niece, Elizabeth. I have enlarged the area around the eyes in order to make the individual pixels clearer.
If you look very closely at these words you're reading, this very text on your computer monitor, you can probably see how it's composed of little square pixels (if your eyesight is very sharp). Your Mac or Windows user interface is really a constantly-changing digital picture which uses thousands upon thousands of pixels in its display.
For the Web, digital images must be created with a resolution of 72 pixels per inch. Remember this when making images in Photoshop for web-based delivery. For print, of course, 300 pixels per inch, 600 pixels per inch, and even 1200 pixels per inch resolutions are not uncommon, but images for the Web are always 72 pixels per inch.
72 pixels per inch used to be the standard resolution for computer monitor displays. It was once the case that if you measured one inch of any digital picture on your computer screen with a ruler, you would see (if you had very sharp eyes) 72 pixels strung end-to-end. With changes in monitor technology, however, there is no longer a physical correlation between what you see on your screen and an actual ruler measurement, since pixels can now be any size (just look at your own monitor, where you should be easily able to reset the screen resolution from being 1024 or 800 pixels wide to being only 640 pixels wide, which will change the size of the actual pixels being displayed).
Despite this development, the computer itself understands the correlation between pixels and inches, and if you printed out your web picture with its 72 pixels per inch resolution, you would discover exactly 72 pixels per inch on the printout (if you bothered to count). In addition, a one inch measurement of a computer-generated ruler in Photoshop or Freehand would have 72 pixels in it (regardless of how large or small that ruler appeared to be on the screen, or whether it matched up perfectly with a real, physical ruler or not).
There is one last "required" attribute for the IMG tag: ALT. The ALT attribute sets a text equivalent for a picture, so that users with their images turned off will still see something in the browser window where the picture should be. Users with images turned on (normal) will also see the ALT text before the picture downloads completely. On some browsers, the ALT attribute text also pops-up as a "rollover" comment as the user mouses over the picture; this feature, however, is not universal among browsers and platforms and cannot be relied upon.
Tag: IMG
Attribute: ALT
Value: any text
Description: (see above)
Example:
<img src="./graphics/elizabeth.jpg" width="344" height="281" alt="Elizabeth Schulz" />
Despite its status as a "required" attribute, you probably don't need to use ALT in your image tag if the graphic is not integral to the page. For instance, some people use images as ancillary decoration, or as spacers, or space-holders, where having an ALT attribute is not appropriate; in these cases, it is fine to leave out the ALT attribute from your IMG tag.
The ALT attribute is especially important for images which you intend to use as hyper-references/hot-links. If users have their images turned off, or are using a text-only browser such as Lynx, the ALT attribute text becomes the clickable item in place of the picture.
Example:
<a href="http://www.yahoo.com/"><img src="./graphics/capitalY.gif" width="54" height="54" alt="Yahoo" /></a>
Displayed:
Speaking of hot-links, did you know that you can turn off the (usually) blue border which (usually) appears around hyper-referenced graphics? Simply set the BORDER attribute for the IMG tag to 0.
Tag: IMG
Attribute: BORDER
Value: any integer, usually 0
Description: BORDER defines the size of a border around an image, in pixels; BORDER is especially useful when an image is to act as a hyper-reference, since most hyper-referenced images are not expected to have a hot-link border.
Example:
<a href="http://www.yahoo.com/"><img src="./graphics/capitalY.gif" width="54" height="54" alt="Yahoo" border="0" /></a>
Displayed:
There are other attributes for the IMG tag which are in common use. The most important of these is ALIGN, which allows you to set the alignment of text directly following the IMG tag. While our textbook, "HTML and XHTML: The Definitive Guide" contains some misleading and even inaccurate minor details on this subject, it is sufficiently comprehensive to allow me to gloss over it here. Review "HTML and XHTML: The Definitive Guide", pp137-142, for more information, remembering that current HTML syntax requires ATTRIBUTE="value" syntax (with the quote marks!).
Tag: IMG
Attribute: ALIGN
Values: left, right, top, middle, bottom
Description: sets the alignment of text in relation to an image.
All I will say here is that the two most common values for ALIGN are "left" and "right", which allow content to flow around your picture very handily.
Example:
<img src="./graphics/capitalY.gif" width="54" height="54" align="left" />
<p>Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all.</p>
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all.
Example:
<img src="./graphics/capitalY.gif" width="54" height="54" align="right" />
<p>Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all.</p>
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all.
If you wish to center a graphic on a page, DO NOT follow the advice in our textbook. Instead, use the DIV tag with its ALIGN attribute set to CENTER, placed around the IMG tag.
Example:
<div align="center"> <img src="./graphics/capitalY.gif" width="54" height="54" /> </div>
Displayed:
It turns out that the value CENTER, when applied to the ALIGN attribute of the IMG tag, refers to the manner in which text will flow from an image. Here's an example of what I mean:
<p><img src="./graphics/capitalY.gif" width="54" height="54" align="center" />And now here's some text flowing out of the side of this graphic. This sort of thing is never done these days; it's a bizarre relic of the past.</p>
Displayed:
And now here's some text flowing out of the side of this graphic. This sort of thing is never done these days; it's a bizarre relic of the past.
We've now covered most of what you need to know about the ALIGN attribute of the IMG tag, except to note that ALIGN is deprecated in HTML4; this means that it's been retired, its function officially taken over by CSS. Unfortunately, bugs in CSS implementations mean that the ALIGN attribute in relation to images will still be with us for some time to come; we'll talk about that at greater length in a later module.
The last attributes of note today are VSPACE and HSPACE. VSPACE allows us to set the vertical space (space at the top and bottom of the IMG), in pixels, between the edge of the IMG and the beginning of text or other content. HSPACE allows us to set the horizontal space (space at the left and right of the IMG), in pixels, between the edge of the IMG and the beginning of other content.
Tag: IMG
Attributes: VSPACE, HSPACE
Values:integer representing number of pixels of space
Description: (see above)
Examples:
No VSPACE or HSPACE attributes:
<img src="./graphics/capitalY.gif" width="54" height="54" align="left" />
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all. But we will go on in order to make MORE text which can wrap in your browser window, just in case you have a very very large screen. It is every so important to have enough text, you know! But this is not nearly enough, we need more more MORE! Endless quantities of text are apparently de rigeur in order to make enough for this demonstration. I grow weary of this endless verbage. Enough is enough already! But, now, I still need more. And more. Endless text is required, endless, I tell you! You have no idea how long I have to type to appease you, all of you. The workload is bottomless. I am a mother bird, feeding her young with worms and oddments. No, how inept. I need better text than this, or the entire class will be yawning, absolutely yawning with boredom. Is this enough? At last! No, not yet. I still need more and more and more. The burden, the unceasing burden of it all. What responsibilities I shoulder in order to bring life and light to all those minds out there, hungry for knowledge. I feel so privileged! I feel waves of something. Could it be pride? No, probably just nausea at the endless drivel I am typing.
VSPACE="15":
<img src="./graphics/capitalY.gif" width="54" height="54" align="left" vspace="15" />
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all. But we will go on in order to make MORE text which can wrap in your browser window, just in case you have a very very large screen. It is every so important to have enough text, you know! But this is not nearly enough, we need more more MORE! Endless quantities of text are apparently de rigeur in order to make enough for this demonstration. I grow weary of this endless verbage. Enough is enough already! But, now, I still need more. And more. Endless text is required, endless, I tell you! You have no idea how long I have to type to appease you, all of you. The workload is bottomless. I am a mother bird, feeding her young with worms and oddments. No, how inept. I need better text than this, or the entire class will be yawning, absolutely yawning with boredom. Is this enough? At last! No, not yet. I still need more and more and more. The burden, the unceasing burden of it all. What responsibilities I shoulder in order to bring life and light to all those minds out there, hungry for knowledge. I feel so privileged! I feel waves of something. Could it be pride? No, probably just nausea at the endless drivel I am typing.
HSPACE="15":
<img src="./graphics/capitalY.gif" width="54" height="54" align="left" hspace="15" />
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all. But we will go on in order to make MORE text which can wrap in your browser window, just in case you have a very very large screen. It is every so important to have enough text, you know! But this is not nearly enough, we need more more MORE! Endless quantities of text are apparently de rigeur in order to make enough for this demonstration. I grow weary of this endless verbage. Enough is enough already! But, now, I still need more. And more. Endless text is required, endless, I tell you! You have no idea how long I have to type to appease you, all of you. The workload is bottomless. I am a mother bird, feeding her young with worms and oddments. No, how inept. I need better text than this, or the entire class will be yawning, absolutely yawning with boredom. Is this enough? At last! No, not yet. I still need more and more and more. The burden, the unceasing burden of it all. What responsibilities I shoulder in order to bring life and light to all those minds out there, hungry for knowledge. I feel so privileged! I feel waves of something. Could it be pride? No, probably just nausea at the endless drivel I am typing.
HSPACE="10" and VSPACE="10":
<img src="./graphics/capitalY.gif" width="54" height="54" align="left" hspace="10" vspace="10" />
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all. But we will go on in order to make MORE text which can wrap in your browser window, just in case you have a very very large screen. It is every so important to have enough text, you know! But this is not nearly enough, we need more more MORE! Endless quantities of text are apparently de rigeur in order to make enough for this demonstration. I grow weary of this endless verbage. Enough is enough already! But, now, I still need more. And more. Endless text is required, endless, I tell you! You have no idea how long I have to type to appease you, all of you. The workload is bottomless. I am a mother bird, feeding her young with worms and oddments. No, how inept. I need better text than this, or the entire class will be yawning, absolutely yawning with boredom. Is this enough? At last! No, not yet. I still need more and more and more. The burden, the unceasing burden of it all. What responsibilities I shoulder in order to bring life and light to all those minds out there, hungry for knowledge. I feel so privileged! I feel waves of something. Could it be pride? No, probably just nausea at the endless drivel I am typing.
HSPACE="0" and VSPACE="0""
<img src="./graphics/capitalY.gif" width="54" height="54" align="left" hspace="0" vspace="0" />
Displayed:
Here is a paragraph of text. This is only a paragraph of text. If this were an important statement, you would be directed to open your flap your arms like a birdie and attempt to fly. That is all. But we will go on in order to make MORE text which can wrap in your browser window, just in case you have a very very large screen. It is every so important to have enough text, you know! But this is not nearly enough, we need more more MORE! Endless quantities of text are apparently de rigeur in order to make enough for this demonstration. I grow weary of this endless verbage. Enough is enough already! But, now, I still need more. And more. Endless text is required, endless, I tell you! You have no idea how long I have to type to appease you, all of you. The workload is bottomless. I am a mother bird, feeding her young with worms and oddments. No, how inept. I need better text than this, or the entire class will be yawning, absolutely yawning with boredom. Is this enough? At last! No, not yet. I still need more and more and more. The burden, the unceasing burden of it all. What responsibilities I shoulder in order to bring life and light to all those minds out there, hungry for knowledge. I feel so privileged! I feel waves of something. Could it be pride? No, probably just nausea at the endless drivel I am typing.
REMEMBER: you can set VSPACE or HSPACE to ANY number you like. The default number is about 2, although this varies from browser to browser and platform to platform.
We have now covered the essential attributes of the IMG tag. Although there are a few other attributes of note which we will look at in later modules, we are finished for the time being.
Tag: IMG
Attributes:
SRC (states URL where the image resource is located)
WIDTH (states the width of the image, in pixels)
HEIGHT (states the height of the image, in pixels)
ALT (states the alternative text for the image when images are disabled)
BORDER (states the border for the image, usually set to 0 (zero) in combination with the A (anchor) tag)
ALIGN (allows text wrap around a picture when set to "left" or "right")
VSPACE (creates space, in pixels, above and below the picture)
HSPACE (creates space, in pixels, to the left and right of the picture)
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.