|
| Web Freebies |
|---|
| Internet |
| Articles |
| Feedback |
| Humour |
| Linkage |
| MISC. |
Images
There are two main types of image that can be used on a web page; JPEG (Joint Photographers Expert Group) or .jpg files and GIF (Graphics Interchange Format) or .gif files. Both these files have one thing in common; they both have some kind of compression to make the file sizes smaller which made them ideal for the web in its younger days when fewer people had faster connections. Even now, though, a lot of people still use 56k modem connections, so file sizes should be made as small as its possible to do so these people dont have to suffer long download times. You will probably be aware that JPEGs are commonly used for photographic type pictures and GIFs are used for clip art and animations. I wont go into that here though.
The IMG tag
The tag used to insert images into HTML is IMG. This is the syntax of the IMG tag:
<img src="images/image.gif" height="88" width="31" align="right" alt="This is the alt tag" border="0" />
I know it looks daunting, but in fact most of those attributes are optional. This is what they all mean:
SRC
This is short for source; the place where the image is to be found on the server. In the above example I have used src="images/image.gif". This is telling the HTML that the image is stored in a directory called images and has the name of image.gif The directory images is optional, but is useful for keeping all pictures in one place. It could have just as easily been kept in the root (top) directory with the HTML in which case it would read src="image.gif". You can also insert images from another server; just change the src attribute to src="http://www.anotherserver.com/images/image.gif", so it includes the full URL for the image (including the HTTP://)
Height and Width
As you might have guessed, these attributes specify the height and width of the graphic. It is not compulsory to use these, but it is good practice because it allows the browser to set aside a specific area for the image when it is downloading the web page. Without these attributes, it would download the image, then get its size and format the rest of the page round it.
Align
You are probably wondering what those pictures of the cups with the writing above them are all about. Dont worry, all is about to be explained! The align attribute tells the browser which side of any text the image is going to sit. If you look at the two pictures of the cups, this will explain things better. With align="right" the picture sits to the right and the text fills the space between the margin of the page and the image. With align="left" the picture sits to the left and the text fills the space between the margin of the page and the image. if you wish to stop the text wrapping and make it go below the image, use the <br /> tag with the clear attribute. If you have used align="right" and you wish to stop the text wrapping against the image, use <br clear="right" />
Alt
The alt tag was designed for browsers that could not display images or users that turned off images in order to improve download time for web pages. It stands for alternative and is a brief description of the image that is displayed on the page. Its still good practice to use this in this day and age of faster web access, and is also supposed to be good in search engine ranking, though I have seen no evidence of this.
Border
This provides a border round the image. The number in the quotes is the width of the border in pixels. Therefore border="0" would give you no border, which is the default anyway.
Images as backgrounds
In the last lesson we discussed changing the background colour. Well, you can also use an image as the background in a similar way. With in the body tag you can insert the background attribute. This works in a similar way to the src attribute of the img tag e.g. <body background="images/mybackground.jpg">. When using an image as a background, the browser will 'tile' the image i.e. will replicate image like tiles on a wall. If you want to use a single large picture as a background, you need to make sure it is the same size as the screen resolution, and that the content of the web page isnt greater than one screens worth. It is always good to use the bgcolor attribute along with the background to provide a similar colour to the background in case the user doesn't have images turned on in their browser.
Conclusion
The best way to get to grips with images is to get hold of some, either off the web or create your own and play around with the HTML to get used to it.
| Blogalicious! |
|---|
|
July 01 (pt1) July 01 (pt2) August 01 September 01 October 01 November 01 December 01 1st Quarter 02 May 02 Jun 02 July 02 Aug 02 Oct 03 May 04 June 04 Aug 04 |
If you would like to reproduce any text I have written here, please feel free as long as you credit it to BlackCoffee and include a link to this site. Thats all I ask
. Have fun!!Email the webmaster: webmaster@blackcoffee.org.uk
All HTML/Javascript/CSS written in Windows Notepad. All graphics created with Adobe Photoshop Elements/Windows paint and optimised for web use with XAT Image Optimiser Pro.