Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 4: Creating Hyperlinks Kelly L. Valqui Essentials for Design XHTML

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Visual Summary  Hyperlinks – clickable areas take the viewer to another location  Uniform Resource Locator (URL) – the Web address of a resource  Relative URL – local file or folder  Absolute URL – address on another Web server  Typically begins with  HTTP – hypertext transfer protocol  Web server – the computer hosting a webW site

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Parts of a URL    This is the hypertext protocol  Used for transferring web pages across the Internet   Domain name of the computer where file is located  XHTML  A folder containing the file  contents.htm  The Web file itself

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Using the Anchor tag for Creating Hyperlinks  Text link – a series of words or a URL to access information on a topic  Anchor tag – XHTML tag that allows creation of text links (or other types of links)   Example hyperlink  Click here to go to our home page!

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Anchor Tag's Attributes for Creating Hyperlinks  href (hypertext reference)  Indicates the target – destination page or location of the link  title  Provides text that can appear in a tool tip when the mouse hovers over the link

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Effects of, href, and title Tool tip generated by title="Home Page Link" Displayed text generated by text between the tag and the tag Click here to go to our home page! Mouse pointer changes when hovered over the link When user clicks, the page opened will be based on href="home.htm"

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Creating and Linking to Within- Page Targets  The tag's name attribute  Creates a target at the location of the anchor tag  Commonly used on longer Web pages  Syntax:  link text  The pound (#) symbol in an href attribute  References one of the named anchor tags  Value after the pound sign must be identical to name of an anchor  Syntax:  link text

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Effects of Within-Page Linking This line has Can a duck fly if it's wet? This line has Can a duck fly if it’s wet? Clicking here takes you to the "duck" line

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Using a Special Value #top This line has Back To Top Clicking here takes you to the top of the page (no need for an anchor named "top"

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 How to Turn an Image into a Hyperlink  Place an tag between the and tags  Example:   Image links are often used to provide a graphical navigation layout  You can put any content between and in order to make it a hyperlink

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Effect of Image Hyperlinks Image changed to a link: Note the border and the hand- shaped mouse pointer Image without a link

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Organizing Files  Good Web site design involves planning the file organization  Separate folders should be created for:  Each content section  Assets (images or audio files)  Consistent reference points and standard locations

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Attributes for Border Removal and Link Color Control  tag's border attribute  border = X  sets the border to be X pixels thick  Border = 0 will remove the border from the image  tag's link and ylink attributes  link – for specifying a link color  vlink – for specifying a visited link's color  alink – for specifying a link's color as it is clicked  Image border color  If not a link, default is black  If a link, default is link color of page

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Effect of Border Removal a href="faq.htm">

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Using Absolute and Relative URLs  Absolute URLs include both the domain name and the file name  Domain name – the computer's unique name on the Internet  Relative URLs – include only the file name, not the domain name  Refer to files on the same Web server  Therefore URL refers to the same domain name

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Default File Names  Sometimes absolute URLs don't need a file name  Example:  This has only the protocol (http) and the domain name againsttheclock.com  The file name is assumed. It is a default file name (such as default.htm or index.htm)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Types of URLs  Protocol: a set of rules for communication between programs  Common Internet protocols are:  http: Hypertext Transfer Protocol  Web pages  https: Secure Hypertext Transfer Protocol  Web pages with encrypted messages  file  URL to a file on the local hard drive  mailto  protocol for link  ftp: File Transfer Protocol  Uploading and downloading files; faster than http

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Using the Tag  Concepts  Problems with relative URLs  Global referencing via the tag

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 How the Tag Overcomes Problems with Relative URLs  If a Web page is copied to a local hard drive without copying linked pages or images  Relative URLs will not work, because the linked files are remote  tag indicates the source of all linked references  Browser automatically includes reference to all URLs in the page

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Using mailto in the href attribute  mailto is an alternative protocol href  Example  Send here  Clicking a mailto link will:  Start the computer's default software  Place the specified recipient account in the To: field  Limitation  If software is not loaded, the link will not work

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Links in XHTML 2.0  In XHTML 1.x, href attributes are confined to anchor tags  Example, to make a header with a link requires:  Web Design at About  In XHTML 2.0, any tag can include an href attribute  Example, to make a header with a link:  Web Design at About  No anchor tag necessary