Alternate text allows viewers to see text information about an image as it loads. If the image does not load at all, the alternate text will be seen in place of the image. Some browsers will display the alternate text as a "screen hint" for a few seconds when a mouse hovers over the image. Try hovering your mouse over the image above (it will only work with IE - Internet Explorer). Perhaps most importantly, html readers for the visually impaired use the alt text to describe the image aurally. Finally, search engines will find the alt text and allow searches to find your page based on the text (but it does not guarantee a high listing!).
Specifying image size speeds up page display. If the code tells the browser what size image to expect, the browser can set aside enough room for the image while as it loads the page's text, which often begins before the image file downloads (which can take a while). Without the image size being specified, the browser has to wait for the image, determine its size, then rearrange the text to accommodate it before showing it.
To specify size, use the WIDTH= and HEIGHT= attributes in the IMG tag. If you want to stretch or shrink an image, the image size attributes can do it for you, too. Don't expect to stretch an image without seeing the image quality deteriorate.
If you don't know the size of your image (in pixels) then you can usually right click on the image, select Properties, and the image dimensions should be given. On Mac use CTRL-click if you are using Firefox and have a single button mouse (you must replace it with multi-button, you must have a really old Mac). If you are using Safari it's a bit more complicated because Safari does not seem to be able to provide image information, so you need to copy the image and load the image into Preview, an Apple application that probably came with your OS as follows: CTRL-click on the image => select: Copy Image => open Preview => File menu => select New from Clipboard => Tools menu => select Get Info. If that doesn't work, please download Firefox and use that.
When you want to set apart text or images on a page, horizontal rules may be just the thing. It's a simple tag <HR> with no ending tag. The thickness, width, and 3D look of it can be controlled using the HR tag's attributes.
By default, a rule is displayed 2 to 3 pixels high with a 3D chiseled (etched out) look. The height is controlled using the attribute: SIZE= ..and then providing the height in pixels. The width is set with the attribute WIDTH=. The width is specified in either pixels or as a percentage (see explanation below) of the width of the browser window.
The default 3D chiseled (etched out) appearance can be changed using the NOSHADE attribute. This makes it look solid gray. (Note that CSS can be used for more elaborate changes, and usually uses "border properties" to create what appears to be a rule). You can align a horizontal rule to the left or right with the ALIGN= attribute. The following example is set to 5 pixels high, 80% wide, aligned left, and has no shading (no chiseled look).
Size setting for certain objects can be given as a percentage of whatever space is being displayed by the browser. If the size is set to 50% and the browser window is 10 inches wide, then the width of the object will be about 5 inches. Note: image dimensions cannot be given in percentage, only in pixels, which is what any number without a % symbol after it would be.
© 2007 Dan Vaughan and its licensors. All rights reserved.