CHAPTER 6 ADDING LINKS

IN THIS CHAPTER

Making links to external pages

Making relative links to documents on your own server

Linking to a specific point in a page

Adding “mailto” links

Targeting new windows

If you’re creating a page for the Web, chances are you’ll want it to point to other web pages, whether to another section of your own site or to someone else’s. You can even link to another spot on the same page. Linking, after all, is what the Web is all about. In this chapter, we’ll look at the markup that makes links work: to other sites, to your own site, and within a page.

If you’ve used the Web at all, you should be familiar with the highlighted text and graphics that indicate “click here.”  There is one element that makes linking possible: the anchor (a).

<a>...</a>

Anchor element (hypertext link)

The content of the anchor element becomes the hypertext link. Simply wrap a selection of text in opening and closing <a>...</a> tags and use the href attribute to provide the URL of the linked page. Here is an example that creates a link to the O’Reilly Media web site:

<a href="http://www.oreilly.com">Go to O’Reilly.com</a>

To make an image a link, simply put the img element in the anchor element:

<a href="http://www.oreilly.com"><img src="ora.gif" /></a>

The only restriction is that because anchors are inline elements, they may only contain text and other inline elements. You may not put a paragraph, heading, or other block element between anchor tags.

Most browsers display ...

Get Learning Web Design, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.