LINKSHTML5 & CSS Visual Quickstart Guide

Chapter 6

The Anatomy of a Link• A link has 2 main parts

• Destination• Specifies what will happen when visitor triggers/clicks the link

• Go to another page• Jump within the page• Show an image• Download a file

• Label• The part the visitor sees in browser or hears in screen reader• Can be text

• Or image• Or both

• Default: shown underlined and in blue

Creating a Link to Another Page• <a href=“page.html”>Link</a>

• page.html is the URL of the destination web page• Link is the label text, which will be highlighted (usually blue and

underlined)• <a href=“http://www.google.com”>Google</a>

Creating Anchors• These identify specific sections of the same page• Useful for creating a clickable Table of Contents• <h2 id=“anchorname”>Text</a>

• anchor name is the text you will use internally to identify that section of the Web page

• Text is the words or images you wish to be referenced

• <h2 id=“descrip”>Description of the Main Characters</a>

Linking to a Specific Anchor• Once you’ve created an anchor, you can link to it• <a href=“#anchor name”>Link</a>

• anchor name is the value of the name attribute in the destination’s a tag

• Link is the highlighted text• The hash sign (#) is crucial here!

• <a href=“#descrip”>Description of the Main Characters</a>

• If anchor is in a separate document, use <a href=“page.html#anchorname”> to reference• No space between the URL and the #• This means you shouldn’t use spaces in your anchors!

Targeting Links to Specific Windows• By default, link opens in same window• Often useful to open link in a new window or tab• Do this using target=“_blank”• For example:

• <a href=“http://www.google.com” target=“_blank”>Google</a>

Creating Other Kinds of Links• Can also link to files, FTP sites, newsgroups, and even

email addresses• <a href=“http://www.site.com/path/file.ext”>File</a> would link to a non-HTML file

• <a href=“ftp://ftp.site.com/path”>FTP Site</a> would link to an FTP site

• <a href=“mailto:chokeonthis@sillyspambots.com”>Email address</a>

would link to an email address

Creating Keyboard Shortcuts for Links

• Do this using attribute of a tag called accesskey• <a href=“gatetseng.html#woody” accesskey=“w”>Woody</a> (Alt-W, Ctrl-W)

• Some gotchas:• Keyboard shortcuts don’t work in Opera• Unreliable in frames• Don’t override keyboard shortcuts built into the browser—such as

Alt-F for accessing the File menu