Other Linking Options with the Anchor Tag <a> or href Attribute:

The important of this tutorial is to show that the anchor tag (along with the href attribute) is very versatile.  Beside using the <a> tag to create a navigational bar or navbar for short (See Horizontal and Vertical Menus) using CSS, the <a> tag has many other uses to help the userr navigate your web site, other web sites send you an email :

Regular link (Hypertext)

Creating a regular is the hallmark of any web site and the easiest  to create which allows you to navigate from one page to another.

• Simply select  a word or multiple words (typically a word in a paragraph or a heading tag) you want to convert to a link and then type a link in the Link field in the Property Inspector.
• As an alternative, you could click on the Point-To-File icon in the Property Inspector and drag  it to the file in the Files Panel to link to an existing file. If the folder with the file you are attempting to link is not open, Dreamweaver will automatically open the folder when you hover over it with the cursor using the Point-To-File icon.
• As another alternative, you can also drag and drop the file from the File panel to the Link text field in the Property Inspector.
• After selecting some text, you could also use the menu option Modify >  Make Link or press CTRL+L. If you want to create some text and its link at the SAME TIME without selecting any text, place the cursor where you want to link to begin and select Insert > Hyperlink from the menu or click on the Link icon in the Insert Object Bar.
• You can also use the Browse button in the Properties panel. The folder option is best used when you need to connect to dynamic content (dynamic iamge) using the Data source checkbox instead of the File System checkbox.
  NOTE: Most of the times, you can simply get by with pointing to a file at the top-level directory (also called parent (i.e, index.html) or a folder DOWN from the parent (i.e., images/mypicture.jpg). However, if you need to go UP  a folder, you can use the shorthand for the parent directory (i.e., ../products/product1.html). Notice the "../" in the path.  To go UP two levels, use two "../" like this: ../../products/product1.html.
  NOTE: When using paths to a file, ALWAYS use the forward slash ("/") regardless of the Operating System (Mac, Windows or Lindux, etc.).

There are three types of links:

• Absolute –  a link to an EXTERNAL web site that start with http://. (i.e., http://anywebsite.com/filename.html/)
  TIP: When using an absolute link without specifying a page at the root level or in another folder, use a ending forward slash to tell the server you are requesting the default page; otherwise, there may be a slight delay. (i.e., http://anywebsite.com/filename.html/ )
  
• Document-Relative (most common) – a link to an INTERNAL page on a web site using a path to the HTML file (i.e., a_local_file_name.html)
• Root-Relative – (avoid using) Like the document-relative link, the root-relative how to link from one page to another; however, the path is described relative to the web site's ROOT folder.  Root relative links always begins with forward slash (" / ") that represent the root or top-level of the site. They are mainly useful if you want to link to an EXISTING site. (i.e., /a_local_file_name.html) There is two major drawbacks:
  • They don't work when tested locally unless the Preview Using Temporary File checkbo is selected in the Edit>Preferences.
  • They don't work if the site isn't located at the Web server root.

 Example: <a href="otherpage.html">Text for link goes here</a>
NOTE: By default, a regular link will use blue text with an underline on it. This can be changed using CSS.
NOTE: To updates a link, change it in the Property Inspector.   If you move or rename a file or folder in the File Panel, Dreamweaver will automatically prompt you to update links or graphics on the page to maintain the correct path.
NOTE: href stands for hypertext reference.

Targeting a Link

There are several options when targeting a link you create:

• By default, when creating a link, it will replace the current browser's page. This is the same as using the _self Target option in the Property Inspector.  
• If you need to open a link in another window which is mainly used to navigate to a web site other than the current site, you can use the _blank Type option in the Property Inspector.
• While framesets are not used as much anymore, you could also use the _parent and _top options can be used.

Link States

There are four major link states color or graphic that can be styled with CSS:

• L ink – The initial link color/graphics before link is clicked.  The default is a blue underline for text and a blue border for graphics.
• V isited – Normally, the color/graphics the link changes to when the link is clicked.
• H over – The color/graphics the link changes to when the link is hovered over using the cursor.
• A ctive –The color/graphics the link turns to when the user is pressing down on the link. The default is red. This option may no longer be supported by some browsers.
  Memory TIP: To have you rememeber the correct order of applying links, remember the acronym: LoVe HAte.

TIP: When using an acronym, it is best practice to use a dotted line instead of a solid line which are usually reserved and understood as links.

Image Link

Image link is basic the same as a text link. The different is that the <a> tags are wrapped around an <img> tag instead of some text.   Remember, because it is a link there will be a blue border around the image link. This border can be surpressed by setting the border thickness to 0 in the Property Inspector or creating a CSS selector to set the image border to zero (i.e., img {border-style:none;} will target all img. .profile img {border-style:none;} will target only images that are inside of a container element with an ID name of profile)

• It is created using some of the similar techniques for links (See previous Link info)

Example: <a href="anotherpage.html"><img src="image.jpg" /></a>

Email Link

An email link is also similar to a text or graphics link.  The different is that the href attribute is set to an email address prefixed by a mailto: protocol instead of a HTML file name (i.e., myfile.html).  And, instead of opening an HTML file, when clicked, an email link will open the user's email program (i.e., Outlook)

• It is created using some of the similar techniques for links (See previous Link info) except for Point-To-File and Browser since we are referring to an email address not an HTML file. 
• You can also used the email icon in the Insert Object Bar in the Common tab.  If you want to create the email text and its link at the SAME TIME WITHOUT SELECTING ANY TEXT, place the cursor where you want the email link to begin and select Insert > Email from the menu or click on the Email icon in the Insert Object Bar. CAUTION: Don't include the mailto: protocol when using this option because it is automatically added to the code.
  TIP: It is best practice to include a statement in front of an email link to let the user know the link is an email link and not a regular link. (i.e., Contact Joe White: joe@rmcs.com) or provide a small icon (usually an envelope) after the email link.

Example: <a href="mailto:yourname@yourcompany.com">Email Text goes here</a>

Named Anchor (Bookmark)

When creating a long document page, named anchors (bookmarks) can be "jump" or "auto-scroll"  from links at the top of the page to links at the bottom of the page which eliminates the need for scrolling down the page manually. Conversely, a link can be placed at the bottom of the page and an anchor (normally called "top") can be used to "jump" back up to the top of the page.  Named Anhcors can be used to jump WITHIN the SAME PAGE or at a LOCATION INSIDE another page.

Named anchors require TWO LINKS:

1. First, create a regular link to or a series of regular links ( A | B | C | D)  usually at the top of the page and prefix them with hash signs without any space in the Property Inspector.
   Example: <a href="#A"> A </a> <a href="#B"> B </a> <a href="#C"> C </a> <a href="#D"> D </a>
   NOTE: Notice that the hrefs are not pointing to HTML files (i.e., myfile.html) but to a named anchor (i.e., #A, #B, #C, etc.)
2. Then, create named anchor link(s) where the regular link(s) will jump to the named anchors by using the Named Anchor icon on the Insert Object Bar or pressing CLT+ALT+A.  Ensure it has the same ID name as the href names in the regular links at the locations where you want the browser to jump to.
   Example: <a id="A">A info at bottom of page</a>
   NOTE: Name anchors are case-sensitive and must be unique on a page.
   NOTE:  You can also use the Point-To-File technique to link to an anchor.  First, select the link and then use the Point-To-File icon and drag to the anchor on the page. TIP: Move window to anchor location  BEFORE using the Point-To-File icon.
   NOTE: To create a named anchor to another page, you need to provide BOTH the filename and the named anchor (<a href="myfile.html#anchorname">Link text goes here</a>
3. Preview in a browser.

Image Map

Using an image map is like using an image link but with the ability to have MULTIPLE LINK options to choose from on a SINGLE image.  If you have a SINGLE image with SEVERAL LINK AREAS (HOTSPOTS) that you want to use to take the user to different pages (or other interactivity), you can use an image maps.

NOTE: While an image map does not use the <a> tag (instead it uses the <area> tag) it shares many behaviors of the <a> tag such as its "href" attribute and its ability to link to other sources, it was included in this list.

• Select an image and then create hotspots by using any of the drawing tools (Rectangular, Oval, or Polystar) depending on the shape you want in the Property Inspector.
  NOTE: To move a hotspot, use the pointer tool in the Property Inspector when the image is selected.
• Then select each of the hotspots and assign normal links and alternate text (alt) to each of them in the Property inspector.
• Preview in a browser.

Jump Menu

A Jump Menu is a combo box and/or button used to allow users to choose an option and then "jump" them to another page automatically or when a button is clicked.

• Create a Jump Menu  by clicking on the Jump Menu icon in the Object Bar in the Form tab or select Insert > Forms > Jump Menu for the menu.
• In the Jump Menu dialog box,  enter the text to show in the jump menu and a URL to jump to for each of the item you want to include in the Jump Menu.
  NOTE: Click on the plus / minus sign to add or remove items from the Jump Menu. Use the up/down arrow to re-organize list order. Click on the checkbox "insert go button after menu" if you want a Go button to appear after the Jump Menu which allows users to "make up their mind" before they commit to a "jump."  The "Select first item after URL change" checkbox is used to return the user tothe first item in the menu after a selection is made.
• Preview in browser.

Bonus: Link to a JavaScript Function

While most of the time we think of linking to a page, you can also link to a JavaScript function from within a JavaScript file on the page on an external JavaScript file.

• In the Link text field, type javascript: (with the colon) and then follow it with a name of a JavaScript function in the <script> tag or in an external JavaScript file that is linked to the page. (i.e., javascript: myfunctionname()).

EXERCISE: Other Linking Option Exercise