1 / 10

Special Links

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: Be able to set up a jump-to link and code an email link. Special Links.

idania
Download Presentation

Special 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. 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

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

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

  4. 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.

  5. Jump-to Links • 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.

  6. Jump-to Links • To create a Jump-to link in HTML you must add a named anchor … • To do that you use an anchor <a> reference: <a name=“Label" /> Or you give a id to a div section <div id=“Label"> • You can now create a jump-to link with another anchor reference: <a href="#Label">Jump to Label</a> • Note that the name (i.e. Label) has to match exactly the name as it was defined in the name=

  7. Email Links • An email link when clicked opens a blank, pre-addressed email message for users whose browsers and email software support it. • Email links also use the anchor tag: <a href="mailto:you@cps.edu">Email me.</a> • Note: • Email 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 email links on websites is no longer a recommended practice

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

  9. Rest of Today – Before you do your homework • You should have a <div> before your “<h2>Unit 2</h2>” • Move that <div> before the paragraph right above Unit 2:

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

More Related