Web Readings:
Hyperlinking was one primary reason HTML was created in the first place and offers the ability to jump from one point on a web page to another point, on the same web page or to another web page altogether. Indeed links are one clear advantage of HTML over printed books and paper.
Links specify a target location to jump to. Links are categorized by the target location which may be
Links are also categorized as
A link has two general parts:
note_links_example.htm shows examples of links in action.
Links are fairly simple to code.
Regardless of the location, they all use anchor element <a>
</a> which takes basic form
<a href="anylocation">Your text
goes here</a>
href is an attribute and its value (in quotes) is the target location the
browser will jump to.
Yourtext is the cocntent and what the user actually sees.
Basic hyperlinking is accomplished with the simple anchor tag or the <a> tag.
The anchor tag is used for two purposes: One is to establish a point in an HTML
document, that can be the target for a jump. The other is to create a link,
that can be clicked on, to jump to a target. The term hyperlink is actually a
spin-off from the term hyperspace. If any of you are science fiction fans you
know that Hyperspace capable spaceships and instantly jump to a new location in
the universe. Hypertext or hyperlinking does the same thing only in the universe
of text.
The anchor tag has a corresponding closing tag, specifically the </a>
tag. The
content of the anchor tags is what you see on the web page. The content of the
anchor tags (opening and closing) is usually text or an image tag, to be
discussed later. The display of the anchor tag usually has special
formatting, generally blue text that is underlined. However; with the use of
HTML this formatting can also be controlled.
When user moves mouse over a link the cursor changes to a hand and browser displays the target in the status bar at bottom. Below are example links for different types of files.
External links (other web sites) are shown in examples below. Links are usually files so if no file name is specified the browser looks for index.htm (or .html) or home.htm or default.htm; The protocol (http:// or ftp://) must be specified so "http://www.hacc.edu" is correct but www.hacc.edu is incorrect since browser may consider this a relative link to a local file.
<a href="http://www.hacc.edu"> Hacc web site </a>
<a href="http://www.joe.com/page1.htm">Joes Site</a>
<a href="ftp://files.mit.edu/stuff.zip">Download the Zip file</a>
Relative links to another web page or another non-html file on your computer or web site
<a href="page2.htm">Page2</a>
<a href="download/mydemo.exe">Download Demo Program</a>
When referring to files, only use a pathname (like download/ in above example) if the target file is in a different folder. In the beginning it is easier to put all your files in the same folder but you could organize into sub-folders. You can specify other .htm files as well as any other type of file. If the browser does not recognize a file type it will bring up a "download/open" dialog.
Spaces in filenames are a problem and may need a %20 instead of space because, like some other special characters, they have to be "escaped" (translated into special three-character codes beginning with %)
Email link uses mailto: as shown below;
an example is
like
mailto:ejvanbla@hacc.edu note
<a href="mailto:ejvanbla@hacc.edu">email ed</a>
Jump marks: link to another part of the current (or another) document. The traditional way (works with old browsers) is to use two different <a> tags one being the mark which is the location it will go to. The other link use href with a # sign before the mark name telling browser the link jumps to a mark. Note the mark link uses name attribute but not href, while the hyperlink uses typical href attribute with a # in it. In example below the two anchors would be in different places in the document.
<a name="chap1mark">Chapter 1</a>
<a href="#chap1mark">Back to Chapter 1</a>
you could also jump to a mark in another document by (for example
note_links_example.htm#MyTop )
<a href="/somefolder/page1.htm#chap1mark">Page1-Chapter 1</a>
A modern way is using ID so still use same href=#id but can link to any element using its ID for example
TOP goes to top of page use ID=atop
Notice the value of the href attribute specifies the address or point of where
to jump to. When the first character of the href value is a poind sign '#', then
the target is a point in the current HTML page, otherwise you are targeting a
different HTML page to be displayed, when the hyperlink is clicked. The #pound sign is actually used in an
HTTP reference to specify a named point in an HTML document. So a URL may look
like this: http://web.address.page#point-in-doc
So really everything past the pound sign or to the right of the pound sign is
used to refer to a named point in the document. So not only can you jump to
another web page, but you can jump to a specific point in a web page.
Notice in the above example of the anchor tag with an href, that IF there is no
preceding web page file name after the #
sign then the browser
defaults to the current page, and then looks for the point to jump to.
Like most tags the anchor <a> element has different optional attributes. Actually href is one, although it is usually included. Read a reference to see all the options but below are a few you may find useful.
Target attribute indicates how the link will open, the default is
replace the current page. One useful option is open a new window by
target="_blank" like
<a target="_blank" href="note_links.htm">open
notes for link</a>
Appearance: by default links are underlined and blue, and once clicked
they appear a lavender color. Many users have come to expect this appearance. You can also use title attribute to create a tool tip as below
<a href="note_core.htm"
title="click to see notes">notes core</a>
note home page (hold mouse over link to see filename of the link)
Link appearances can be changed with style sheets. Hyperlinks have different formatting depending on if the link has been clicked or not. This is to aid the viewer to help them keep track of where they've been. Usually an un-clicked hyperlink is blue by default, however you can make this any color you want. This formatting is controlled by the link, alink, and vlink attributes of the body html tag. The values of these attributes are usually specified in RGB (Red-Green-Blue) hexi-decimal values. The attributes are described as follows:
we will cover these under CSS topic. note the deprecated form was <body link="#0000FF" vlink="#FF00FF" alink="#0000FF">