The band is back - Images and Linking
This month I will continue with the band theme that I started using last month. If you haven't read that article you should (http://www.suite101.com/article.cfm/html... I will pick up where I left off.
As I said there is going to be a page on the site about the band members. The band has four members and I am going to have a separate section for each member. One way of going about this would be to have a main page for the band members and then links to separate pages dedicated to each member. Seeing as there is only going to be a small amount of information about member though, I decided it would be a better idea to keep all the information on the same page.
At the top of the page I will have a picture of each of the members. Clicking on the picture of a member will make the page scroll to the section about the member.
First of all I should discuss how to put an image on a page. I used the tag in my last article without explaining it properly (I made the mistake of assuming I had already covered it in another article).
The image tag looks like this: <img>
It is a standalone tag meaning it has no end tag. It has several attributes and one of them is required. This attribute is "src" which sets the source for the image.
Examples:
<img src="image.gif">
<img src="another_image.jpg">
<img src="yet_another_image.gif">
In the above examples I assumed that the image was in the same folder as the web page. This is the least complicated way but it is not always the best. Suppose the image was in a folder one level deeper than the folder that the page is in you would refer to it as follows.
<img src="/folder/image.gif">
You could also place an image in a page like this:
<img src="http://www.geocities.com/~letslearnhtml/...">
I also mentioned the "border" attribute last month.
<img src="image.jpg" border=2>
<img src="image.gif" border=0>
The border attribute sets the size of the border that appears around the image. On normal images the default is "0" but if the image is a link then it will have a border of "1" or "2" around it by default. The colour of the border is the colour that is set in the body tag with the "link" attribute.
You can also set the width and height with the "width" and "height" attributes. This can be used to resize images or to ensure that the page displays properly even on browsers with images turned off.
Latest Articles