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:email@example.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