HTML Project 3 - Links

MIS 354: Computer Graphics - Web Page Development

Instructor: Levi Krein, Associate Professor CIS/MIS

Creating Web Pages with Links, Images, & Formatted Text

A characteristic of the World Wide Web is its ability to allow movement from one Web page to another. A feature of Web page development is the ability to link Web pages together. In project three you will learn about the following types of hyperlinks:

Anchor
  1. Links within the same Web page
  2. Links to another Web page on the same Web site
  3. Links to another Web site
  4. E-mail links

Topics covered in Project 3

Plan! Plan!

Before creating an HTML document, plan what elements you want on the page. The first step in creating a Web page is to prepare an outline. The outline should include a list of all the elements for your page, including its title, an introductory paragraph, links to other sites, graphic images, and a contact address.

You should have a list of Web development resources that you can access for images and other support. Gather your images and existing Web pages is much easier if all of their files pertaining to a Web page are located in the same folder. If you plan well, you will save time!

Named Anchor

We will call a link within a Web page a "named anchor". A named anchor tag identifies a spot within your Web page (NAME="anchor name")

A named anchor can be a blank spot, text or an image that is specially marked so you can link to it. In other words, the named anchor is a target that hyperlinks can link to.

To set up a target anchor find the location, text or an image, where the anchor is to be placed and give it a name.

For example, I will designate the Plan Plan heading (above) as a Named Anchor. I will do the same for each subsequent heading, Named Anchor, Hypertext Reference Anchor, etc.

Highlighting the text (or image), click the anchor icon and in the Name dialogue box provide a location name.

Hypertext Reference Anchor

Now that the named (target) anchor has been created, we can create a hypertext reference anchor link that will direct the viewer to that anchor or location. The location can be within the same Web page, on a Web page within our Web site or on another Web page at another Web site.

Highlight the text or image that will be used as the link. For instance, in "Topics covered in Project 3" section above we are given a list of topics. Highlight Plan Plan, click the anchor icon, and define the HREF (Hypertext Reference) property. If you click the arrow behind the HREF dialogue box, all of the named anchors will be listed. Select the appropriate named (target) anchor.

E-mail Anchor

In the heading at the top of this document, highlight the instructor's name, Levi Krein. Click the anchor icon and in the HREF box enter: mailto: lkrein@hotmail.com.

At the bottom of this document you will have a paragraph "Webmaster: Your Name". Highlight your name and create an e-mail link for yourself.

To assist in navigation, "To Top" of the page links are common. Name an Anchor at the top of your document; add the text "Go to the Top" near the bottom of your document, highlight the text and create a hypertext reference anchor to the "top" location.

Links or anchors are the power behind the World Wide Web. Only your imagination can limit the bounds of the Internet. Have fun, but be responsible for your actions.

Pirate

Go To the Top

Format
Images
Resources

Webmaster: Amber Schaefer, September 5, 2008