OIM3690 - Web Technologies

Hyperlinks

Example: A+ Attitude: The Key to Unlocking Classroom Success

Do you know how Google ranks search results?

• YouTube: How Google Search Works (in 5 minutes)

HTML Hyperlinks

• <a> - anchor tag
• Syntax

  <a href="destination">link label</a>
  

  • also has attribute-value pair
  • "destination": a filename or URL
  • link label: a text that users can see on the page
• Example:

  ...Click <a href="https://www.amazon.com">here</a> to go to Amazon.com...
  

Are these links different?

Types of Links

• Internal Link
  • A link to another page of the same website
  • Example:

    <a href="about.html">About Me</a>
    

  • Notice that the destination is simply a filename
• External Link
  • A link to a page of a different website
  • Example:

    <a href="https://www.babson.edu/">Babson College</a>
    

  • Notice that the destination is an absolute reference to a URL

Specifying Destination Files in Internal Links

• Typically – all files are in one folder, e.g. WebTech

  <a href="secondpage.html">Second Page</a>
  

  • secondpage.html is in the same folder as the HTML file in which it is specified
• If you have a subfolder (say, folder1) inside WebTech

  <a href="folder1/secondpage.html">Second Page</a>
  

• If you have the destination file outside WebTech

  <a href="../secondpage.html"> Second Page </a>
  

• DO NOT use a full pathname
  • e.g. <a href="C:/.../WebTech/secondpage.html">Terrible Link</a>

Exercise - Extending index.html

• Create Links in index.html:
  1. Add a link for "Babson" directing to Babson's website.
  2. Add a link for your hobby directing to a related website.
  3. Add a link at the bottom directing to a new page called sitemap.html.
• Create sitemap.html:
  1. Create a new file named sitemap.html.
  2. Update the title to "List of Work - Your Name".
  3. Add a link to ex01.html.
  4. Add a link at the bottom directing back to index.html.

Linking within a Page

• When a webpage loads, the browser window displays the top of the page and hides the bottom.
• Scrolling down moves the window down and reveals more content.
• Internal links allow users to quickly access specific sections of a webpage.
  
  
• Question: Can you think of an example of linking within a page?

Implementing Links within a Page

1. Add <a id="top"></a> at the top of the page
   • or <h1 id="top">Top of Page</h1>
   • Make sure the page is long enough
2. You can create a link to this part of the page, from anywhere else in this page:

   <a href="#top">Go to Top of Page </a>
   

3. You can also link to this position from other page.

   <a href="index.html#top">Go to Top of Main Page </a>
   

   • This link references the section on index.html that has the id attribute "top".
   • This is a quick and efficient way to navigate and direct users to specific parts of a website.

Email link

• An email link provides a link to an email address.

  <a href="mailto:zli@babson.edu">Email Me</a>
  

• Clicking on an email link can perform the following actions:
  • Open the user's default email program
  • Create a new email message
  • Automatically populate the recipient field with the specified email address.
• This type of link is called a mailto link,

Opening links in a new tab

• Use the attribute called target in your <a> tag
• target="_blank" will open the link in a new window.
  • this is "underscoreblank" not "spaceblank".
• Example:

  <a href="https://www.amazon.com" target="_blank">Amazon</a>
  

  
  
• Exercise: change one link in index.html so it will be opened in a new tab.

Questions?