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

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)
CSS pseudo-classes and code
HTML 5 and CSS 3 – Illustrated Complete

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