| Free Tutorials |
| Internet |
 What is Internet |
| Internet Games |
| Learn TCP IP |
| HTML |
| Learn HTML |
| Learn DHTML |
| Learn CSS |
| Learn XML |
| Learn XHTML |
| Learn WML |
| Database |
| Learn Access |
| Learn Data-VB |
| Learn Oracle |
| Learn SQL |
| Programming |
| Learn ActiveX |
| Learn C++ |
| Learn CGI_Perl |
| Learn Interdev |
| Learn Java |
| Learn JavaScript |
| Learn Vbscript |
| Learn VisualBasic |
| Learn VC++ |
| Operating systems |
| Learn RedHat |
| Learn Unix |
| Learn Winnt |
The feature that best characterizes the World Wide Web is the ability to link directly from one page to any other page anywhere on the Web. Normally, this hyperlinking is triggered by a mouse click on a letter, word, phrase, or graphic on the linking page, with the linked page retrieved and loaded immediately into the browser. Web links can be made to local pages in the same directory as the linking page or to a page at any other site on the Web. This is a very powerful, yet easy to use, feature that permits you to navigate to pages located around the world with the simple click of the mouse. The <a> Tag As described in an earlier tutorial the most common type of link is a clickable word or phrase that transfers directly to the target page. A text link is created by surrounding the text string with an <a href> anchor tag specifying the location of the page to which to link. The basic format of the tag is shown below.
General format for <a> tag. The linking text is, by default, underlined and displayed in blue as a visual clue
that the text string is a clickable link. The location of the linked page is given by
the href attribute.
You can link to your own pages or to a page at a remote Web site. If the linked page is
on the local PC or resides on the same Web server as the linking page, then the directory
path to that target page is used as the URL (a relative link). If the linked page is
at a different Web site, the link must include the protocol and domain reference
http://domain name (an absolute link). You can link to
the site name to retrieve the default home page or, if it is known, to a particular page
at that site. Link Targets Unless instructed otherwise, the linked page opens in the same browser window that
displays the linking page. The original page is replaced by the linked page. It is often
convenient, especially when linking to remote sites on the Web, to open that page in a
different browser window. When visitors leave your site to browse remote sites they may
not be able to back-click their way to your original page. By opening remote sites in
a new window, your visitors do not lose contact with your pages. Your site is always
available in the original window. You can specify where a linked page is to be opened by coding a
target="_window" attribute in the <a> tag.
Special values are coded to indicate the target window, each term prefixed with an
underscore ( _ ) character. These target window codes are shown in the following table. Values for target attribute of <a> tag. In the following example a remote site is opened in a new browser window; the page
containing the link remains visible in the original browser window. Link Styles Text links are displayed in three different colors to identify the three conditions of
a link. An unvisited link is displayed in blue, a visited link is displayed in
purple, and an active link (the mouse button is clicked while pointing at the link
text) is displayed in red. Also, text links are underlined. You can override these default colors and underlines, as well as include other visual
indicators of link status, with the style sheet selectors shown below. Link selectors and stylings. The a:link selector identifies an unvisited link,
the a:hover selector identifies a link with the mouse
positioned over it, the a:active selector identifies a
link being clicked, and the a:visited selector identifies
a link that has been visited. Any combination of text style properties and values can be
applied to these linking states. The following style sheet illustrates possible settings
for the four link states. A normal unvisited link is colored blue but does not display the underline. When the
mouse cursor is moved on top of the link it changes to green, is underlined, and is
displayed in 14pt size. When the link is clicked, its color changes to red. A visited
link is displayed at 12pt gray with no underline. Link colors for a page can be changed by coding associated attributes in the
<body> tag. The three attributes are using color names or hexadecimal values to set the color of an unvisited link, a
visited link, and an active link, respectively. In the above example, alternative text link colors are applied to the
<body> tag with these attributes. Preference should be given to using comparable
link selectors and style sheet properties. On-Page Links Links are normally made between different Web documents so that visitors can navigate
between pages. Links can, however, be made to different locations in the same document.
These on-page links are often used to link from a table of contents at the top of
a page to information appearing elsewhere on the same page. In order to create on-page links you need to code the pair of <a>
anchor tags shown below. General formats for <a> tags to create on-page links. The location to which a link is made (normally a side heading on the page, but any
other target text can be used) is enclosed in an <a name="name">
tag supplying a name to identify this on-page link destination. The text from which the link
is made is enclosed in an a href="#name" tag in which this
destination name is coded, preceded by "#". The following code shows three links to three different locations on a page. The target
locations are named ITEM1, ITEM2, and
ITEM3. When a link is clicked at the top of the page, the browser
scrolls to one of these named destination links. Even though the destination text strings are enclosed in <a>
tags they are not colored or underlined as are normal links. They are "invisible" targets
for links (using name attributes), not links themselves (using
href attributes). When linking from the top of a Web page to locations farther down the same page it
is a good idea to provide return links to the top of the page. In this example each
linked section (ITEM1, ITEM2, and
ITEM3) is followed by a link back to the Top
of the page. Each of these on-page links is coded as follows. It is instructive to note that there is no on-page destination text named
"TOP". If there is no location on a page matching the target name,
then the browser returns to the top of the page by default. The destination name
"TOP" is used because there is no such target name, knowing
that the browser will scroll to the top of the page as a result. You can, of course, supply a named text string as the return destination for linking
back to the top of the page. You could, for instance, add a heading at the top of the page
as the return link target: Now, when a Top link is clicked, the page is scrolled
to the named location of the heading "On-Page Links." It is possible to link from one page to a specified location on a different page,
combining an external link with an on-page link. Assume, for instance, that you need
to link to a section of NextPage.htm that is identified with the
tag <a name="SECTION3">. Use the format for an on-page link,
<a href="#name">, and simply prefix the target
#name with the name of the page. This link transfers to a page named NextPage.htm and scrolls
to the tag identified with <a name="SECTION3">. This type
of linking can normally be done only with pages you create. It is unlikely that you would
know the named target sections of remote pages even if they are available for linking. Links to Other Documents Types It is not necessary to link only to Web pages. You can use the <a>
tag to link to text documents, word processing documents, spreadsheets, graphic files, and
other types of documents. The manner in which the browser treats the linked document depends
on the document’s file extension and how the browser is set up to handle non-HTML extensions. Text Files Standard text files with the .txt extension are opened in the
browser just like an XHTML document. The file is displayed in the original font face and
style used to create the document; plus, the browser maintains original line breaks and
spaces coded in the document. The link below retrieves a text document located in the same
directory as the Web page containing the link and opens it in the browser. In this example the text document is opened inside the browser window, replacing
the linking page. If target="_blank" is added to the <a>
tag, the document is opened in a separate window. However, when a document with a
.txt file extension is opened in a separate window, it is
opened by the program associated with that file type. In the case of a
.txt file, the default text editor program, normally Notepad, is used to open
the document, which then appears inside the external Notepad window. If the user has
chosen a different editor program as the system default, then the document is opened
inside that program. Word Processing Documents Word processing documents can be displayed in the browser if compatible software
is available on the the user’s computer. When linking to a Microsoft Word document --
and Microsoft Word (or the special Word reader software) is installed on the user’s
computer system -- then the Word document opens inside the browser window. The following
link opens a Word document, replacing the linking page. Notice that the Microsoft Word program opens inside the browser window and that a
subset of Word menus is added to the browser’s Menu Bar. Users can perform basic editing
of the Word document and can save it to their local computers. They cannot, of course, edit
and resave the original document, only the copy displayed in the browser window. If
target="_blank" is added to the <a>
tag, then the linked document is opened in a separate browser window that also includes
the subset of Word editing menus. Spreadsheet Documents As with word processing documents, spreadsheets are displayed in the browser if
compatible software is available on the user’s computer. When linking to a Microsoft
Excel document -- and Microsoft Excel (or the special Excel reader software) is installed
on the user’s system -- then the spreadsheet opens inside the browser window. The following
link opens an Excel spreadsheet in the same browser window as the linking page. A subset of Excel menus is added to the browser’s Menu Bar for minor editing and
saving of the document to the local computer. The Back button is used to return to the
linking page. A similar external window opens when the link is made with
target="_blank" added to the <a> tag. Presentation Documents Slide presentations are displayed in the browser if the same software is available
on the user’s computer. When linking to a Microsoft PowerPoint document -- and PowerPoint
(or the special PowerPoint reader software) is installed on the user’s system -- the
presentation opens inside the browser window. The following link opens a PowerPoint
document for display in the browser window. As in the case with Word and Excel documents, PowerPoint documents have associated menus
added to the browser’s Menu Bar for navigating the slide presentation and saving it to the
local computer. The Back button returns to the linking page. This same external browser
window is opened when target="_blank" is added to the tag. Graphic Files Both GIF and JPEG images can be displayed in the browser through direct links to these
graphic files. In other words, it is not necessary to embed a graphic on a Web page in order
to display it. Simply by linking to files with .gif and
.jpg file extensions the images are opened directly inside the browser. Since the images are not formatted on a Web page, they are positioned in the top-left
corner of the browser window at their original sizes. The following link opens a
.gif image file. When the image opens in the same browser window,
the Back button is clicked to return to the linking page. Email Links There is a variation of the href attribute that permits you
to set up an email link. A click on the link opens the visitor’s default email program
for correspondence with the address provided in the link. The general format for this
link is shown below. General format for mailto: link. The href=mailto: attribute is followed by an email address.
The following link, for example, opens the visitor’s email program (the one that is set as their
browser’s default email program) and inserts the specified email address into the address line. This type of link often appears on Web sites for visitors to correspond with the owners
or authors of the sites. You might, for instance, use your email address in the link for
feedback from visitors to your site. |
