html-img-link 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/image.gif"> 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. You can set alternative text using the “alt” attribute. This text will be displayed instead of the iage on text only browsers and on browsers with images turned off. It will also appear in a box when the mouse is held over the image for a few seconds. To allow space around the image you can use the “vspace” and “hspace” attributes. “Vspace” sets the vertical space and “hspace” sets the horizontal space, both in pixels, around the image in which nothing will appear. Examples of the image tag: <img src="image.gif" hspace=5 vspace=5 border=0 alt="The big brilliant picture" width=400 height=600> <img src="img.jpg" hspace=0 vspace=20 border=2 alt="The tiny brilliant picture" width=20 height=30> Now that you know how to put images on your page I just have to turn these images into links. These links are different to the ones we used last month because they are linking to a section on the same page rather than a whole other page. The first thing to do is to mark the different parts of the page that we want to link to. This would be the members name above his section. Each section has the members name in big bold type above it. <big><b>Mark Matthews</b></big> [– Information about Mark Matthews goes here –] <big><b>Matt Markson</b></big> [– Information about Matt Markson goes here –] ……… To mark a section heading we use the <a> tag again except this time we use a different attribute “name“. 
<a name="mark"><big><b>Mark
Matthews</b></big></a>
……… The link at the top of the page will then look like this: <a href="#mark"><img src="mark.jpg" border=0 width=50 height=50 alt="Mark Matthews" hspace=5></a> We just have to add more of these links for the other three members. Each link is added in the same way as the one for Mark Matthews. Mark the title of the section using the name attribute of the <a> tag. Link to that section by using its name preceded by a hash (#). Internal links can link to a place lower in the page or higher in the page. It is also possible to link to a certain section of another page. For example if we want to link exactly to the Mark Matthews section of “about_us.html” from the homepage then the link would look like this: <a href="about_us.html#mark"> If someone at another site wanted to link directly to the Mark Matthews section of “about_us.html” the link would look like this. <a href="http://www.theband.com/about_us.html#mark">