HYPERLINKS
-
Link to a page at another site
-
<a href = "http://www.google.com">Link to Google</a>
-
Link to another page on your site
-
<a href = "otherpage.htm">Description of link</a>
-
Use relative paths
-
If target file is in a child folder relative to your page then use href =
"path/filename.htm"
-
If target file is in a parent folder relative to your page then use ../
in path to go up one level
-
Navigation Example
-
Link to an anchor on your page
-
Create an anchor (location) on your page using <a
name="anchorname"></a>
-
<a href = "#anchorname">Go to other place on page</a> will direct
user to the anchor
LINK ATTRIBUTES
-
Target attribute opens link in window
-
<a href = "targetFile.htm" target = "_blank">Open File in
Window</a>
-
If target = "_blank", the link will open in a new window.
-
If target ="XXX", the link will open in the window called XXX. If window XXX is
not open, a new window will open
-
Can set the link color in the body tag using the following
attributes:
-
link =
"color" - sets the link color
-
vlink = "color" - sets the color of links already visited
-
alink = "color" - sets the color of the active link
EXAMPLE
PRACTICE
1. Experiment with the example above:
-
Change the link colors.
-
Change the links so that all pages open in a window called "newWin"
-
This page is in a folder named webdesign. The webdesign folder
is located in the same folder as the index page (index.htm) for
bigbadbrain. Create a link to index.htm.
-
A folder called western is in the same folder as webdesign.
In the western folder is a page called post.htm. Create a
link to post.htm.
2. Create a page to demonstrate links and file navigation.
First create three FOLDERS: parent, you, child.
The you folder should be in the parent folder. The
child folder should be in the you folder. Then create
one html file in the parent folder, two html files in the you
folder, and one html file in the child folder. Add something to
each page. Keep the pages simple. The purpose of this exercise is to
practice linking pages. In one of the pages in the you folder
add links to the other three pages.
3. Create a page to demonstrate how you can link from one spot on
the page to another spot. Add some text to the bottom of the page. You
may need to use a bunch of <br> tags to force the text to be at the
bottom. Then create an anchor at this text and a hyperlink at the top of the
page to the text.
4. Complete the Exercise
here. What code is used to make this link open in a new window?
5. Experiment with Web Design Tool.
-
How can you add hyperlinks? Notice that several places provide options for
adding them.
-
Create an anchor on a page and then a link to the anchor from the top of the
page.
-
Add 3 hyperlinks to a page.
-
One should be to another website.
-
One should open in a new window.
-
One should be to a page in your website.
-
Where are link colors changed?
-
How do you create an email link? Create one and check out the code.
SELF-QUIZ
Consider the following folder structure with files. The folders
are yellow. Write the appropriate href attributes.
main
index.htm
web101
default.htm
layout.htm
html
links.htm
images
types.htm