Creating linksSyntaxRelative versus absolute pathsTips for using linksAnchorsTargetsOther types of linksKeyboard interactionKeyboard shortcutsTab orderImages as linksImage mapsClient-side image mapsServer-side image mapsXHTML LinksHyperlinks, commonly referred to as links, are references to resources on a file system. Links have three components: destination, label, and target. The destination specifies the type of resource represented by the link. Destinations can includeimages, sound files, movies, or other Web pages. The label is the part the user sees and clicks on to reach the destination. The target, which is often omitted or implicit, is where the destination will be displayed. For example, the target could be a named window or a new window.Creating linksSyntaxTo create a link, use the anchor element (a).<p>For more information, search for it on <a href="http://www.google.com">Google</a>.</p>In the example above, the href (hypertext reference) attribute specifies the destination – http://www.google.com. The label is the text between the begin- and end-anchor elements – Google. Relative versus absolute pathsRelative URLs refer to resources relative to the current Web page that are within the Web page’s domain. Absolute URLs refer to Web content outside of your Web page’s domain. An absolute address must include an Internet protocol (e.g., HTTP, HTTPS, FTP). For example, the following link may not work properly because the destination, www.google.com, is outside the host domain, http://www.programmingisfun.net.<p>This is possibly a bad way to link to <a href="www.google.com">Google</a>.</p>To compare relative and absolute addresses, suppose you are creating a markup file named index.html. The file is stored inthe languages directory within the www.programmingisfun.net domain. To link to another Web page within the languages directory, there are two alternatives:<!-- relative URL --><a href="fortran.html">FORTRAN</a> <!-- absolute URL --><a href="http://www.programmingisfun.net/languages/fortran.html">FORTRAN</a>The first method is preferred because of the shorter path length. Additionally, if the name of the directory changes from languages to langs, the relative link will continue to function; however, the absolute link will be broken. To access URLs in other directories, the .. (dot-dot) operator is useful for going up one level in the file system hierarchy. Suppose there is an examples directory on the same level as languages, and you want to link to something in that directory from languages/index.html.<a href="../examples/fortran/arrays.html">FORTRAN arrays</a>Tips for using links- Link labels should be short. In other words, don’t use an entire sentence as a link label.- The label “Click here” should be avoided in favor of more descriptive text.- The anchor element can contain any kind of inline element (e.g., i, b) except another anchor element. Anchor elements cannot contain block-level elements (e.g., h1, p).<!-- avoid this --><a href="fortran.html">Click here</a> to learn about FORTRAN.<!-- use this instead -->Learn about <a href="fortran.html">FORTRAN</a>. <!-- using inline elements -->Most programmers agree that the least fun language is <a href="lisp.html"><b>LISP</b></a>. <!-- block-level elements don't work --><a href="compiled.html"><h3>Compiled languages</h3></a><!-- the following works, though --><h3><a href="compiled.html">Compiled languages</a></h3>AnchorsAnchors are jump points within an XHTML page that can be used as destinations for links. Clicking on a link typically takes the user to the top of the corresponding destination document. A link can instead jump to a specific section of a Web page by referencing an anchor in the destination. Anchors are particularly useful in long pages, helping to divide the page into sections to which the user can quickly navigate.To create an anchor, use the name attribute of the anchor element. Any element can be made to serve as an anchor by specifying its id attribute:<h3><a name="intro">Introduction</a></h3>...<!-- an alternative --><h3 id="chap1">Chapter 1</h3>To link to an anchor within the current page, use the pound-sign before the anchor name.<h1>Programming is Fun</h1><h3>Table of Contents</h3><p><a href="#intro">Introduction</a><br /><a href="#history">History of Computing</a><br /><a href="#whatisfun">What is Fun?</a><br />...<h3><a name="intro">Introduction</a></h3><p>Let's start with the abacus...</p>You can also target anchors on other Web pages.<a href="languages.html#compiled">Compiled languages</a><a href="languages.html#interpreted">Interpreted languages</a>TargetsTargets allow you to specify the browser window where the link destinations are to be displayed. They are often used to open new browser windows when you do not want the content of the current window replaced by the link content. Targets are specified in links using the target attribute and should refer to a window name:<a href="ajax.html" target="interpreted">Ajax</a><br /><a href="fortran.html" target="compiled">FORTRAN</a><br /><a href="perl.html" target="interpreted">Perl</a><br />If the user clicks on a link targeted at the interpreted window and that window has not yet been created, a new browser window will appear displaying the link destination. If that window remains open, any other links targeted to the interpreted window will be displayed in that window.If you want to specify a default target for all links on the page, use the base element.<base target="interpreted" /> <a href="ajax.html">Ajax</a><br /><a href="fortran.html" target="compiled">FORTRAN</a><br /><a href="perl.html">Perl</a><br />Individual links can still use the target attribute to override the default target. Here are some things to keep in mind about targets:- Target names are case-sensitive.- To open a link in an unnamed, new browser window, use a target name of _blank.- The W3C has removed the target attribute for strict XHTML. It suggests using JavaScript to handle targets.Other types of linksYou can create links to any URL – FTP sites, downloadable files, newsgroups, email addresses, etc. Here are some examples:<!-- FTP server --><p>Browse our <a href="ftp://www.programmingisfun.net/">FTP server</a></p> <!-- FTP server that requires a username (guest) and password (P4ssw0rd) --><p>Our <a href="ftp://guest:[email protected]/">members area</a> has more files.</p> <!-- newsgroup --><p>The <a
View Full Document
Unlocking...