Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hyperlink

197 views

Published on

Hyperlink

Published in: Education
  • Login to see the comments

Hyperlink

  1. 1. Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 4: Hyperlinks
  2. 2.  A key feature of the web is hyperlinks.  Allows us to surf the web  There is only one element responsible for creating hyperlinks.  The anchor element <a> Hyperlinks
  3. 3.  The anchor element specifies the enclosed content is a hyperlink.  Browsers render the content of hyperlink elements as underlined text.  The href attribute specifies the URL of the page to which the user will be linked.  In this example - http://www.wwf.org/ The Anchor Element <p>The <a href="http://www.wwf.org/">World Wide Fund for Nature (WWF)</a> is an international organisation concerned with conservation of the natural world.</p>
  4. 4. • The ‘address’ of a resource and how it can be retrieved Specifies the location of document on the web to which we want to create a link • There are two type of URLs Absolute Relative Uniform Resource Locators (URLs)
  5. 5.  Protocol name  The mechanism for accessing the resource - http  Domain name  The name of the web server where the web page is stored - www.nhm.ac.uk Absolute URLs - 1 http://www.nhm.ac.uk/about-us/index.html protocol domain path
  6. 6.  Pathname  Specifies the location of the page on the server – about-us/index.html  Absolute URLs are used when linking to web pages in a separate website.  External hyperlinks  A website on a different web server Absolute URLs - 2
  7. 7.  Relative URLs describe the location of a document relative to the current document’s location.  Relative URLs are when linking pages together in the same site.  Internal hyperlinks  In your assessment, you will be expected to link pages together using relative URLs. Relative URLs - 1
  8. 8.  A hyperlink in the page culture.html that links to the page locations.html would look like Relative URLs - 2 root careers news about index.html benefits.html locations.html culture.html investors financial.html annual_reports.html press.html media.html contact_us.html our_values.html <a href="locations.html">locations</a>
  9. 9.  A hyperlink in the page contact_us.html that links to the page financial.html would look like Relative URLs - 3 root careers news about index.html benefits.html locations.html culture.html investors financial.html annual_reports.html press.html media.html contact_us.html our_values.html <a href="investors/financial.html">financial</a>
  10. 10.  A hyperlink in the page media.html that links to the page index.html would look like Relative URLs - 4 root careers news about index.html benefits.html locations.html culture.html investors financial.html annual_reports.html press.html media.html contact_us.html our_values.html <a href="../index.html">Home</a>
  11. 11.  A hyperlink in the page benefits.html that links to the page press.html would look like Relative URLs - 5 root careers news about index.html benefits.html locations.html culture.html investors financial.html annual_reports.html press.html media.html contact_us.html our_values.html <a href="../news/press.html">Press Releases</a>
  12. 12.  Do not use spaces in file names or special characters (e.g. ?,#, /).  Use letters, numbers, underscores (_) and hyphens (-)  Consistently use the same filename extension.  HTML pages can have an extension of .htm or .html.  Use all lowercase letters.  Some web servers are case-sensitive. File Naming Conventions - 1
  13. 13.  Keep filenames short.  Easier to remember  Place related files into subdirectories.  Keeps the site organised.  Name the homepage index.html (or index.htm).  Most web servers are configured to serve a file named index.html as the default page for a directory. File Naming Conventions - 2
  14. 14. • It is also possible to link to a different point in the same document.  The user does not have to scroll to view content. • The destination element needs to feature an id attribute.  The id attribute uniquely identifies an element. ‘In-Page’ Hyperlinks - 1 <h2 id="sales">Sales and Marketing</h2> <p>The importance of sales and marketing to for new businesses is extremely important...
  15. 15.  To link to this part of the page, the href attribute is the value of the id attribute preceded by a hash (#).  We can link to a specific point in a separate page by adding a hash mark at the end of the URL. ‘In-Page’ Hyperlinks - 2 <h2 id="sales">Sales and Marketing</h2> <p>The importance of sales and marketing for new businesses is extremely important... <a href="#sales">Sales and Marketing</a> <a href="business_advice.html#sales">Sales and Marketing</a>
  16. 16.  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.  Should be used to provide additional information  Important information should not be hidden in a title attribute. The Title Attribute <a href="../news/press.html" title="Read our press releases">Press Releases</a>
  17. 17.  The XHTML 1.0 Strict specification defines the <a> element as being an inline element  Must be nested inside a block level element  In HTML 5, links can be wrapped around block level elements. Hyperlinks and Valid Documents ... just contact us.</p> <a href="contact.html">Contact Us</a> <h2>Further Information</h2> … …<p> <a href="contact.html">Contact Us</a> </p>… Invalid Valid
  18. 18.  It is common to structure a collection of hyperlinks as a list.  Each link is nested inside a <li> element. Hyperlinks and List Elements <ul> <li><a href="careers.html">Careers</a></li> <li><a href="news.html">News</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact Us</a></li> </ul>
  19. 19. • HTML 5 introduces a new <nav> element for grouping together hyperlinks.  For grouping major navigation blocks  Provide assistance to screen readers The HTML 5 <nav> Element <nav> <ul> <li><a href="careers.html">Careers</a></li> <li><a href="news.html">News</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav>
  20. 20.  A pseudo-class is used to define a special state of an element.  CSS pseudo-classes allow us to select elements using factors not present in the HTML of a document.  The :visited, :hover and :active pseuedo-classes allow us to style hyperlinks based on the state of the hyperlink.  :visited – the user has followed this link  :hover – the cursor is over the link  :active – when the link is being activated (clicked) CSS for Hyperlinks - 1
  21. 21.  Psuedo-classes are commonly used to create rollover effects for links.  The psuedo-classes must appear in the order specified above in order to work correctly. CSS for Hyperlinks - 2 a{background-color:red} a:visited{background-color:yellow} a:hover{background-color:blue} a:active{background-color:green}
  22. 22.  Many disabled people surf the web using their keyboard rather than the mouse.  Using the Tab and Enter keys  Link text should be understandable out of context  Bad example: ‘click here for more information’  Good example: ‘product information’ Accessibility and Hyperlinks
  23. 23.  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 Skip Links - 1
  24. 24.  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. Skip Links - 2
  25. 25.  The accesskey 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. Access Keys - 1 <a href="careers.html" accesskey="c">Careers</a>
  26. 26. • 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. Access Keys - 2
  27. 27. • 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.  In above tab index tab first jump to About hyperlink. Then move to News and then only other hyperlink who doesn’t have tabindex. Tab Order <ul> <li><a href="careers.html" accesskey="c" >Careers</a></li> <li><a href="news.html" accesskey="n" tabindex="11">News</a></li> <li><a href="about.html" accesskey="a" tabindex="10">About</a></li> <li><a href="contact.html" accesskey="u">Contact Us</a></li> </ul>
  28. 28.  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.  Using numbers  Used consistently can make the site easier to use Mobile Devices and Hyperlinks
  29. 29. References  Chisholm, W. & May, M. (2008). Universal Design for Web Applications: Web Applications That Reach Everyone. O'Reilly Media.  Lawson, B & Sharp, R. (2010). Introducing HTML5. Pearson.  Niederst, J. (2006). Web Design in a Nutshell: A Desktop Quick Reference. O'Reilly Media.
  30. 30.  Good link names, bad link names  Link together all the examples so far  In page links in the CV  Link to favourite websites in CV example  Skip links – find sites that use them; government sites Practical
  31. 31. Topic 4 – Hyperlinks Any Questions?

×