One of the essential features of HTML documents is the hyperlink, or hypertext. Remember that the HT in HTML stands for Hyper Text. Clicking on a hyperlink opens a new page or file or performs some other action.
How do you create these links?
In your HTML code you create a link by putting text or an image inside an anchor tag
<a> </a> which has the HREF attribute. The value of the HREF attribute is usually the address (or hypertext reference) of the document that should display when
the link is selected. For example a link to My page might use the code:
<a href="http://www.myisp.com/~myname/mypage.htm">My page</a>
[This address is not a real one.]
One way to categorize hyperlinks is as absolute, relative or mailto.
Example of a link
to a web site page:
<a href="http://www.jegsworks.com/index.html">My Site</a>
Example of a link to a local file:
<a href="file:///c:/Jans CompLit101/index.html">Copy on hard disk</a>
Point of Confusion: Syntax for addresses - which slash?
Web address: Use forward slashes, /. Start the address with http://
Local file: Use back slash, \. Start the address with file:///
Chrome and Firefox will use forward slashes in the Address bar even for local files. Firefox will not find the page if the URL does not include file:///. IE will show forward slashes in the Status bar when you hover over a link, but for local files IE displays back slashes in the Address bar.
The relative path in the link starts with the location of the page that has the link and names the folder or folders to dig through to find the actual file or web page.
A mailto link opens your email program with the address already filled in and might fill in the Subject, like:
The mailto protocol may be associated on your computer with your usual email program, like Outlook or Windows Mail. Some browsers may not understand the mailto: type of link or may have security settings that block this type. So, as a web page author, you should always show the email address in text somewhere on the page, also.
What happens when you click on a link where the URL stops short of the filename, like http://www.myisp.com/~myname? The web server looks for a default page in that folder. The most common default names are index.html, index.htm, default.htm, and default.asp, but there are others. This is why index.html is used so often for the first page of a folder in a web site.
If there is no file with any of the default names, the web server may let the browser show a list of all the files in the folder. That is not usually what a web author wants people to see! The server can be set to send an error message instead.
Step-by-Step: Text Links
|What you will learn:||to use Save As for safety
to create a text link with complete URL
to create a text with a relative path
to create an email link
to verify a link
Start with: , hector5-Lastname-Firstname.htm, Notepad
It is easy to accidentally overwrite a document when you meant to save it with a new name. It is smart to save with the new name before you make any changes at all.
If necessary, open the file hector5-Lastname-Firstname.htm from the web project2 folder on your Class disk.
From the menu select
The Save As dialog opens.
You often see words and names on web pages that have been turned into hyperlinks. You might see a word like 'soccer' turned into a link to a site about sports news. The name of a corporation like 'Microsoft' could be a link to Microsoft's home page. Hector wants to provide links to the company he works for and to some other sites that relate to things he mentions.
Remember that this is a fictional company, but the hyperlink will work.
My Job - paragraph 1
Universidad de Buenos Aires
My Education - paragraph 1
the pyramids in Egypt
Bad link: Bad typing, including extra space, can keep the link from working.
Suppose Hector's son Ricardo has a page of his own in a subfolder of Hector's web space. You can use a relative path that tells the browser how to get to Ricardo's page from Hector's. Until the page is there, the link will not actually work, of course. But you can create a link to it anyway.
Edit the word Ricardo in the paragraph My Family to be a link to Ricardo's page, which you will create in the exercises.
using your own name, of course.
The word Ricardo is now a link, even though the page does not exist yet!
The page hector6-Lastname-Firstname.htm is in the folder web project2. The relative path says to move from the current folder down to the subfolder family and then to the subfolder ricardo, where you can find the file named at the end of the path.
If you have worked on other lessons in this site, you may have folders on your Class disk that were cropped out of the illustration.
On the next line type as a paragraph:
Please send me email telling me what you think about this page and how I might improve it to email@example.com .
Add the code to make the email address in the text into a mailto link:
Yes, there is an error in the address in the HREF attribute.
The underlying link does not have to match the visible text!
Sometimes that is really good! The text on the page did not need to show the full path. Most people don't care! They just want to click.
Protection: Many emails are going out around the world that look
like they are from legitimate organizations, like your bank or credit card
company or a government agency.
Sometimes links in the email will go to a site that will try to trick you into giving out personal information. If you hover over a link, the Status bar will show the underlying address. Inspect this carefully to make sure it matches a known good address. Instead of clicking, go to the organization's site directly but NOT by copying the URL and pasting it into your browser! That's the same as clicking on it.
If ALL links in the email are good, then the message might be real, but maybe not if there is an attachment. Your real bank or credit card company will NOT send you documents as attachments to explain a problem or to give directions for resetting a password or to verify account information. Be aware!
Punctuation and Links: Be careful about having punctuation marks directly after a URL or an email address. When an HTML editing program automatically formats your typing as a hyperlink, sometimes the punctuation gets included in the URL. Such a link will not work.
To be sure that a link works you must actually use it! After all, even if you type what you meant to type, the link will fail if there is no document at that URL.
You must be connected to the Internet, except for the mailto links.
If you have not set up an email program like Windows Mail or Outlook, the computer may try to start the setup process. Stop! You won't need to do that for these lessons.
If the mailto: link opens your local email program to write a new message, don't try to send the message. The mailto link is not a real email account!
If a link takes you to the wrong site, go back to Notepad and fix your typing mistake.
If the link opens an error page and you did not make a typing mistake (are you SURE??), then the site is offline for updates or maintenance, too busy, or is dead. This is part of the modern Internet!