Your SlideShare is downloading. ×
0
Castro Chapter 6
Castro Chapter 6
Castro Chapter 6
Castro Chapter 6
Castro Chapter 6
Castro Chapter 6
Castro Chapter 6
Castro Chapter 6
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Castro Chapter 6

109

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
109
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LINKSHTML5 & CSS Visual Quickstart GuideChapter 6
  • 2. 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
  • 3. 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>
  • 4. 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>
  • 5. 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!
  • 6. 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>
  • 7. 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
  • 8. 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

×