Free computer Tutorials

HOME Stay at Home and Learn

Web Design Tutorials

 
Computer Tutorials List

 

 

 

 

Target and Bookmark Hyperlinks

 

In this lesson, you'll see what Target links are, and get some practice with Bookmark links. These allow you to hop around your own pages quite easily . First up, Target links

 

Target Hyperlinks

You will have noticed on the Hyperlink dialogue box, that there was an area called Target.

Notice the Target Area of the Dialogue box

The default is None. The other four you will meet when we move on to Frames. But the Blank option can be quite useful. If you have a link on your web page to somebody else's site, you can have their web page open up in a brand new browser window. That way, your visitors won't be leaving your site to view somebody else's. Try out the Blank option and see how it works.

 

Bookmark Links

A bookmark link (commonly called an Anchor link) is useful when your web pages is rather long, and users have to scroll down to read it all. You can insert Bookmark links to aid navigation. When users click on your links, they will jump to different section of your web pages. You can even use a bookmark link to jump to a different web page, and back to the same spot where they left.

There's an example of a book-marked web page in the link below. The bookmark link itself is at the bottom of the page and reads "Back to the Top". Click the link to see what a bookmark is.

A Bookmark Link

Here's how they work.

There are two parts to the bookmark: The clickable link itself, and the place where you want to jump to.

The place where you want to jump to, the destination for the click, again uses the <A> tag. This time, the added attribute is not HREF but NAME. You then surround some text or image with the tag. Like this:

<A NAME = "section1">In</A> this first section, we'll discuss Links

We've surrounded the word "In" with our destination bookmark. The name itself, the part after the equals sign, can be anything you like. But you'll use that name in the Link part of the bookmark. Here's the actual link, the part people see and click on.

<A HREF = #section1>Click here for Section One</A>

Note that we're back to the HREF attribute. This time, after the equals sign, there is a hash symbol ( # ). After the hash symbol you type the NAME you used in step one. You then type the text that people will click on. Finally, you close the tag with </A>.

You can bookmark to another web page, if you like. In which case, the link would be this:

<A HREF = page2.html#section2>Click here for Section Two</A>

Note where the hash symbol is now -after the name of a web page. The NAME of the destination bookmark follows the hash symbol. There is no spaces between the two.

The destination link itself would then go somewhere on page2.html. If you had another bookmark on page two, you could have the user jump back to the same spot where they left.

To insert a bookmark using your HTML Editor, do the following:

  • Click where you want the bookmark to appear
  • From the menu bar, click on Insert
  • From the drop down menu, click Link > Bookmark Link
  • The Bookmark Link dialogue box appears
  • Type in the Name for your bookmark, and click OK

The HTML Editor will only insert the basic tags for you, in this format:

<A NAME = Section1></A>

<A HREF = #Section1>Bookmark Link Text</A>

There is still some work left for you to do. But it's quite easy. Cut and paste the two sections where you want them. Remember: The NAME part is the destination, where users will end up when they click on the HREF part.

There is still some work left for you to do. But it's quite easy. Cut and paste the two sections where you want them. Remember: The NAME part is the destination, where users will end up when they click on the HREF part.

For the NAME part, you need to surround some text or an image. Like this:

<A NAME = Section1>Your Text Here</A>


For the HREF part, just paste it somewhere in your web page, and replace the default "Bookmark Link Text" with your own.

 

In the next part, you'll see how to add an email link to your web page.

 

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses