Linking in HTML

1
Linking in HTML

• Guthrie

2
Today

• Absolute Relative Hyperlinks
• Targeting
• Named Anchors
• Linking to a location within a different page
• Other File Types
• Linking to Email
• Changing the Base
• Structure of a Web Site

3
Link to Another Site
Web site address/location

• To a site
• lta hrefhttp//www.amazon.com/gt
• Ruths Link to Amazon Bookslt/agt
• To another page
• lta hrefhttp//www.shasta.com/jim/star_report.htm
  gt
• Buy the video as an Xmas present for someone!lt/agt

anchor
text that will be highlighted for the link
close anchor
File location at web site
4
Trailing /

• Use a trailing /, its faster.
• From Tutorial
• Always add a trailing slash to subfolder
  references. If you link like this
  href"http//www.w3schools.com/tutorials", you
  will generate two HTTP requests to the server,
  because the server will add a slash to the
  address and create a new request like this
  href"http//www.w3schools.com/tutorials/"

5
Absolute and Relative Paths

• With an absolute path hyperlink, the entire
  address is listed
• lta hrefhttp//www.monsterboard.com/gtmonster
  boardlt/agt
• With a relative path, the address is shown as a
  navigation down or up the file structure
• lta hrefdirectory/filename.htmgtGolt/agt
• lta href/superdirectory/filename.htmgtGo Uplt/agt

6
Targeting directing the link

• Targeting
• lta hrefurl target_blankgttextlt/agt
• lta hrefhttp//www.coke.com target_blankgtCokelt/agt
  
• lta hrefquizes/quiz1.htm target_blankgtTake
  Quiz 1lt/agt
• lta hrefgradesheet.xls target_blankgtGradeslt/agt

7
Other Target Values

• Default opens in the same browser window
• _self opens in the same browser window
• _blank - opens a new browser window
• _top Used in Frames to go to the top Frame
• new, target opens in a named windowkeeps you
  from propagating several windows. You name the
  target. Widely used in Frames

8
Links Within A Page/Anchor/Named Anchor

• Upper Menu/Contents/Button lta hrefmiddleofpage
  gtskip forwardlt/agt
• Lower Link/Destination
• lta namemiddleofpagegtlt/agt
• If the named anchor is missing link will default
  to the top. You can use this to make it easy for
  a user to return to the top of the page.

text must be identical
9
Links Within a Page (Example)
lta hrefintrodutiongtIntroductionlt/agt lta
hrefmotivationgtWhy We Did This
Projectlt/agt lta hreffuturegtFuture
Planslt/agt lta nameintroductiongtlt/agtlth1gtIntrodu
ctionlt/h1gt ltpgtThe purpose of this. lta
namemotivationgtlt/agtlth1gtWhy We Did This
Projectlt/h1gtltpgtOur interest in this topic is
from lta namefuturegtlt/agt lth1gtThe
Futurelt/h1gtltpgtIn the future, we plan
to. lt/bodygt lt/htmlgt
10
Linking to a different location in Another Page

• Same idea as named anchor but add the URL
• lta hreffileidgtLink Within Other Pagelt/agtwhen
  that anchor is in the other page.
• lta hrefhttp//www.soni.com/play.htmgametipsgtGam
  e Tipslt/agt

11
Other Types of Files

• Files - use your links the same way
• .wav, .au, .jpg, .gif, .mov, .ppt, .doc, .mpeg
• To Auto Load a Power Point Presentation
• lta hrefpresentations/internetgambling.pptgt
• You Bet Your URLlt/agt

12
Mailto

• lta hrefmailtoraguthrie_at_csupomona.edugt
• Guthrielt/agt

13
Changing the Base

• Sets the default path name (base path name) so
  within your document, you do not need to specify.
  
• It will add it to the beginning of all your links
  in the document.
• ltbase hrefpath /gt
• Useful in maintenance if files are moved to a new
  folder.

14
Web Site Structure

• Linear Like Chapters in a Book
• Hierarchical Like folders for each of your
  different courses
• Mixed
• You need a structure to make your site
  understandable/maintainable.
• This is really important if you have many files.
• Put all your images in an images subfolder.
• Look at a major Web site you can see the
  structure in the links

15
Examples

• Link to a company
• lta hrefhttp//www.microsoft.com/gt
• Bill Gates Companylt/agt
• Link to a subfolder (subdirectory) on a website
• lta hrefhttp//www.microsoft.com/usability/gt
• Usability at Microsoftlt/agt

16
Examples

• Link to a student site at Cal Poly
• lta hrefhttp//www.csupomona.edu/raguthriegt
• Guthrielt/agt
• Note index.html is the default
• Link to a file on a students account
• lta hrefhttp//www.csupomona.edu/mvsetiawan/home.
  htmgtMeta Setiawans Home Pagelt/agt

17
Examples
home
skills.htm
self
resume.htm

• Link your home page to your resume in a sub
  folder named self.
• lta hrefself/resume.htmgtMy resumelt/agt
• In the folder named self, link the resume to a
  skills file one directory above.
• lta href../skills.htmgtTechnical Skillslt/agt

18
Examples

• Make a picture a link
• lta href"http//www.csupomona.edu"gtltimg
  src"images/benny.jpg" border"0"gtlt/agt
• Link a picture from an outside source
• lta href"http//www.csupomona.edu"gtltimg
  srchttp//www.csupomona.edu/images3.0/broncodire
  ct_icon_left.gif" border"0"gtlt/agt