Adding Links and Images	Rutgers University Computing Services
Web Editor  ·  Creating A Web Directory  ·  Toolbars   ·  Making Web Pages  ·  Adding Links and Images   ·  Tables and Spell Checking  ·  Publishing

Adding Links

The H in HTML stands for hypertext. You can turn ordinary text into hypertext by adding a hyperlink to your Web page. A fundamental feature of hypertext is that you can link pages; you can point to another place inside the current page, inside another page on your site or inside a document anywhere on the Internet. The documents become a web of information.

THE URL:
Every document in the World Wide Web has an address known as its Uniform Resource Locator (URL). There are two kinds of URL's that we are concerned with in this class, the absolute and relative URL. An absolute URL is the complete address of a resource and has everything your system needs to find a document and its server on the Web. When you use a relative URL, you provide an abbreviated document address that, when automatically combined with a "base address," becomes a complete address for the document. 

Absolute URL

To create an absolute link in your Web page, highlight the word(s) you want to form a link, in this case "W3C" then click the Link button on the toolbar.

This will open the Character properties window. In the Link Text area, type in the URL of the Web page you want to link to – in this case http://www.w3.org. Click OK.

Save the file. Preview the file. Click on W3C to test the link.

Relative URL

To create a relative link in your Web page, we will save a file from the Internet onto your computer. Using the Netscape Navigator browser I would like you to visit http://www.nbcs.rutgers.edu/education/composer/glossary.html. 

Return to Composer, highlight the text "glossary" then choose the Link button on the toolbar.

Click Choose File and select glossary.html. Click the OK button.

Save the file. Preview the file. Click on "glossary" to test the link.

Target

Targets allow you to designate a specific word in a Web page that you can later use in a link. In long documents, a target allows you to quickly jump to the desired section.  In Netscape Composer 7, they are called "Named Anchors".

Using the Netscape Navigator browser return to  http://www.nbcs.rutgers.edu/education/composer/sample.html

Copy the text for the Target exercise and paste it into your Web page.

1. Select the text  "Target" at the end of the section
2. Open the Insert menu and select Named Anchor...
   
3. In the Named Anchor Properties window, change the name of the target if you want, then click OK
   
   
4. Select the text "TARGET" at the beginning of the section and create a link to the target name "Target"
5. Click OK

Save the file. Preview the file. If you click your mouse on "TARGET" the page will move to the "Target" location. 

Mailto

A web page should always have a link on it to allow viewers to send comments, corrections, etc., to the owner of the page. This is often done using a "mailto" link.

1. Put the cursor on a blank line below everything else on the page.
2. Click the H. Line button in the Composition toolbar to insert a horizonal line as something to separate the address from the rest of the web page.
3. Type the text "Send comments to name." but replace the word "name" with your own name.
4. Select your name in that line and click the Link button.
5. In the Link to field, instead of a URL, type

   mailto:user@host.domain

   replacing "user@host.domain" with your own e-mail address.

6. Click OK

Save the file. Preview the file. Click on your name to test the "mailto" link. Netscape Messenger, the e-mail reader, will open a new message window. Your e-mail address will be in the "To:" field. Close the new message window without clicking the Send button if you don't want to send the message.

Adding Images

The HTML standard does not prescribe an official format for images. However, the popular browsers specifically accommodate certain image formats; GIF and JPEG, in particular. GIF files lack the higher quality of JPEG files but are usually smaller in file size and faster to download. Most other multimedia formats require special pluggins that each browser owner must obtain, install, and operate to view the special files. 

•  GIF (CompuServe Graphics Interchange Format .GIF extension) uses compression technology that can significantly reduce the size of the image file. Because GIFs have a maximum of 256 colors a GIF-encoded image is not always the best choice, particularly for photorealistic pictures.
• JPEG (Joint Photographic Experts Group .JPEG/JPG extension) Like GIFs,  JPEG images are also compressed. Unlike GIF, JPEG supports tens of thousands of colors for more detailed, photorealistic images.

Images are actually separate image files and do not "live" in the HTML document itself. The images that appear on your Web page can be image files on your local disk, or on a remote computer.

If you want to add an image to your Web page, Composer has a simple to use tool to help you. It is up to you whether or not you want to create an image in a graphics program that you have already on your computer or if you want to "copy" an image from somewhere else. If you copy an image from a Web site or any other source, make sure that the image is free for you to use.

Here is how to "copy" an image from an existing Web page to save it on your local computer.

• Go to http://www.rci.rutgers.edu/Images/ in Netscape Navigator mode
• Choose "rutgers", scroll down to the rulogo-white.gif
• Place your mouse over the image you have chosen and click on the "right" mouse button.
• Choose "Save Image As..." and save the file to your computer in the same directory as index.html.

To add an image to your Web page, click your mouse pointer where you want the image to appear in the document, then click the Image button on the toolbar.

This opens the Image Properties window. In this window, you must at least indicate an image file to include in your Web page. You can type the URL of an image on the Web in the text box, or you can click Choose File to include an image that is currently on your hard drive. 

• click the Choose File button and highlight the file "rulogo-white.gif"
• click on the Link tab and add the address http://www.rutgers.edu/
• click in the Alternate text area and add a description of the button 
• click OK

Alternate text is very important because people who browse the Internet without images should still be able to read your Web page. Make the Alternate text description useful information, not just “image.”

  Back       Next

Comments or questions: webmaster@nbcs.rutgers.edu
Last update: 10/2/02

COPYRIGHT © 1999-2002 Rutgers, The State University of New Jersey. NBCS. All rights reserved.