Html5 and css3 illustrated unit e inserting and working with links
This presentation is the property of its rightful owner.
Sponsored Links
1 / 25

HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links PowerPoint PPT Presentation


  • 118 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html5 and css3 illustrated unit e inserting and working with links

HTML5 and CSS3 IllustratedUnit E: Inserting and Working with Links


Objectives

Objectives

  • Understand links

  • Create relative links

  • Create absolute links

  • Style links with CSS pseudo-classes

HTML 5 and CSS 3 – Illustrated Complete


Objectives continued

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


Understanding links

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


Understanding links continued

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


Understanding links continued1

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


Understanding links continued2

Understanding Links (continued)

  • Structure of URI and common values of href attribute

HTML 5 and CSS 3 – Illustrated Complete


Creating relative links

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


Creating relative links continued

Creating Relative Links (continued)

  • HTML code with relative links

HTML 5 and CSS 3 – Illustrated Complete


Creating absolute links

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


Creating absolute links continued

Creating Absolute Links (continued)

  • HTML code with absolute links

HTML 5 and CSS 3 – Illustrated Complete


Styling links with css pseudo classes

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


Styling links with css pseudo classes continued

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


Styling links with css pseudo classes continued1

Styling Links with CSS Pseudo-Classes (continued)

HTML 5 and CSS 3 – Illustrated Complete

CSS pseudo-classes and code


Opening links in new windows or tabs

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


Opening links in new windows or tabs continued

Opening Links in New Windows or Tabs (continued)

  • Code including target attribute

HTML 5 and CSS 3 – Illustrated Complete


Linking to anchors

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


Linking to anchors continued

Linking to Anchors (continued)

  • Code containing anchor values and links to anchors

HTML 5 and CSS 3 – Illustrated Complete


Creating a link to a document

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


Creating a link to a document continued

Creating a Link to a Document (continued)

  • Code for creating link to a PDF document

HTML 5 and CSS 3 – Illustrated Complete


Increasing navigational accessibility

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


Increasing navigational accessibility continued

Increasing Navigational Accessibility (continued)

  • Code for skip link

HTML 5 and CSS 3 – Illustrated Complete


Summary

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


Summary continued

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


Summary continued1

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


  • Login