A Smarter Way To Learn HTML & CSS(2015)

29
Links

Now we come to the feature for which HTML is named, hypertext a.k.a. hyperlinks a.k.a. links. You click on some text or an image, and a new page loads. Or perhaps something else happens.

A link is displayed, by default, in blue, with an underline. Let’s say I want to have a link on my site, A Smarter Way to Learn, that takes the user to the programming site Stack Overflow. When the user clicks Stack Overflow, he is taken to the home page of that site. This is the HTML that creates the link:

<a href="http://www.stackoverflow.com">Stack Overflow</a>

These are the parts.

· a tells the browser to watch for an anchor. The anchor is the link text between the opening <a> tag and the closing </a> tag. It is the text that the user sees. In this case the anchor, or link text, is Stack Overflow.

· href stands for “hypertext reference.” href tells the browser, “Watch for an address immediately following the equal sign. This will be the page to load when the user clicks the anchor.”

· The Web address is in quotes. In this case the address is http://www.stackoverflow.com.

· After the opening tag comes the anchor, the text that the user clicks to tell the browser to execute the link. The anchor is not in quotes.

· The closing tag ends it.

If you’re linking to a page on the same website, in the same folder, all you need is the page name:

<a href="products.html">Our products</a>

If it’s on the same website but in a subdirectory, you add the subdirectory name. In the following code, the file is in the catalog subdirectory.

<a href="catalog/products.html">Our products</a>

In your HTML file code a link to Stack Overflow at http://www.stackoverflow.com". Save the file and display the page. Click the link.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-29-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/29.html