Links are what make the World Wide Web so popular and user friendly. The web is so popular because of how easy it is to use. Part of what makes it easy is the ability to click on some text or an image and be automatically transported to another webpage.
Some web page owners seem to have forgotten about links, or just never learned how to do them properly. I often see badly designed pages that have far too much content all stuffed onto one page.
It is important to keep the size of pages down and one of the best ways to do this is to create more pages with a smaller amount of content on each page. You then link these pages together using, well, links.
Although I began to discuss links last month I will start from scratch for those of you reading only this article.
The best way to teach is with examples and I will use that method for this article.
To explain links I will imagine that I am setting up a small web site for a local band. I have consulted with the band and they can only afford a very small site. They know they want to have some information about themselves on the site, a list of upcoming gigs, a picture gallery and a section with links to other music sites on the web.
One way to go about designing this site would be to create one
html document containing all this information. After all web pages can be as long as you want so why waste time making more than one page? The answer is simple. You want a nice site don’t you, one that visitors will actually stay and visit, instead of hitting the back button after waiting 2 minutes for the page to load.
The better way to go about doing this would be to firstly make out a site plan. We should have a homepage with links to the other main pages,
“About Us”,
“Upcoming Gigs”,
“Picture gallery”, and
“Music Links”. We must also make sure to put a link to the bands email address on each page so as their fans can get in touch.
First we’ll start with the homepage. Since this article is about links I will only discuss the links section of the html code for each page. This page will have five links, four to other pages and one to the email address.
The links to the four pages will all be similar and will be of the form…
<a href=“about_us.html”>Find out about us</a>
Since the file
“about_us.html” will be kept in the same folder as the homepage file we need only refer to it by it’s file-name. The file you want to link to will not always be in the same folder as the file you are linking from, I will discuss this circumstance later on.
There will be three other links like the above one…
<a href=“gigs.html”>Upcoming Gigs</a>
<a href=“pictures.html”>Picture Gallery</a>
<a href=“links.html”>Music Links</a>
We also have to remember the link to the bands email address. An email address link is slightly different. You still use the
<a> tag and the
“href” attribute. You set the
“href” attribute to link to your email address. A few examples will show you how this is done.
<a href=“mailto:[email protected]”>…
<a href=“mailto:[email protected]”>…
<a href=“mailto:[email protected]”>…
The link I will put on the bands homepage will be…
<a href=“mailto:[email protected]”>Hey fans drop us a line</a>
Each of the other pages will also have links. They will each have links to the other three pages and the home page. They will also each have a link to the email address as shown above.
The
“Picture Gallery” however will have to be a little different. I decided the best idea would be to show thumbnails of the images (smaller versions) and have each thumbnail link to the bigger version of that picture.
This is much easier than it may sound. After I have created all the images and saved them in the same folder as
“pictures.html” it is time to get down to writing the html code.
Currently the band only has three pictures. I have called the pictures
“band_1.jpg”,
“band_2.jpg” and
“band_3.jpg”. I have called the thumbnails
“thumb_1.jpg”,
“thumb_2.jpg” and “
thumb_3.jpg”.
The following line of html will place one of the thumbnails on the page and link it to the bigger version…
<a href=“band_1.jpg”><img src=“thumb_1.jpg” border=0></a>
I have created a link to
“band_1.jpg” the same as I would any html file. In fact this is the way to put a link to any type of file, be it a html file an image , a wave sound or anything else. Between the
<a> and
</a> i then placed an
<img> tag, discussed in a previous article. The
“src” attribute should be familiar but the
“border” may not. The
“src” sets the image that will be displayed and
“border” sets the width of the border around the image. I have set this to
“0” because otherwise there would be a border placed around the image (because it is a link).
I also need two more links…
<a href=“band_2.jpg”><img src=“thumb_2.jpg” border=0></a>
<a href=“band_3.jpg”><img src=“thumb_3.jpg” border=0></a>
Also the page with music links will have to have links to pages that are not in the same folder as the page itself. They aren’t even on the same computer.
To do this it is actually quite easy and you might be able to guess…
<a href=“http://www.cdnow.com”>Buy Our CD at CDNow</a>
<a href=“http://www.music-news.com”>Get the latest Music news</a>
…
…
You get the idea.
In my next article I will continue with the story of the local band, there is still much to learn.
Although there wasn’t much new information in this article I think it was delivered in a more friendly way and I hope you enjoyed it.