1. HTML5 and CSS3 Illustrated Unit 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 2

3. Objectives 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 3

4. Understanding Links Hypertext: links in and between text-only documents   Currently can be created on any visible Web page element   Gives users options for more information HTML 5 and CSS 3 – Illustrated Complete 4

5. Understanding Links a element: “anchor” tag serves as a hyperlink (“link”) Example: Google href attribute: used to specify target document HTML 5 and CSS 3 – Illustrated Complete 5

6. Understanding Links Navigation bar: set of links for moving between pages in a Web site   Usually at top of page   Sometimes additional links at bottom HTML 5 and CSS 3 – Illustrated Complete 6

7. Understanding Links Uniform Resource Identifier (URI): format for specifying how and where to find an online resource (Also known as a URL)   Scheme   Server name   Path HTML 5 and CSS 3 – Illustrated Complete 7

8. Understanding Links Structure of URI and common values of href attribute HTML 5 and CSS 3 – Illustrated Complete 8

9. 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 9

10. Creating Absolute Links HTML 5 and CSS 3 – Illustrated Complete 10

11. Creating Relative Links Relative link: path and filename are specified   Linked files must be in the same folder The value of the href attribute only includes “relative location information” Does not include server or scheme HTML 5 and CSS 3 – Illustrated Complete 11

12. Creating Relative Links HTML 5 and CSS 3 – Illustrated Complete 12

13. Noticing Links Browser colors indicate links to the user Can use CSS to change colors HTML 5 and CSS 3 – Illustrated Complete 13

14. CSS Pseudo-Classes Links can be in any of four different states:   link   active   hover   visited HTML 5 and CSS 3 – Illustrated Complete 14

15. CSS Pseudo-Classes HTML 5 and CSS 3 – Illustrated Complete 15 Pseudo-class: the “look” of the link at a given state

16. 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

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

18. 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

19. Linking to Anchors HTML 5 and CSS 3 – Illustrated Complete 19 Code containing anchor values and links to anchors

20. Linking to a.pdf Document Sometimes it is useful to create a link to a document that is not a Web page   e.g., link to 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

21. Linking to a.pdf Document HTML 5 and CSS 3 – Illustrated Complete 21 Code for creating link to a PDF document

22. Increasing Navigational Accessibility Nav bars sometimes present accessibility challenges   Users limited in sight use 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

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

24. 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

25. 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

26. 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 26