Adding hyperlinks to Web Pages

• Linking local Web pages and linking to other documents on the WWW.
  • To create a hyperlink, use the <a> tag to.
    • 1. Define the text or image to be highlighted or underlined by the Web browser.
      • This is the hotspot text for the hyperlink. 
    • 2. Describe the location of the file pointed to by the hyperlink.
  • This lecture covers using text for links.
    • Your book and a class website exercise explains using images as hot links.
      
      

Hyperlinks

• <a> is used (instead of l for link) because it is referred to as a reference anchor.
  • The term anchor is also used for a special use of the <a> tag called a named anchor.
• Hyperlinks have parts.
  • The hotspot text is the text that browsers display.
    • Default display is underlined and blue.
    • Can change hyperlinks’ color (CSS). 
    • This is <a>the hotspot text</a> for a hyperlink.
      
      

HREF attribute

• Browsers must be told the location of the file that the link points to.
  • Done with a special attribute in the <a> tag called the href (hyperlink reference) attribute.
    • This is <a href="file/location.html">the hotspot text</a> for a hyperlink.
      • Would display: This is the hotspot text for a hyperlink. (Note: for illustration only. Not an actual hyperlink.)
    • Any valid URL can be referenced by the HREF attribute.
      
      

Hyperlinks

• Absolute v. Relative Addressing 
• Absolute addressing
  • To define the location of a file in a hyperlink, an absolute address tells the browser three things:
    • the service type,
    • its location, and
    • its name.
  • The URLtakes the following form:
    • protocol://domain.name/directoryname/filename.htm
  • Protocol section tells the browser what type of information (service type) the hyperlink points to.
    • While building Web pages, which are stored on the hard drive, your computer uses the protocol file:.
  • This tells the browser that the file will be loaded from your local hard drive.
  • This local URL will be displayed at the bottom of the browser in the "status" window.
  • Once the site is uploaded to the Web server, it will take on a protocol http:.
  • protocol://domain.name/directoryname/filename.htm
    • The domain.name is the server name.
      • On the World Wide Web, the server at NUS, for example, is the nus in nus.edu.sg
    • While you're creating the Website, the server, the domain name, is the hard drive the Website is stored on.
      • On Macintosh: file:///Drive/path/file.htm is the URL while working on the document.
        • file:///Macintosh_HD/Teaching/nm3217/web/nm3217/weblinking.htm
      • On Windows and MS-DOS the hard drive is represented using its drive letter followed by a vertical bar: |.
        • Path: C:\Teaching\nm3217\web\nm3217\weblinking.htm
      • On Unix the directory path (not a hard drive) is listed.
  • The next section of the URL — /directoryname/ — describes the location of the file (its folder or directory) you want the hyperlink to access and load.
    • This includes the list of directories (folders) and subdirectories where files are located, starting at the root, or top, directory of your computer system.
    • Teaching/nm3217/web/nm3217/
  • The last part of the URL is the name of the file or document.
    • weblinking.htm
  • Called absolute address because the URL describes absolutely the file’s location.
    • Problem with absolute addressing
      • Entering one for every hyperlink within the website creates problems when website is moved.
        • No longer in the same root director, or computer.
    • Use only for linking to websites outside of your website
      
      

Relative addressing

• Relative addressing includes only enough information to describe the file’s location relative to the currently displayed page.
  • In its simplest form, the HREF attribute defines the name of the file that a hyperlink points to.
    • weblinking.htm
  • href="myfile.htm" inside <a> tags tells the browser to open a file called myfile.htm.
    • If simplest relative address is used, myfile.htm must be located in the same directory, or folder, as the HTML document that called it.
      • The browser uses the location of the currently displayed HTML document as the base location for myfile.htm.
  • You can also include additional path information to describe the location of files not stored in the same directory, or folder, as the current HTML document.
    • Useful if you have a folder for images or groups of web pages within a large website
      • images/mainart.jpg
        • For http://linda.perry.net/nm5208/images/mainart.jpg
          
          

Absolute vs. relative

• Use relative addressing to access internal pages.
  • Using relative addressing makes your HTML documents portable.
    • You can easily upload your website to a server or move all your HTML documents to a new set of directories or a different hard drive
      • All links will be functional.
• With absolute addressing of internal pages, you would need to re-edit each HTML document and update all the URLs before the hyperlinks would work.
  • Use absolute addressing when you create links to other people's Web pages.
• Your project
  • You willl have several internal links with relativve addressing, and at least four external links, with absolute addressing.
    
    

Inline links

• A hyperlink that is part of page text.
  • As opposed to being on a line of its own, in a list.
• Inline links can contain as many words as you want.
• Can also be images.
• Can be displayed using any of the character-formatting styles available.
• Your project
  • At least two of your links must be inline links.
    
    

Inline link guidelines:

• Keep hotspot text short and self-explanatory.
• Limit the use of character formatting.
• Avoid "here" or "click here." 
  
• Keeping text short
  • The concept behind all inline hyperlinks is accessibility without intrusion.
    • Should blend into page, not overwhelm or overtake.
  • Use only enough words that people understand what the link is pointing to.
  • Use transparent links where possible.
    • In keeping with the concept of accessibility without intrusion,
    • Keep hotspot text grammatically transparent.
    • Hotspot text is an integral part of the sentence.
    • Not transparent: 
      • Click here to see my favorite pet, Peg, an African grey.
    • Transparent: 
      • My favorite pet is Peg, an African grey.
        
        

Link menus

• Can present hyperlinks in list or link menu
  • An index, table of contents, or site map.
    • Link menus are ideal for any type of list, catalog, or index that demands presenting hyperlinks in a format that is easily accessible.
  • Make link menu text descriptive.
  • Use character formatting where appropriate.
  • Mix in paragraphs of descriptive text.
• Example: Class website sitemap
  
  

Links

• Exercise:
  • Link the ordered list exercise to the class homepage.
    
    

Back to top

Lectures Index.