Image tag basics
Adds an image.
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle.
This example demonstrates how to align an image within the text:
<img src="name" border=?>
Sets size of border around an image. It will generally be "zero" if you do not specify otherwise.
<img src="name" height=? width=?>
- An image will always load in a browser faster if its size is specified in the tag.
- To find the size of an online image in IE, right-click on it and select "properties."
- To find its size in Firefox or Netscape, right-click on it and select "View Image." The size will then show in the title bar.
- It is not advisable to change the actual size of an image by specifying a different height and width. Doing so can distort the image and will not save on image file size or downloading speed.
<img src="name" alt="Image description">
Each image tag should have an "alt" attribute specified. The alt attribute is used to define an "alternate text" for an image. From W3Schools.com:
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
Multiple attributes can be included in a single image tag as long as they are separated with spaces (see the examples below).
Below is a photo that I took with my digital camera and reduced in size using an image-editing program. The name of this image is bryce1-14.jpg, and it has a file size of about 29 KB.
The code of this displayed image is: <img src="bryce1-14.jpg" width="400" height="267" alt="Bryce Canyon">.
To download an image directly from a web page, place the mouse cursor over the image and right-click. Then click "Save Image As" in the menu that appears. Select the folder that you want to save the file in and choose a name for the file. Click the "Save" button.
Try this exercise:
Save the above bryce1-14.jpg image to your computer's desktop and then upload it to your site.
Using the same principles, small graphic images like this can be added anywhere on a web page.
More design elements
Check the "view source" for this page to see how the text box was created using a div tag with properties set for margin, border, background-color, and padding.
Back to Web Page Design at http://wboardman.com/webdesign/