 |
 |
 |
 |
 |
 |
|
Images Image tags To insert an image into your web page, you need to know where the image file is located. It can be located locally on your computer, on the server where your pages will eventualy end up, or it may be on another server. Wherever it is, you need to know the path to that image file.
If the image is on a different server, the path is the URL or web address of that file, such as:
If the file is local, perhaps in a sub directory of the the directory in which you are currently working, then the path is "sub-directory/image.gif"
Usually for organizational purposes, we create a directory just for images called "images"
"/images/image.gif" If you have a more complicated directory structure such as:
root - directory1 - links.html
- directory2
- directory3
- images - all your images
- index.html
then the path to an image in your "images" directory specifed on "index.html" or indeed any page in your root directory, is
The path to an image in your "images" directory specifed on a page in the sub-directory "directory1", such as "links.html" is
The ".." part of the path idicates that you have do change directory up The "/" part of the path idicates that you have do change directory down So when we know the path to an image file, we can use that path in a tag to specify the source of the image: In the body of your html file :
Or we could have:
or
Here's source code for this image: 
Generally the two main formats or standards for still images in pages are called GIFs (file extension is .gif) and JPEGs (file extension is .jpg). The <img src tag can have attributes. You can specify image height, width, border and alignment aswell as other attributes such as specifying an amount of horizontal space ("hspace") and vertical space ("vspace")
Images as links When creating clickable links, instead of inserting text between the anchor tags, you can insert an <img src tag as the clickable element.
This should give the following effect (and see how, once you move your mouse over the image, the Apple web address appears in the "staus" bar at the bottom of your browser - the image has become an active link:
Notice how the image now has a "highlight" around it, indicating that it has turned into a clickable link. Sometimes you won't want the image to be highlighted - you can specify the "border=0" attribute to turn the highlight off:
Background images You can use a single image as the overall background of your page. The path to this image goes in the <body> tag:
The image will be repeated as many times as necessary to fill the web page, no matter how wide or deep it is. Be careful using images as backgrounds. They might be fun to do, but your visitors might find that they make your text unreadable. Or you might have to change the color of your text and links to suite the background image. Other tags HTML is always being developed and more and more tags and effects are being added. Apart from the tags mentioned so far, there are others for creating lists, tables and other effects. Tables offer a very clever way of ordering your text and images into rows and columns giving great alignment of your web page elements.
| Introduction | Getting Started | Images | Counters | Special Characters | Lists | Tags | | Meta Tags | A Checklist | Unwritten Rules | Software | Celticweb Internet Services |