Building a better web site ...
Questy's, Adding images in HTML
| |
Building a better web site ... Questy's, Adding images in HTML |
|
Inline Images Most
Web browsers can display inline images (that is, images next to text)
that are GIF, or JPEG format. Carefully select your images and the number
of images in a document. To include an inline image, enter: The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Image Size Attributes You should include two other attributes on <IMG> tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. (Get the pixel size from your image-processing software.) For example the image at the top of this document is represented below: <img
src="../art/qguru7.jpg" alt="Questy's Learning Area, tutorials
and lessons" border="0" height="90" width="360"
> Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browser developers think stretching or shrinking an image with these attributes is a good idea. Check your graphics dimensions and use the correct ones in the attributes. Aligning Images You have some flexibility when displaying images. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best. Aligning Text with an Image By
default the bottom of an image is aligned with the following text, as
shown in this paragraph. You can align images to the top or center of
a paragraph using the ALIGN= attributes TOP and CENTER. Images
without Text <P
ALIGN=CENTER> Alternate Text for Images Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages. The ALT attribute lets you specify text to be displayed instead of an image. For example the image at the top of this document is represented below: <img src="../art/qguru7.jpg" alt="Questy's Learning Area, tutorials and lessons" border="0" height="90" width="360" > With graphics-capable viewers that have image-loading turned on, you see the up arrow graphic. You should try to include alternate text for each image you use in your document, which is a courtesy for your readers. Background Graphics Background
images can be a texture (linen finished paper, for example) or an image
of an object (a logo possibly). You create the background image as you
do any image. Using a feature called tiling, a browser takes the image
and repeats it across and down to fill your browser window. In sum you
generate one image, and the browser replicates it enough times to fill
your window. This action is automatic when you use the background tag
shown below. The tag to include a background image is included in the
<BODY> statement as an attribute: <BODY BACKGROUND="filename.gif">
|
|
|
|
 |
Welcome
to the World of Questy |
