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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 HTML 5 and CSS 3 – Illustrated Complete 19 Code containing anchor values and links to anchors

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

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

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

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

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 26