Hands-On Self-Training: Lesson 4
Give a Web page the power of links and graphics

Links and graphics can be grouped together for a lesson because both add value to a web page—links by providing interconnections with other Web pages, images by providing pictures to clarify and enliven text.

No new tool is required for adding links. You'll just be adding one or more sets of HTML anchor tags:

<A HREF="filename.html">link text</A>

where filename.html is the URL of the Web page to link to and link text is whatever label or description you provide for the link. You can accomplish that task with an ASCII text editor, HTML editor, or WordPerfect Internet Publisher.

There are many commercial software packages for creating images, such as Adobe Photoshop and Corel PhotoPaint and JASC Software's Paint Shop Pro. So if you have one of those installed, you're ahead of the curve here. This lesson introduces a basic image handling tool, shareware named Lview Pro.

We'll also pirate the WordPerfect graphics directory to get an image to handle. Typically in the TNRCC network environment, this directory is located at g:\wpwin61\graphics.

The graphics file format that works with almost all Web browsers is GIF. You'll probably want to consult a dictionary for more information on graphics files.

<IMG SRC="filename.gif">

where filename.gif is the URL of the image file to display.

You can also embed an image tag within an anchor tag set and perform other wonders. If you want to want to explore further, consult an HTML reference work for options and feel free to experiment.

OK. Enough talk. Now try your hand at the steps outlined below.

• First, add and test a hyperlink anchor:
  • Review the Web page you created in lesson 3 by converting a WordPerfect document file.
  • Open the index.htm file you created in lesson 1 in your HTML or ASCII text editor of choice.
  • Add an anchor tag in index.htm to link to your WP-conversion Web page.
  • FTP the updated index.htm file to the Web server.
  • In Netscape, view your index.htm page and test the link.
  • Repeat the file update and move operations as necessary. Remember to choose Reload so that Netscape displays the latest version of the pages.
• Now, add and test a graphic image:
  • In WordPerfect, retrieve cheetah.wpg from g:\wpwin61\graphics.
  • Run LViewPro.
    • Choose Edit, Capture Desktop.
    • Draw a box around the cheetah with your mouse.
    • Choose Edit, Crop!
    • Choose Options, Background Color, White, OK.
    • Choose File, Save As. Save the file in the same directory as your .htm files. Give it a descriptive name and specify file type as gif89a.
  • Now open either one of your .htm files with your editor of choice and add an image source tag specifying the image file you just created.
  • FTP your revised .htm file and new .gif file to the Web server. (Be sure to specify Binary mode for the image file copy!)
  • In Netscape, view your page; the graphic should appear.
  • Repeat the file update and move operations as necessary. Remember to choose Reload so that Netscape displays the latest version of the pages.

Return to Hands-On Self-Training Web Authoring Exercise when you're ready to tackle another lesson. Or continue on to lesson 5.