110 likes | 131 Views
Learn about absolute, relative, and named hyperlinks, anchor tags usage, link maintenance, and automated link checking in HTML. Ensure your web links work flawlessly!
E N D
The Web Wizard’s Guide to HTML Chapter Four All About Hyperlinks
Chapter Objectives • Introduce three types of hyperlinks • Explain how to add absolute URLs • Explain how to add relative URLs • Explain how to add named anchors • Examine the problem of link maintenance
Different Types of Hyperlinks • Absolute URLs point to Web pages on other Web servers • Relative URLs point to Web pages on the same Web server • Named Anchors point to a different location on the current Web page
All Hyperlinks Have Two Parts • The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images) • The Link Destination is the location that the link takes you to when you click on the link • Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors
Anchor Tags • All hyperlinks are created with the anchor tag: <a>this is a link label</a> • The href attribute is used to specify the link destination: <a href=“destination.html”>
Absolute URLs • All absolute URLs use complete URL addresses for their link destinations: <a href=“http://www.umass.edu/”>UMass-Amherst</a> • Any Web page can be referenced by an absolute URL as long as you have its correct address
Relative URLs • A relative URL need only specify a file name for its link destination: <a href=“treehouse.html”>tree houses</a> • This assumes the destination file is in the same directory as the HTML file containing the link • If the file is in a different directory, pathing information must be added to the href value
Named Anchors • A named link destination specifies a location that has been marked by an anchor tag with a name attribute <a href=“#lumber”>Some Good Lumber</a> <a name=“lumber”>some good lumber</a> • The href value is prefaced with the # character but the name value is not
Named Anchors Combined with Other Links • A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor <a href=“treehouse.html#lumber”>Some Good Lumber</a> • Just add a # followed by the anchor’s name to the end of the file name in the href value
Link Maintenance • An absolute link that works today may not work tomorrow • Dead links frustrate visitors and detract from your Web pages • To keep all of your links operational, you have to test them periodically and update any that have died
Automated Link Checkers • If you have a large number of links, you should automate the process of link testing • You can subscribe to a Web-based service for link testing and weekly or monthly link reports • You can obtain your own link testing software and run it yourself