CSCI 121 - Lecture 4 - Links

Topics Covered

1. <a> - HTML links, aka hyperlinks
• Use the <a> element to define a link.
• You can click on a link and jump to another document.
• Note: A link does not have to be text. It can be an image or any other HTML element.
• Syntax: <a href="url">link text</a>
• Use the href attribute to define the link address.
• The link text is the visible part that you wish the viewer to click on. Does NOT need to be text.
• A local link (link to the same web site) is specified with a relative URL (without http://www....).
• For example: <a href="html_images.asp">HTML Images</a>
• The link text colors may be stylized to change behavior during viewer interaction:
• When you move the mouse over a link, two things will normally happen:
• The mouse arrow will turn into a little hand.
• The color of the link element will change.
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
• You can change the default colors, by using styles:
• <style>
         a:link {color:green; background-color:transparent; text-decoration:none}
         a:visited {color:pink; background-color:transparent; text-decoration:none}
         a:hover {color:red; background-color:transparent; text-decoration:underline}
         a:active {color:yellow; background-color:transparent; text-decoration:underline}
  </style>
• Use the target attribute to specify where to open the linked document.
• The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab.
• _self - Opens the linked document in the same window/tab as it was clicked (this is default).
• _parent - Opens the linked document in the parent frame.
• _top - Opens the linked document in the full body of the window.
• framename - Opens the linked document in a named frame. We will not be learning frames in this course. HTML5 has deprecated them.
• Use the <img> element (inside <a>) to use an image as a link.
• Works for other element/tag types as well. We will learn more about img tag in future lectures.
• Can be used for jumping to a "bookmark" location within the current page; especially useful for long (tall) pages:
• Use the id attribute (id="value") to define bookmarks in a page.
• Use the href attribute (href="#value") to link to the bookmark.