Linking in XHTML

1
Linking in (X)HTML

• Guthrie
• Winter 06

2
Outline

• Web Addressing
• Simple Links
• Absolute Relative Hyperlinks
• Targeting
• Named Anchors
• Other File Types
• Linking to Email
• Changing the Base
• Structure of a Web Site

3
Anatomy of a URL
Protocol

• http//www.csupomona.edu/index.htm
• url uniform resource locator
• http hypertext transfer protocol

Domain name extension
Web server/Host Name
filename
4
Domain Name Extension

• .edu
• .com
• .mil
• .gov
• .org
• .net
• .int

5
Other Domain Name Extensions

• Country extension (.fr, .zw, .us, .tv, etc.)
• Foreign Country domain name extensions (IANA
  Internet Assigned Numbers Authority)
  
• Generic Top Level Domains - IANA
• Info
• Biz
• .jobs, .travel, .coop and more
• .tv what is that? Yes. It is a country code for
  Tuvalu.

6
IP Number

• What is My IP?
• http//www.whatismyip.com
• Host Name to IP Address (Arul Johns Utilities
  Site)
  
• Coke.com 129.33.95.163
• So, type http//129.33.95.163 into the browser
  and you will reach the coke site.
  
• Registering a Domain name
• Dotster.com
• Register.com

7
Link to Another Site
Web site address/location

• To a site
• Ruths Link to Amazon Books
• To another page
• 
  
• Buy the video as an Xmas present for someone!

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

• Use a trailing /, its faster.
• 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/"

9
Absolute and Relative Paths

• With an absolute path hyperlink, the entire
  address is listed
  
• monster
  board
  
• With a relative path, the address is shown as a
  navigation down or up the file structure
  
• Go
• Go Up

10
Targeting directing the link

• Targeting
• text
• Cokea
  
• Take
  Quiz 1
  
• Grades

11
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

12
What is a Named Anchor

• List or menu on top of a page that lets you link
  directly to a location further down on the same
  page.
  
• Ex. List of baby names. Clicking on the letter
  B Names in the menu takes you to Barbie, Bart,
  Benny etc.

13
Links Within A Page/Anchor/Named Anchor

• Menu at the top of the pageA
  Names B Names
  etc.
  
• Lower Link/Destination
• A Names
• anames is the keyword you set. It needs to be
  the same in both places.
  
• top creates a link to the
  top of the page
  

text must be identical
14
Creating a hyperlink to a named anchor in another
page

• http//www.movies.com/rentals/thrillers.htmtheri
  ng
  
• http//www.babies.com/names.htmmnames

15
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
• You Bet Your URL

16
Mailto

• Guthrie

17
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

18
Examples

• You can find this sometimes by looking at a
  sitemap.
  
• Typically a hierarchical structure showing you
  where things are located.
  
• If your building or maintaining a site, the map
  is invaluable for figuring out where things go.
  If you do this right, you will not waste time
  relinking pages.

19
Site Map papex.it
20
Generic Site Map
21
Examples

• Link to a student site at Cal Poly
• Guthrie
• Note index.html is the default
• Link to a file on a students account
• .htmMeta Setiawans Home Page
  

22
Examples
home
skills.htm
self
resume.htm

• Link your home page to your resume in a sub
  folder named self.
  
• My resume
• In the folder named self, link the resume to a
  skills file one directory above.
  
• Technical Skills

23
Examples

• Make a picture a link
• If I leave out border0 a blue line will appear
  around the image.
  

24
Summary

• Web Addressing
• Linking
• Absolute
• Relative
• Named Anchor
• Email
• Site Structure
• Organize for maintainability
• Plan before you begin