HTML/XHTML
Hyperlinks

Discussion

• Hyperlinks
  • Links (hyperlinks) are used to go from page to page.
  • Links can go to any type of file or page that is uploaded to the web such as another web page, an image, pdf, music, video, text files, word files, spreadsheets, etc.
  • The HTML tag used to define a hyperlink is the anchor or <a> tag.
    • The syntax of the anchor tag is
      <a href="url">Some link</a>
      • The attribute href stands for hyperlink reference and is assigned the address of the link.
      • url (Uniform Resource Locator or Universal Resource Locator) is the address of the link. The standard form of an address to a page is
        http://www.austincc.edu/jscholl/
        
      • http means HyperTextTransferProtocol
      • :// is a separator between the protocol and the adderess
      • www stands for World Wide Web
      • austincc is the domain name for Austin Community College
      • edu is the domain extension and describes the doman as being an educational institution
      • / is another separator and designates another folder
      • jscholl is my account on the Austin Community College server and has the name jscholl
      • When no page (or other file) is designated in the address, the default page is displayed. Each server sets the allowable names for default pages and the order of precedence. Common default pages are
        index.html
        index.htm
        index.shtml
        index.php
        index.php5
        index.php4
        index.php3
        index.cgi
        default.html
        default.htm
        home.html
        home.htm
        Index.html
        Index.htm
        Index.shtml
        Index.php
        Index.cgi
        Default.html
        Default.htm
        Home.html
        Home.htm
        placeholder.html
        
      • We will only use index.htm or index.html for our default page names.
      • The words between the open and close a tag are what appear on the page for the user to see and click on for access to the page. There are four states of a link called link, visited, hover, and active. The default for the link in the "link" state is underlined and blue.
  • When a url contains a full Internet address, it is called an abolute path or absolute link.
    • When you are linking to a page located on a different server, you must always use an absolute link.
  • When pages or files are stored on the same server as your page resides, you can use a relative path or relative link.
    • The format for a relative path is
      <a href="somePage.htm">Some page on the same server in the same folder</a>
      <a href="subfolder/somePage.htm">Some page on the same server in a sub folder of the current folder</a>
      <a href="../somePage.htm">Some page on the same server in a folder above the current folder</a>
    • Use the / separator for each folder in the path.
    • Use ../ for each heirarchial level higher than the current folder. For example from the page
      http://www.austincc.edu/jscholl/summer2009/javascript/teachers/HTML/links.htm you could link to the testing center page using the relative path
      <a href="../../../../../testctr/hours.php
      to reach the testing center hours page on the ACC server.
  • Linking to a specific place on a page uses a named anchor.
    • A named anchor requires 2 parts.
      1. a link to a specific place on the page
      2. code at the location where the link is directed
      for example view my syllabus
    • The menu at the top of the page links to locations within the page.
    • View the source code of the syllabus page.
      The menu code links to different locations on the page
      <a href="#courseInfo">Course Information</a> |
      <a href="#policies">Policies</a> |
      <a href="#catalog">Catalog</a> |
      <a href="#text">Text</a> |
      <a href="#rationale"> Rationale</a> |
      <a href="#objectives"> Objectives</a> |
      <a href="#requirements"> Requirements</a> |
      <a href="#grades">Grades</a> |
      <a href="#homework"> Assignments</a> |
      <a href="#exams">Exams</a>
      
    • Each location is coded with an anchor and a name, for example:
      <a name="courseInfo"></a>
    • Since there is not text between the opening and closing a tag, nothing is displayed on the screen.
    • You can link to a specific location on a different page as long as the specific location has a name and you add the # and the name to the end of the address in the link.
  • Opening a page in a new window
    • By default a link will open in the same window. You can code the link to open in a new window. Prior to XHTML strict, the target attribute was used to instruct the browser to open the link in a new window. When using XHTML strict, you cannot use the target="_blank" attribute. The following link will open in a new window and complies with XHTML strict coding guidelines:
      <a href="http://www.htmlhelp.com/reference/html40/entities/" onclick="window.open(this.href,'_blank');return false;"> Character Entities</a>
    • Values for instructing how links are to open
      name -- opens a link in a window of the name used
      _blank -- opens a new window
      _parent -- when using frames, opens in the current window (frameset)
      _self -- opens in the same window
      _top -- opens a window in the original window and cancels all frames
      new -- opens a window named new
• Email links
  • The mailto link is not as valuable as it once was since many users do not configure their computers to associate with a mail program and Internet Explorer does not allow the body of a message to send through a form using HTML and JavaScript. Most mail coding is now done through server-side scripting.

Practice:

• Create an index page
  • Your page should link to
    your myFirstPage.htm page in your HTML folder in the same window
    the requirements location on my syllabus page mentioned above in a new window
  • Add a heading, an image, and text to your index page.
  • Add an anchor with a name to each part of your index page.
  • Create a menu at the top of your page to link to each part of your index page. (If your entire page is viewable without scrolling, you will not be able to see the internal link focusing.

• Make any corrections for any page that does not validate or display correctly.