A Hyperlink Icon A Hyperlink is a linkLINK

A link can be a word or phrase, or an image or button, that connects or links the user to another page or another Web site when clicked.
on a Web page that when clicked connects to a page on another website, another page on the same Web site, or a specific location or IDID

An ID identifies a particular location or section inside a Web page. An ID is not visible to a visitor to the Web page.

An ID can define a location to link to. It can also define a section of a Web page that has specific presentation properties, such as font color, font size, or margins. For instance, the ID may be "footer" or "header" or "top_nav."
on the same page. The <a> tag defines an anchor and can be used to do two things:

The href attribute, or hyperlink reference, specifies the destination of a link, which can be external or local.

Example of an External Link or Absolute Address to another site:
<a href="http://www.scf.edu/" target="_blank">SCF</a>
The above code uses the complete Web address path, including the http protocol.
target="_blank" opens a new browser window, so the current page is not closed.

Examples of a Local Link or Relative Address to the same site:
<a href="Resume.htm">Resume</a>
The above code links to a file in the same folder on the same Web site.
<a href="products/Monitors.htm">Monitors</a>
The above code links to a file in a different folder named products, which is on the same Web site.

Examples of setting an Internal Link to an Anchor or Bookmark or IDID

An ID can define a location in a Web page or more commmonly it can define a division in a Web page. No two elements can have the same ID value (name) in a Web page.
on the same page:
<h1 id="Chap1">Chapter 1</h1>
The HTML line above sets an ID named Chap1 on the same Web page.
(Note: An ID name can only be defined one time per page; each ID name must be unique.)

The older code below sets a "named anchor" or bookmark named Chap1 on the same Web page.
<a name="Chap1">Chapter 1</a>
Note: Under HTML5, named anchors are deprecated or superseded and should be avoided.

The code below links to an ID named Chap1 on the same page (or to an older "named anchor"):
<a href="#Chap1">Chapter 1</a>

Code samples of an Email Link to an email address:
<a href="mailto:yourFirstName@domain.com">Email me</a>
An email link with a default Subject:
<a href="mailto:yourFirstName@domain.com?Subject=Inquiry">Contact Us</a>

Code sample of a Telephone Link for use on a smartphone:
<a href="tel:18885550000">(888) 555-0000</a>

The following short exercise shows you how to create and edit a simple introductory Web page using hyperlinks.

1. Click Start > All Programs > Accessories > Notepad.

Note: If you have an Apple Mac, you may use TextEdit instead.

2. Highlight, copy, and paste the Web page shown below into Notepad:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>
Hyperlinks</title>
</head>
<body>
  <h1 id="Top">
Hyperlink Demo</h1>
  <p>
Hello. My name is MyFirstName MyLastName</p>
  <p>
I go to school at
  <a href="http://www.scf.edu/" target="_blank">
SCF</a></p>
  <p>
Please see my resume at <a href="resume.htm">Resume</a></p>
  <p>
My email is <a href="mailto:me@domain.com">me@domain.com</a>
  <br><br><br><br>
<!-- Line breaks added to demonstrate Top link -->
  <a href="#Top">
Top</a>
</body>
</html>

1. Save the file as Hyperlinks.htm.

2. Create a second small test file named Resume.htm and save it in the same folder or location as Hyperlinks.htm. For right now, only include the word Resume between the opening and closing <body> tags.

3. Open Hyperlinks.htm in your browser.

Hyperlinks Web Page

Click here to see this sample web page live  (then right-click > View Source for code)

4. Click on the absolute address link and confirm that it takes you to another Web site.

5. Return to the Hyperlinks.htm page and click on the local Resume link and confirm that it works.

6. Click on your email address link. If you have an email clientEMAIL CLIENT

An Email Client is a computer program used to manage a user's email. Examples of email clients are Microsoft Outlook and Pegasus Mail.
installed, it will open and the To box of the new email message will display the email address.

7. Resize the browser window so that only half of the page is displayed. Scroll to the bottom and click on the Top hyperlink and notice how it takes you to the top of the page.

8. Notice the left-pointing hand on the bottom of this page. It is an image hyperlink. Right-click on the hand and choose Save picture as and save the left pointing hand to the same folder as Hyperlinks.htm.

9. Open the Resume.htm file in Notepad and add the following lines of code to use the left-pointing hand image as a hyperlink that will link back to the Hyperlinks.htm page:

<a href="Hyperlinks.htm">
  <img src="pointLeft.gif" height="25" width="43" alt="Go to Previous page">
</a>

Feel free to add even more links and tags and experiment.

The 4 minute YouTube video tutorial below shows you how to quickly create hyperlinks using Windows Notepad. (Please wait for load.)

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...
 your file, see: http://validator.w3.org

Many webweavers open the Notepad window on the left sideSetting Screens

In Windows 7, you can tap [Ctrl] + [left arrow] to automatically set the active window to occupy the full left half of the screen.
of the screen and have the browser window open on the right side of the screen. Once both windows are displayed, you can tap [Ctrl] + [S] to save your Notepad edits and then in the browser window click Refresh or [F5] to see the current results.

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top