Search the site







Basic Hypermedia: Lesson 4 - Image Links

Images can also serve as anchors for links and can make your pages look more appealing by creating an array of buttons for the visitor to click on. The principles for creating an image link are similar to those for a text link using <A HREF="myaddress">, but in this case followed by the <IMG SRC="myimage"> rather than a string or text and completed with the final </A> anchor tag.

Again, in this exercise, you'll ve making links to both the pages you've designed, so again make sure you've kept a copy in the same folder that you will save this file into. For the following links to work, you'll need to have saved those files as hyper02a.htm and hyper03a.htm. To make the page more aesthetically pleasing, we've also used the ALIGN= element to place each of the arrows on either side of the page.

Exercise

<HTML>

<HEAD>
<TITLE>HyperMedia - Adding links</TITLE>
</HEAD>

<BODY BGCOLOR=BLACK>

<CENTER>
<H1><FONT COLOR=RED>HyperMedia 2</FONT></H1>
</CENTER>
<P>

<HR COLOR=RED><P>

<CENTER>
<IMG SRC="images/stones.jpg">
</CENTER>

<P>
<FONT COLOR=WHITE>
<H2>Future of Hypermedia</H2><P>

<BLOCKQUOTE>
While you are learning the very basics of hypermedia, the future of the Internet promises to be extremely lively. Here we are dealing with images and hyperlinks, but hypermedia will include:<P>

<UL>
<LI>Sounds and video
<LI>Scripts such as Javascript that bring pages to life
<LI>3D environments such as VRML that you can move around
<LI>Java, a language that enables you to use Web pages as a program</UL><P>

With these and other developments, the Internet is opening up to more and more people each year.<P>
<HR COLOR=RED>
</BLOCKQUOTE>

<A HREF="hyper02a.htm"><IMG ALIGN=LEFT SRC="images/back.gif"></A>
<A HREF="hyper03a.htm"><IMG ALIGN=RIGHT SRC="images/forward.gif"></A>

</FONT>
</BODY>
</HTML>

To see how your first Web page should look, click here. When you've finished, click on the Back button at the top of your browser to return to this page.

Troubleshooting

I click on a link and nothing happens: Again, check that you've included all elements of the hyperlink as well as those for the image source and put the address in speech marks.
The images are not aligned on each side of the page: Ensure that you have placed the ALIGN=LEFT/RIGHT in the appropriate place.

Lesson 1 Lesson 2 Lesson 3 Lesson 4
Lesson 5 Lesson 6    

 

© Jason Whittaker 2000-04



You can order copies of the following books:
Web Production for Writers and Journalists in paperback.
The Internet: The Basics in paperback.
The Cyberspace Handbook in paperback.