1 / 25

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

HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links. Objectives. Understand links Create relative links Create absolute links Style links with CSS pseudo-classes. Objectives (continued). Open links in new windows or tabs Link to anchors Create a link to a document

deidra
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related