Web Development

  Homes arrow Web Development arrow Microsoft FrontPage 2002 - Working with Hyper...
 Webmaster Tools
 
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML to PHP 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
 
Password Strength
 
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB DEVELOPMENT

Microsoft FrontPage 2002 - Working with Hyperlinks
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating:  stars stars stars stars stars / 0
    2004-04-08

    Table of Contents:

    Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     

    SEARCH DEV MECHANIC

    TOOLS YOU CAN USE

    advertisement

    Microsoft FrontPage 2002 - Working with Hyperlinks
    by GTS Learning

    Objectives of this Tutorial

    Generally: To create different kinds of hyperlink to connect web pages.

    Specifically: On completion of this lesson you will be able to:
    • Add text and image hyperlinks to web pages
    • Follow a hyperlink
    • Edit and delete a hyperlink
    • Create a hotspot (clickable imagemap)

    What is a Hyperlink

    A hyperlink connects one resource to another. When the user clicks the link, the new resource is opened. A link can point to a different part of the current page, another web page in the same web, a web page in a different web, a file of a different type (such as an Excel spreadsheet or Adobe Acrobat document) or to an email address.

    The hyperlink can be embedded in text (hypertext) or a picture. To be effective, the text or picture should indicate where the link goes. For example, a text hyperlink from the phrase "What's new in Microsoft FrontPage 2002" and a picture hyperlink from the Microsoft FrontPage logo both would indicate that the hyperlink goes to a page describing new features in FrontPage 2002.

    Web browsers usually underline text hyperlinks by underlining them and displaying them in a specific colour. Hyperlinks in pictures are invisible. However, users can tell when the pointer is over a hyperlink because it changes to a pointing hand .

    Uniform Resource Locators (URL)

    To connect to a resource, a hyperlink must point to the resource's URL. In FrontPage, it is easy to create hyperlinks without having to understand URLs. However, you may find it worthwhile to know what is going on "in the background" when you create a link.

    Every resource (email service, web page, internet chat room and so on) on the internet has an address that allows other computers to connect to it. This is address is called a Uniform Resource Locator.

    Each resource is hosted by a server, which is identified to other computers by its IP address number and the service's port number. An IP address number consists of four decimal bytes (a number ranging from 0 to 255) separated by dots (for example, 194.36.18.194). A port number is like a broadcast channel for particular types of service (web pages, email, ftp and so on).

    The numerical internet address understood by computers is quite incomprehensible to most people. For this reason a system of identifying servers using a domain name (or host name) was developed. An internet domain name consists of the name itself (usually the name of the company or organisation) and one or more suffixes (such as .COM or .CO.UK) used as categories.

    A website can be accessed by typing a domain name (such as www.courseware.co.uk) into the Address bar. This will open the website's default page (or home page).

    This is a shorthand way of accessing a website however. Every single document and service on the internet has a unique address, called a Uniform Resource Locator (URL). The domain name is only part of this address.

    A URL contains all the information needed by a web browser to get a specific document from a server. The information required is as follows:

    • The type of service that should be used to get the data and consequently the port number of the service.
    • The name and location of the host computer (server) storing the document - the domain name.
    • The location of the file on the host computer.

    Make up of a web address

    For example, consider the following URL:

    Service

    The above URL begins with the letters http. This means that the documents are served by a HyperText Transfer Protocol (HTTP) server. The URLs for web pages usually start with this (though you will also see HTTPS(ecure), which indicates a secure web server, used for e-commerce). Most URLs do not specify the port number of the service, as common services are always found on the same port number (for example, HTTP is always on port number 80).

    :// - means that the next part of the URL is the name and location of the server. This group of characters is called a separator. Separators are used to indicate to the computer processing the URL that one part of the URL has ended and the next part is coming.

    Domain name

    www.courseware.co.uk is the domain name of the server. When a web browser requests a URL, the domain name gets translated into an IP number, which is then used to find the server on the internet, by looking up the domain name on a database. Domain names make it easier for people to remember URLs. They also make it easier to move a website from one server to another without having to tell everyone that the address has changed - you only have to change the number in the database.

    Domain names contain some standard notations. For example, www identifies the service as being on the world wide web. .co identifies the website as a commercial organisation. It is convention that commercial sites use co or com, academic URLs have ac or edu (for academic or education) and governmental or non-profit organisations use org. .uk indicates that the site is based in the UK. These suffixes are created and controlled by internet organisations.

    Path

    The URL up to now has identified where to look for the web page on the internet. The rest of the URL describes where on the server the page is located. This part of the URL is like the path and file names you see in Microsoft Windows, except that forward slashes (/) are used to separate folder and file names rather than backslashes (\) and there is no need to identify the disk drive.

    about/contact.htm indicates that the Contact web page (HTML page) is located in the About subfolder of the server's web folder.

    Relative path URLs

    When you create a link to a page within a web, you can use a relative URL. A relative URL contains just enough information to find the file from the current file.

    For example, to link to the contact.htm page from the web's home page, the relative URL would be about\contact.htm. To link to the home page from the contact.htm page, the link would be ..<b>index.htm (.. means "go up one folder").

    Other types of URL

    URLs are also used to access other resources on the internet, including email addresses and File Transfer Protocol (a system for sending files over the internet).

    Create a Text Hyperlink

    Most of your hyperlinks will probably be text links.

    To create a text hyperlink pointing to existing page in current webThe simplest use of a hyperlink is to take your visitor to the top of another page in your web.

    • In Page View, select text that will identify the hyperlink
    • On the Standard toolbar, click Insert Hyperlink

    OR

    • From the Insert menu select Hyperlink... (SpeedKey: Ctrl + K)

    The Insert Hyperlink dialogue box is displayed.

    • In the Link to: box, select Existing File or Web Page
    • Browse for the file you want to use (To browse the contents of a folder, double-click it)
    • Click a file to make it the target of the hyperlink

    The URL is displayed in the Address: box.

    • Click OK

    The hyperlink is setup. The text you used as the hyperlink is now highlighted and underlined with the default link colour.

    Note: FrontPage adds the HTML tags <a href="hyperlinktarget">...</a > around the hyperlink text.

    To create a text hyperlink pointing to the world wide web

    • In Page View, select the text to contain the link
    • On the Standard toolbar, click Insert Hyperlink

    OR

    • From the Insert menu select Hyperlink... (SpeedKey: Ctrl + K)
    • In the Link to: box, select Existing File or Web Page
    • In the Insert Hyperlink dialogue box, click the Browse The Web button

    Your web browser is started.

    • In your web browser, go to the page or file that you want to be the target of your hyperlink (you may be prompted to connect to the internet)
    • Without closing the browser, press Alt + Tab to return to FrontPage

    The location of the page you visited will be in the Address: field.

    • Click OK

    The hyperlink is created.

    • Close your web browser

    To create a text hyperlink pointing to a new page

    To save time you can create a new page and create a hyperlink to it at the same time. FrontPage first creates the new page and then creates a hyperlink to it.

    • In Page View, select text that will identify the hyperlink
    • On the Standard toolbar, click Insert Hyperlink

    OR

    • From the Insert menu select Hyperlink... (SpeedKey: Ctrl + K)

    The Insert Hyperlink dialogue box is displayed.

    • In the Link to: box, select Create New Document
    • In the Name of new document: box, type in the file name for the new page
    • Click OK

    The hyperlink to the new page is created. FrontPage displays the new blank page.

    To create an email hyperlink

    This kind of hyperlink launches the default email program on the visitor's computer with a mail address you specify already inserted as the recipient address.

    • On the Standard toolbar, click Insert Hyperlink

    OR

    • From the Insert menu select Hyperlink... (SpeedKey: Ctrl + K)

    The Insert Hyperlink dialogue box is displayed.

    • In the Link to: box, select E-mail Address
    • In the E-mail address: box, type an email address
    • Optionally, in the Subject: box, you can type in the subject heading that you want to be displayed in the Subject box of the actual email message
    • Click OK

    Follow a Hyperlink

    If you put the mouse pointer over the hyperlink but do not click it, the URL of the destination is displayed in the Status Bar. This is useful for identifying the link destination without actually having to go there.

    To follow a hyperlink

    To allow you to edit pages, hyperlinks do not work as normal in Page View (though they work normally in Preview mode).

    • In Page View, hold down Ctrl and point to the hyperlink

    The mouse pointer changes to a pointing hand .

    • Click on the hyperlink

    OR

    • Right-click the hyperlink and select Follow Hyperlink from the shortcut menu

    The target page is opened in Page View.

    Edit and Delete a Hyperlink

    To edit a text hyperlink

    • In the Page View, place the pointer anywhere in the text containing the hyperlink or select any part of the hyperlink
    • To change the target of the hyperlink, click Insert Hyperlink

    OR

    • Right-click the hyperlink text/graphic and from the shortcut menu, select Hyperlink...
    • Edit the hyperlink in the Edit Hyperlink dialogue box

    To delete a text hyperlink

    • In Page View, select the characters from which you want to delete the hyperlink.
    • On the Standard toolbar, click Insert Hyperlink
    • Click Remove Link

    The hyperlink is deleted, but not the text associated with the hyperlink.

    Create an Image Hyperlink

    Icon buttons are the most common navigational tools, but you can use any type or size of picture as a link.

    To create an image hyperlink

    • In Page View, select picture that will identify the hyperlink
    • On the Standard toolbar, click Insert Hyperlink

    The Insert Hyperlink dialogue box is displayed.

    • In the Link to: box, select Existing File or Web Page, Create New Document or E-mail Address
    • Enter the link's destination

    Note: As with text hyperlinks, the destination of an image hyperlink can be a new or existing file, a page on the world wide web or an email address.

    • Click OK

    The hyperlink is setup.

    Create an Imagemap

    An imagemap is an image containing multiple hyperlinks. When a viewer clicks a hotspot, they are automatically sent to another location on the web.

    Note: Hotspots do not stand out in a browser window. This means you have to let people know where the hotspots are and what will happen it you use them.

    To create a picture imagemap

    • In Page View, click the picture

    The Pictures toolbar is displayed.

    • To create a rectangular hotspot, click Rectangular Hotspot
    • To create a circular hotspot, click Circular Hotspot
    • To create a polygonal hotspot, click Polygonal Hotspot

    The mouse pointer, when positioned over the image, changes to a pencil shape .

    • Draw a rectangle, circle or polygon to represent the hyperlink hotspot then release the mouse button

    The Insert Hyperlink dialogue box opens.

    • In the Link to: box, select Existing File or Web Page, Create New Document or E-mail Address
    • Enter the link's destination

    Note: As with other hyperlinks, the destination of a hotspot hyperlink can be a new or existing file, a page on the world wide web or an email address.

    • Click OK

    The hyperlink is created.

    • Add further hotspots to the image as required

    • If necessary, click-and-drag the hotspot's resize handles to move or resize it


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Web Development Articles
    More By Developer Shed

       

    WEB DEVELOPMENT ARTICLES

    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates

     



    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap