special links n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Special Links PowerPoint Presentation
Download Presentation
Special Links

Loading in 2 Seconds...

play fullscreen
1 / 10

Special Links - PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Special Links' - idania


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
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
Objectives
  • The Student will:
    • Be able to set up a jump-to link and code an email link.
special links1
Special Links
  • In this lesson you create two types of links that make web surfing even more convenient:
    • jump-to link
    • email link.
jump to links
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 links1
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.
jump to links2
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=
email links
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
summary
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
rest of today before you do your homework
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:
rest of today
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.