Adding Images
Images can add that extra bit of class to your website as long as they are used properly. Avoid going overboard with too many or large images. Only put quality images or graphics on your pages that compliment your site's design and content. Doing so will enhance the overall look of your website.
There are three basic image types that are used.
- jpg - Joint Photographic Experts Group
- gif - CompuServe Graphics Interchange
- png - Portable Networks Graphics
The HTML code for adding an image is a simple one line singular tag <img src=>.
We will start with learning the pieces (attributes) that make up an image tag. There are six pieces that make up a properly coded image.
<img border="0" alt="image description" src="myphoto.jpg" width="50" height="50">
img identifies the tag as an image tag
border sets the border width if desired.
alt alternate text to be displayed if the image cannot be displayed. A
short description of the image.
src (source) where the image is stored
width defines the width of the image
height defines the height of the image.
I will use a simple colored circle as an example image.
This image is in a seperate folder called "images". The image is 200px wide and 200px high.
The HTML
<img border="0" alt="Colored Circle" src="images/circle.gif"
width="200" height="200">
- Correctly set width and height settings of 200
Notice there is no border on the image since we placed a zero as the border declaration.
Now let's play around with the border, width and height sections to see what happens to the image.
- With a one pixel border
border="1"
- With the width incorrectly set at 250
width="250"
- With the height incorrectly set at 250
height="250"
As you can see if your width and height settings are not correct your image/s will be stretched or distorted. Be sure to maintain the proper ratio for your images.