Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links."— Presentation transcript:

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 (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 3

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 tag pair HTML 5 and CSS 3 – Illustrated Complete 4

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 5

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 6

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

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 (|) symbolIn 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 8

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

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 10

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

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 12

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 13

14 Styling Links with CSS Pseudo-Classes (continued) HTML 5 and CSS 3 – Illustrated Complete 14 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 15

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

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 17

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

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 19

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

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 barAllows skipping nav bar  nav element: semantic element surrounding nav bar Allows screen reader to distinguish nav barAllows screen reader to distinguish nav bar May need to be included as a scriptMay need to be included as a script HTML 5 and CSS 3 – Illustrated Complete 21

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

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 23

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 24

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 25


Download ppt "HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links."

Similar presentations


Ads by Google