HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links

1. HTML5 and CSS3 IllustratedUnit E: Inserting and Working with Links

2. Objectives • Understand links • Create relative links • Create absolute links • Style links with CSS pseudo-classes HTML 5 and CSS 3 – Illustrated Complete

3. Objectives (continued) • Open links in new windows or tabs • Link to anchors • Create a link to a document • Increase navigational accessibility HTML 5 and CSS 3 – Illustrated Complete

4. Understanding Links • Hypertext: links in and between text-only documents • Currently can be created on any visible Web page element • Present to users options for more information • a element: encloses text that will serve as a link • Specified by using <a></a> tag pair HTML 5 and CSS 3 – Illustrated Complete

5. Understanding Links (continued) • href attribute: used to specify target document • User agent enables user to interact with link element to open linked document • Colors indicate links and user interactions with links • Color convention uncommon due to CSS customization HTML 5 and CSS 3 – Illustrated Complete

6. Understanding Links (continued) • Navigation bar: set of links for moving between pages in Web site • Possibly more than one per Web page • Uniform Resource Identifier (URI): format for specifying how and where to find a resource on internet • Scheme • Server name • Path HTML 5 and CSS 3 – Illustrated Complete

7. Understanding Links (continued) • Structure of URI and common values of href attribute HTML 5 and CSS 3 – Illustrated Complete

8. Creating Relative Links • Relative link: path and filename information needed to locate the target document from the current Web page • Suitable for use in a nav bar • In nav bar, often separated by pipe (|) symbol • The value of the href attribute only includes relative location information, not server name or scheme HTML 5 and CSS 3 – Illustrated Complete

9. Creating Relative Links (continued) • HTML code with relative links HTML 5 and CSS 3 – Illustrated Complete

10. Creating Absolute Links • Absolute link: full and complete address for the target document • Value for the href attribute is a complete URI of the target Web page • Necessary when creating a link to another Web site, hosted on another server HTML 5 and CSS 3 – Illustrated Complete

11. Creating Absolute Links (continued) • HTML code with absolute links HTML 5 and CSS 3 – Illustrated Complete

12. Styling Links with CSS Pseudo-Classes • Links can be in any of four different states: link, active, hover, and visited • Pseudo-class: categorization of Web page element based on relationship or condition at a given moment • Used to format links depending on the state they are in • Applies to any link in the specified state which is within the selected element(s) HTML 5 and CSS 3 – Illustrated Complete

13. Styling Links with CSS Pseudo-Classes (continued) • Rollover effect: mouse interaction occurring when the user's mouse pointer hovers over a link but does not click on it • a:hover style rule HTML 5 and CSS 3 – Illustrated Complete

14. Styling Links with CSS Pseudo-Classes (continued) HTML 5 and CSS 3 – Illustrated Complete CSS pseudo-classes and code

15. Opening Links in New Windows or Tabs • By default, target Web page opens in the same window and tab as source page • Prevents opening too many windows • In certain situations, you want to leave current page open while opening another page • Use target attribute of a element • Set value to be “_blank” HTML 5 and CSS 3 – Illustrated Complete

16. Opening Links in New Windows or Tabs (continued) • Code including target attribute HTML 5 and CSS 3 – Illustrated Complete

17. Linking to Anchors • Anchors: named locations within the current document • Create links to anchors within the current Web page • Assign unique names to elements using the HTML id attribute • Reference within href attribute by preceding the anchor with a pound sign (#) HTML 5 and CSS 3 – Illustrated Complete

18. Linking to Anchors (continued) • Code containing anchor values and links to anchors HTML 5 and CSS 3 – Illustrated Complete

19. Creating a Link to a Document • Sometimes it is useful to create a link to a document that is not a Web page • e.g., link to school brochure in PDF • Can create link to any type of computer-readable document • Specify the document as the value of the href attribute HTML 5 and CSS 3 – Illustrated Complete

20. Creating a Link to a Document (continued) • Code for creating link to a PDF document HTML 5 and CSS 3 – Illustrated Complete

21. Increasing Navigational Accessibility • Nav bars sometimes present accessibility challenges • Using screen readers • Possible solutions: • Skip link: anchor to main page content • Allows skipping nav bar • nav element: semantic element surrounding nav bar • Allows screen reader to distinguish nav bar • May need to be included as a script HTML 5 and CSS 3 – Illustrated Complete

22. Increasing Navigational Accessibility (continued) • Code for skip link HTML 5 and CSS 3 – Illustrated Complete

23. Summary • Hypertext provides links in and between documents • Links are defined using the a element • href attribute specifies location of target document • A navigation bar is a set of links for moving between Web pages • Absolute link: complete address of target document HTML 5 and CSS 3 – Illustrated Complete

24. Summary (continued) • Relative link: path/filename information needed to locate target document • Pseudo-class: categorization of web page elements based on temporary condition • Used to format links with CSS • Target Web page can be opened in different window or tab using target attribute of the a element HTML 5 and CSS 3 – Illustrated Complete

25. Summary (continued) • Anchors are links to locations in the current Web page • Created using id attribute • id preceded by # in href value • You can create a link to any computer readable document • To increase accessibility, provide users a way to skip or ignore the navigation bar HTML 5 and CSS 3 – Illustrated Complete