Date post: | 13-Jan-2016 |
Category: |
Documents |
Upload: | rhoda-harrington |
View: | 217 times |
Download: | 0 times |
Adding Links
Learning Web Design:Chapter 6
Lesson Overview Using the anchor tag <a> 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 <a> The anchor tag or <a> 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
<a href=“filename”> Hypertext
This text usually appears as blue underlined text in the browser
The closing tag:</a>
<a href = “menu.htm”>Go back to Menu</a>
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: <p><a>…</a></p> Incorrect: <p><a>…</p></a>
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 http:// as part of the URL Some examples:
href=“http://yoda.tc.uvu.edu/barthoki/index.htm”
href=“http://www.author.edu/myfiles/index.htm”
Various Kinds of URL Protocols
HTTP- points to remote documents on the Web href= “http://yoda.tc.uvu.edu/barthoki/index.htm” Non-Anonymous FTP- needs username and
password href=“ftp://username:[email protected]/index.htm” Anonymous FTP- point to files on FTP servers href=“ftp://cseftp.tc.uvu.edu/barthoki/pages/index.htm” Mailto- used to send email if browser supports it: href=“mailto: [email protected]”
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 http:// 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: <a href=“about.htm” >About Us</a>
Linking Within a Directory
Cake.jpg
GoodEats
Images/
about.htm
Recipes/
oatmeal.htm salmon.htmToast.jpg
index.htm
jello.htm cupcakes.htm
Dessert/
<a href=“about.htm” >About Us</a>
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: <a href=“Recipes/salmon.htm” >Salmon</a>
Linking to a Lower Directory
Cake.jpg
GoodEats
Images/
about.htm
Recipes/
oatmeal.htm salmon.htmToast.jpg
index.htm
jello.htm cupcakes.htm
Dessert/
<a href=“Recipes/salmon.htm” >Salmon</a>
Linking Two Directories Down
Cake.jpg
GoodEats
Images/
about.htm
Recipes/
oatmeal.htm salmon.htmToast.jpg
index.htm
jello.htm cupcakes.htm
Dessert/
<a href=“Recipes/Dessert/jello.htm” > Green Jello</a>
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: <a href=“../index.htm” >Home</a>
Linking to aHigher Directory
Cake.jpg
GoodEats
Images/
about.htm
Recipes/
oatmeal.htm salmon.htmToast.jpg
index.htm
jello.htm cupcakes.htm
Dessert/
<a href=“../index.htm” >Home</a>
Dessert
Recipes
GoodEats
Linking Upward Two Directories
Cake.jpg
GoodEats
Images/
about.htm
Recipes/
oatmeal.htm salmon.htmToast.jpg
index.htm
jello.htmcupcakes.htm
Dessert/
<a href=“../../index.htm” >Home</a>
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:
<a href=“/Recipes/salmon.htm” >Salmon</a>
Site Root Relative Linking
Cake.jpg
GoodEats
Images/
about.htm
Recipes/
oatmeal.htm salmon.htmToast.jpg
index.htm
jello.htm cupcakes.htm
Dessert/
<a href=“/Recipes/salmon.htm” >Salmon</a>
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:<h1 id=“MainHeading”>IS&T Department</h1>
Linking to the Destination With the identifier (id) in place, you
must then create a link to it Use <a> 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 <a> also requires some hypertext for the user to click
<p>Linking: <a href=“#MainHeading”>Main Heading</a></p>
Page: letterB.html
<p> Names that begin with B before Byrd</p>
<h2 id=“byrd”>Byrd, William, 1543-1623</h2>
<p> Names that begin with B after Byrd </p>
<p> More stuff </p>
<p><em>Return to:</em>
<! Link to the named anchor above -- >
<a href=“#byrd” >Byrd, William</a></p>
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
<p> Names that begin with B before Byrd</p>
<h2 id=“byrd” >Byrd, William, 1543-1623</h2>
<p> Names that begin with B after Byrd </p>
<p><em>See Also</em>
<! Link to the fragment, byrd, in document letterB -- >
<a href=“letterB.htm#byrd” >Byrd</a>, Gibbons, Lassus</p>
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 <a href=“http://uvu.edu/index.htm”
target=“_blank”>UVU</a>
Lesson Summary Links are created with the anchor <a> 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