Download presentation
Presentation is loading. Please wait.
Published byNelson Horton Modified over 9 years ago
1
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
2
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:// HTTP – hypertext transfer protocol Web server – the computer hosting a webW site
3
Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Parts of a URL http://www.AgainstTheClock.com/XHTML/contents.htm http:// This is the hypertext protocol Used for transferring web pages across the Internet www.AgainstTheClock.com Domain name of the computer where file is located XHTML A folder containing the file contents.htm The Web file itself
4
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!
5
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
6
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"
7
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
8
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
9
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"
10
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
11
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
12
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
13
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
14
Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Effect of Border Removal a href="faq.htm">
15
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
16
Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Default File Names Sometimes absolute URLs don't need a file name Example: http://www.againsttheclock.com 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)
17
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 email link ftp: File Transfer Protocol Uploading and downloading files; faster than http
18
Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Using the Tag Concepts Problems with relative URLs Global referencing via the tag
19
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
20
Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Using mailto in the href attribute mailto is an alternative protocol href Example Send email here Clicking a mailto link will: Start the computer's default email software Place the specified recipient account in the To: field Limitation If email software is not loaded, the link will not work
21
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.