Topic 04 : Hyperlinks

440 views
351 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
440
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Topic 04 : Hyperlinks

  1. 1. Topic 4 : Hyperlinks Er. Pradip Kharbuja
  2. 2. ▪ The beginning of this slide is incomplete. Please follow the NCC slide for missing section.
  3. 3. ‘In-Page’ Hyperlinks ▪ Demo First • It is also possible to link to a different point in the same document so that user does not have to scroll to view content.
  4. 4. ‘In-Page’ Hyperlinks ▪ We can link to a specific point in a separate page by adding a hash mark at the end of the URL.
  5. 5. The Title Attribute ▪ The title attribute can be used to describe the content that will be linked. ▪ Browsers often display the title as a ‘tooltip’. ▪ The title attribute is not visible by default.
  6. 6. Hyperlinks and Valid Documents ▪ The XHTML 1.0 Strict specification defines the <a> element as being an inline element must be nested inside a block level element. ▪ Demo Invalid Valid
  7. 7. Hyperlinks and List Elements
  8. 8. Hyperlinks Active Visited
  9. 9. CSS for Hyperlinks ▪ CSS psuedo-classes allow us to select elements using factors not present in the HTML of a document. ▪ The :visited, :hover and :active psuedo-classes allow us to style hyperlinks based on the state of the hyperlink. 1. :visited – the user has followed this link 2. :hover – the cursor is over the link 3. :active – when the link is being activated (clicked)
  10. 10. CSS for Hyperlinks ▪ Psuedo-classes are commonly used to create rollover effects for links. ▪ The psuedo-classes must appear in the order specified below in order to work correctly.
  11. 11. Accessibility and Hyperlinks ▪ Many disabled people surf the web using their keyboard rather than the mouse. Using theTab and Enter keys ▪ Link text should be understandable out of context Bad example: ‘click here for more information’ Good example: ‘product information’
  12. 12. Skip Links ▪ http://www.un.org/en/ ▪ Many websites have large navigation bars. – Tabbing through these links for keyboard users can be tedious. ▪ A skip link allows the user to jump directly to the content of the page. – Give a heading element for the content an id attribute – A hyperlink at the very top of the page links directly to this heading element
  13. 13. Skip Links – The user does not have to tab through all the navigation options. ▪ Many sites use CSS to visually hide the skip links. – Screen readers will still read these links out as the first elements on the page.
  14. 14. Access Keys ▪ The access key attribute allows us to associate a specific key with a hyperlink. ▪ Pressing a modifier key and the specified access key will make the browser follow the hyperlink. – In Firefox, the modifier keys are Alt + Shift. – In IE and Chrome, the modifier key is Alt.
  15. 15. Access Keys ▪ Access keys suffer from a number of problems – Different browsers use different modifier keys. – Conflict with browser shortcuts ▪ Access keys often use numbers to avoid this. ▪ How does the user know what the access keys are? – Provide a list of hyperlinks and their access keys. – Use CSS to underline a specific letter in the link text. – Indicate the access key after the hyperlinks.
  16. 16. Tab Order ▪ The tabindex attribute can be used to override the default tabbing order in a browser. ▪ The tabindex attribute also has problems. – Can be confusing for user if their tabbing jumps them in an unexpected order.
  17. 17. Mobile Devices and Hyperlinks ▪ Users with mobile devices often experience similar problems as disabled users. – E.g. navigating through the keypad – Skip links can be useful ▪ Use of access keys is often recommended for sites designed for mobile users.
  18. 18. Practical Approaches ▪ Good link names, bad link names ▪ Link together all the examples so far ▪ In page links in the CV ▪ Link to favorite websites in CV example ▪ Skip links – find sites that use them; government sites
  19. 19. End of Topic 4 Any Questions ???

×