Sections • Inside • ZipArchive • Samples • Tutorials • Banner Factory • Forum

Linking

About Linking You can't have a web site without any images on the pages. Well, you can but I don't think you will get many visitors. So how do you get the images onto the pages? Glue? No, you'll have to link them. I will show you a few ways to link images to your page. The page I will work with is your index.html page which you have in your base directory. Please note that this is not a real tutorial.

Menu • Fonts • Colours • Background • Images • Indents • Tables

Linking images to pages Let's say you have created a few folders like this: Base directory   • pictures   • links The base directory is where you should have your index page. The 'pictures' and 'links' folder are subfolders to the base directory (i.e. they are one level down from the base directory) To link to a photo that is in the same folder (directory) as the page use this (I leave the height, width and alt out in these examples) <IMG SRC="myphoto.jpg"> or <IMG SRC="./myphoto.jpg"> The ./ (dot and slash) in front tells the browser to stay on this level (in the same folder). Now if you have put all your photos and graphics in the 'pictures' folder you will have to use another search path to link to your photo. Like this: <IMG SRC="Pictures/myphoto.jpg"> However this link wouldn't work! Why? Look at the folder name Pictures and compare it with the folder name above. See the difference? The name of the pictures folder is spelt with a lowercase p. In order for any link to work all names have to match. This is the way the link should look like: <IMG SRC="pictures/myphoto.jpg"> Let's now go to the 'links' folder. Here you have your links page and now you want to add some pictures to it. This time it is a header. Like the photos it is in the 'pictures' folder. Look at the folder structure above. The 'pictures' folder is located above the 'links' folder. Here another link needs to be used since the browser must be told to search for the picture one level up. This is how the link should look like: <IMG SRC="../pictures/header.gif"> Note the ../ (dots and slash) in front of the folder name. If you leave the dots out the browser starts looking in the root where it's not going to find the picture. If the picture was in the base directory you would have to use this link: <IMG SRC="../header.gif"> Of course you can have as many folders and subfolders as you like, but this is in fact all you need to start with. To make an image a clickable link Instead of having tedious text links you can lighten your pages up by letting your images serve as links. Like the menu on the first page here. To do that you must place the image search path within <A> anchor tags. Here is the search code for the image: <IMG SRC="pictures/photos.jpg"> And here is the link code: <A HREF="photos.html">My photos</A> Now, let's put them together <A HREF="photos.html"><IMG SRC="pictures/photos.jpg" ALT=My Photos></A> That's it! Note the ALT part. This text is shown if the image for some reason won't load. You can also add BORDER="0" to the image code string to get rid of that ugly border a linked image gets. Note: If you are linking to pages outside your site you must add http:// and the full path to the page, like this: <A HREF="http://www.othersite.com/username/photos.html"><IMG SRC="pictures/ photos.jpg" ALT=My Photos></A>

b	-- Close this window to return to the main page menu --