Web Design - Introduction to HTML: Hyperlinks

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Three:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G

The Power of Hyperlinks In the last section you learned how to ‘markup’ text in an HTML document using common formatting tags. In this section, you will be introduced to the hyperlink or ‘Hypertext’ aspect of the Hypertext Markup Language. As you learned in Module 1, the Internet has been around in some form or another since 1960. While this network of computers was useful for academic organizations, it wasn’t used by people outside of these organizations until the introduction of HTML. Question: What was it about HTML that made the internet more appealing/accessible? It was the ability to jump from page to page via hyperlinks. The <a></a> Anchor Tag The power of the hyperlink comes from the <a></a>, or anchor, tag. To clarify, the power of the hyperlink comes from the combination of the <a></a> tags and some helpful attributes. In fact, the <a></a> alone cannot create a hyperlink. In order for an <a></a> tag to become a hyperlink, an important, powerful attribute must be added to the opening <a> tag. That attribute is the href="" attribute, where "href" stands for hypertext reference. The href="" Attribute The href="" attribute is like other attributes in that it must have a value associated to it. The value of an href="" attribute can be several things, most notably: An absolute reference. A relative reference. An email address. Absolute References An absolute reference is a precise location of a web page on the internet, or the page’s Uniform Resource Locator (URL). Absolute references are typically used on a web page to link to a page or site outside of the original page’s structure. For instance, imagine you are creating a web page about dirt bikes and on your page you want to discuss your favorite brand of dirt bikes – Yamaha. Upon consideration, you decide that you would like your page to link to the Yamaha Motor Corporation official web site. After some searching you find that the URL for the official Yamaha Motor web site is: http://www.yamaha-motor.com/. Review the generic URL above and then refer to the Yamaha Motor web site URL from the previous reading: What is the domain name for the Yamaha Motor web site? What is the file name for the Yamaha Motor web site? The last question is a trick question – sorry. The file name for the Yamaha Motor web site is index.html or index.htm – depending on the web designer / web author’s preference. The index.html file is a very important file in that it automatically refers to your home page. As long as Yamaha Motor has named their home page index.html (or index.htm) and placed it in the correct location on their web server, when a user enters the full URL, http://www.yamaha-motor.com, into the web browser address bar, the index.html file (or home page) is automatically displayed. Refer back a couple of paragraphs to the fictional web page you were creating about dirt bikes. You have been introduced to the HTML elements necessary to create an absolute referece hyperlink. Let’s see the absolute reference in action now. Next

© 2008 KCDL. All rights reserved.