Special Links Web Design – Section 3-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The Student will: The Student will: –Be able to set up a jump-to link and code an link.

Special Links In this lesson you create two types of links that make web surfing even more convenient: In this lesson you create two types of links that make web surfing even more convenient: –jump-to link – link.

Jump-to Links Jump-to links are typically used on very long pages that need links at the top of the page that allow the reader to "jump to" a certain section of the page without scrolling. Jump-to links are typically used on very long pages that need links at the top of the page that allow the reader to "jump to" a certain section of the page without scrolling.

Jump-to Links Particularly useful for some users with disabilities, who need to bypass the navigational links on a page. Particularly useful for some users with disabilities, who need to bypass the navigational links on a page. –For example, suppose a blind user is accessing a website with dozens of navigational links at the top of every page. Since this user is probably navigating using "screen reader" software, they have to listen to all of these navigational links before they get to the main content of the page. Since this happens on every page of the site, a same-page "skip to main content" link will allow these users to bypass the redundant navigation. –These links can also help users who navigate by keyboard rather than mouse (for example, users with mobility impairments), since otherwise they would have to key through all the navigational links before getting to a link in the main body of the document.

Jump-to Links To create a Jump-to link in HTML you must add a named anchor … To create a Jump-to link in HTML you must add a named anchor … –To do that you use an anchor reference: You can now create a jump-to link with another anchor reference: You can now create a jump-to link with another anchor reference: Jump to Label Jump to Label –Note that the name (i.e. Label) has to match exactly the name as it was defined in the name=

Links An link when clicked opens a blank, pre-addressed message for users whose browsers and software support it. An link when clicked opens a blank, pre-addressed message for users whose browsers and software support it. links also use the anchor tag: links also use the anchor tag: me. me. Note: Note: – addresses that are coded this way can be automatically harvested by malicious programs, and will soon thereafter be inundated with spam. For this reasons, including links on websites is no longer a recommended practice

Summary Jump-to links provide a quick and easy way to move around a web page. Jump-to links provide a quick and easy way to move around a web page. links use browser and software to create a blank but addressed . links use browser and software to create a blank but addressed . Both these links are defined by using the anchor tag Both these links are defined by using the anchor tag

Rest of Today Follow the instructions to add a jump-to link to your web page. Follow the instructions to add a jump-to link to your web page. Change your address to an link. Change your address to an link. When complete show me your web page. I have 10 things that I will grade you on. Each is worth 2 points. When complete show me your web page. I have 10 things that I will grade you on. Each is worth 2 points.