Adding Links Learning Web Design: Chapter 6

Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to other pages on the Web Internal links with the anchor tag More on URLs

The Anchor Tag The anchor tag or element is used to create links The hypertext reference or href attribute is used to give the address of the page The text that appears between the opening and closing tags is called hypertext The default style of anchors is underlined blue text Linked images have a blue border Visited links are purple

The Anatomy of an Anchor Opening tag Hypertext This text usually appears as blue underlined text in the browser The closing tag: Go back to Menu

Common Problems with Links Web servers are usually case sensitive: Make sure you have spelled the filename and pathname correctly, including the correct case Be sure to use correct nesting of tags Inner tag is always closed before outer tag Correct: … Incorrect: …

Linking Using Pathnames Definition: Local Pages are those on your own computer or server You usually have control of these pages Definition: External Pages are those outside of your Web site You usually do not have control over these pages Links to files whose position is given in relation to the current file need a Relative URL Links to files whose position is given depending their absolute location on the system need an Absolute URL

Linking to Pages on the Web Refer to other pages on the Internet by using the complete Absolute URL These pages not located on your local machine are called external pages Use as part of the URL Some examples: href=“ href=“

Various Kinds of URL Protocols HTTP- points to remote documents on the Web href= “ Non-Anonymous FTP- needs username and password Anonymous FTP- point to files on FTP servers href=“ftp://cseftp.tc.uvu.edu/barthoki/pages/index.htm” Mailto- used to send if browser supports it: href=“mailto:

Linking Within Your Own Site Most linking you will do will be to resources within your own Web site using a Relative URL Without a protocol like in the pathname: the browser will begin looking in the current directory for the file The forward slash / is used to separate directories and filenames

Linking Within a Directory The most often used Relative URL is to another file in the same directory as your page If no path is given, just the filename, the server just looks in the current directory Example: About Us

Linking Within a Directory Cake.jpg GoodEats Images / about.htm Recipes / oatmeal.htmsalmon.htm Toast.jpg index.htm jello.htmcupcakes.htm Dessert / About Us

Linking to a Lower Directory If page is stored in a subdirectory of the current directory, you must provide the pathname as well as the filename Use the forward slash / to separate the subdirectory name(s) from the filename Example: Salmon

Linking to a Lower Directory Cake.jpg GoodEats Images / about.htm Recipes / oatmeal.htm salmon.htm Toast.jpg index.htm jello.htmcupcakes.htm Dessert / Salmon

Linking Two Directories Down Cake.jpg GoodEats Images / about.htm Recipes / oatmeal.htmsalmon.htm Toast.jpg index.htm jello.htm cupcakes.htm Dessert / Green Jello

Linking to a Higher Directory This pathname might include directions to go up directory level(s) to get to the file needed Use two dots and a / to refer to the directory above the current one:../ For each directory level upward, add another../ Example: Home

Linking to a Higher Directory Cake.jpg GoodEats Images / about.htm Recipes / oatmeal.htmsalmon.htm Toast.jpg index.htm jello.htmcupcakes.htm Dessert / Home Dessert Recipes GoodEats

Linking Upward Two Directories Cake.jpg GoodEats Images / about.htm Recipes / oatmeal.htmsalmon.htm Toast.jpg index.htm jello.htmcupcakes.htm Dessert / Home Dessert Recipes GoodEats

Relative Pathname Examples Examples of relative pathnames: href=“files/morefiles/file.htm” move down two directories href=“../file.htm” move up one directory href-“../../file.htm” move up two directories

Site Root Relative Pathnames The root directory is the directory that contains all the files and subdirectories for a Web site The root directory path starts with the root and lists the subdirectories until the file is reached Don’t list the name of the root directory, just use the / to start the pathname Example: Salmon

Site Root Relative Linking Cake.jpg GoodEats Images / about.htm Recipes / oatmeal.htm salmon.htm Toast.jpg index.htm jello.htmcupcakes.htm Dessert / Salmon

Linking to a Point on a Page You can create links to different locations internally within a document These links allow the user to jump to various places within the document, not just to the top of the page Sometimes called “linking to a fragment”

Naming the Link Destination Use the id attribute to flag a destination point for a link The id must be unique within the document The id value can have no spaces in it and must begin with a letter or underscore Example: IS&T Department

Linking to the Destination With the identifier (id) in place, you must then create a link to it Use tag with the href attribute to provide the location To signal you are linking to a fragment, use the hash symbol (#) before the fragment name The also requires some hypertext for the user to click Linking: Main Heading

Page: letterB.html Names that begin with B before Byrd Byrd, William, Names that begin with B after Byrd More stuff Return to: Byrd, William Using Anchors to Jump Within the Same Page

Linking to a Fragment on Another Page You can link to another page by identifying a fragment on the destination page Use the id attribute to name the fragment When linking to the fragment from one page: Add the # and the fragment name to the end of the URL of the other page

Names that begin with B before Byrd Byrd, William, Names that begin with B after Byrd See Also Byrd, Gibbons, Lassus Using Anchors to Jump into a Second Page Page: index.htm Page: letterB.htm

Targeting a New Window If you have a goal to keep people at your site even when they click an external link… Then open the external page in a new window Use the target attribute with the _blank value UVU

Lesson Summary Links are created with the anchor tag href attribute is used to give filename for link id attribute is used to create link fragments You can jump to a link fragment within the same document or in another document Use the target attribute to determine if a new window opens with the link or the same window is used URLs can be used to point to many different kinds of information on the Internet