Virtual Notebook III Page II: Images
Image Formats
The two most popular image formats that are used on webpages and gif files. These types may be
viewed my most browsers without
having to install special plug ins.
The JPG file is also know as JPEG. It got its name because it was developed by "Joint Photographic Experts Group". When using
these images for a webpage, always rename any "jpeg" file to "jpg" some of the browswers can't load it properly.
GIF stands for "Graphic Interchange Format". It is mostly used for computer generated
graphics like buttons and bars for
webpages.
Animated Gif's put movement on a webpage. These are moving graphics which are coded on a webpage just like any other graphic.
They are made up of several graphic images stored into one gif file so they are usually larger than standard graphics.
Saving Images To A Hardrive From The Web
The proper method to save an image on the web is to right click on it. That will bring up a little menu. Scroll down and click on
"properties" to view the image width and height. This will be needed to configure the graphic on a webpage. Once the size
has been recorded, right click on the graphic again, scroll to "save as" and save it to a specified photo folder on the hardrive.
The Image Tag
The image tag contains all the coding information about the image.The basic image tag is as follows:
<img src="image.gif"
The image tage can be modified with other values to adjust height,
width, border and align.
Here is an example:
<img src="image.jpg" "height="100" width="100" border="0" alt="this is my cat">
altis an attribute in the image tags that gives a short description of the image content.
This will enable viewers to read the image content if using a browser that doesn't display the image.
borderis an attribute used in the image tag that places or removes a border
around the image. The border value is numeric is determines the thickness by pixels.
In some cases, an image will be used as a hyperlink. When this is the case, always
add the border="0" attribute to remove the border around the graphic.
Things To Remember
- Be sure there isn't any spaces in the image filename.
- The <img src="graphic.html"> is not a container tag. No closing tag needed
- Each attribute and its value must be entered as a block of information with no spaces
- Height, width, border & alt and thier values must be listed in the image tag.
- Leave one space between each attribute and value pair entered.
- For images stored on a separate directory on the server, other than the home directory,
the source code in the image tag must include either a relative path to the folder or a regular path
