Adding Links to Your Website

advertisement
 Shows the entire path to the file, including the scheme, server
name, the complete path, and the file name itself.
 Same idea of stating your full name, street #, street name, city,
state, zip, and country
 The location of the absolute URL itself has no bearing on the
location of the actual file referenced.
 No matter where it is in the webpage, it will look the same from
any server
 An absolute URL - points to another web site (like
href="http://www.example.com/default.htm")
 Uses the http protocol
 http://www.site.com/web/index.html
 http://www.site.com/web/images/image.gif
 Describes the location of the desired file with reference to
the location of the file that contains the URL itself.
 Similar to “giving directions” to a particular address
 As if stating “you are here” identifies the reference point:
Relative to that file’s location on the server.
 Absolute URLs do not care where they are located.
 “In this folder, there is a folder called…”
 A relative URL - points to a file within a web site (like
href="default.htm")
 Using makes it easy to move your pages from a local system
to a server.
href Attribute
 What does “href” stand for?
 Hypertext reference
 What tag is involved with adding the href attribute?
 <a>
 The href should include the = sign and the url should
have quotations that surround it.
 Example:
 <p><a href=“http://google.com”>title you want
shown</a></p>
Some helpful hints to Links
 When using links in your own website, you need a
relative path:
 href=“secondpage.html”
 When going outside of your website, you need an
absolute path:
 href:http://google.com
 Why a link will not work:
 Incorrect path in the href attribute
 Typed incorrectly
Ensuring Your Link will Work
 Be sure your link is spelled correctly and/or your tag
and attribute is in its correct areas.
 Check the path in the attribute
 Best bet:
 Be sure the website is still working
 Copy and paste the link right into your code
 Do not choose a link where the viewer needs to log in
unless you “know” they will already have an account or
you are directing them to create an account.
LINK COLOR
 What is the difference between a link, an active link, and a visited
link color?
 Active links change color (when directed to do so) when a link is being
clicked.
 Visited links change color (when directed to do so) when a link has been
visited.
 Why would you want to change the color of a link?
 The blue default color clashes or blends in with the background
 The active link will let someone know that they are about to click a link
 The visited link will let someone know that is where they have been
before.
LINK COLOR CONTINUED…
 To change all the links on a page to a specific color, where would you put
the new attribute?
 In the body tag


This includes all changes: active link and visited link
They are only separated by a space though defined by their individual
attributes.
 What are the new attributes?
 Link?
link=“…”
 Active Link?
 alink=“…”
 Visited Link?
 vlink=“…”

LINK COLOR CONTINUED
 Why change all links in the page and not individually
different colors?
 Uniformity and not confusing
 To change all links in the page:
<body link=“#008080” alink=“#FF0000” vlink=“#808080>
or
<body link=“teal” alink=“red” vlink=“gray”>
Links Within Your Page
 A new attribute:
 id=

Called an identifier
 How are we going to use it?
 We will be adding a “back to top” link at the bottom of your
webpage.
 Because it is a link, what tags and attribute would we use?


<a> start and end tags
href=
 href= will always have a pound sign that follows within the
quotations of the value
About the ID attribute
 Can be used to identify a particular element
 Can also be used in CSS and JavaScript
 You can add an ID attribute to almost any tag in your
html document
 RESTRICTIONS!
 The value of the id attribute cannot contain spaces and
must be unique on your page


You cannot have 2 elements share the same ID
It is case sensitive You must remain consistent!
Adding the Link
 Always add your identifier within your heading 1 (or
where ever you want the link to go though must have
an element to attach to)
 Should look something like this:
<h1 id=“top”>Some Interesting Information</h1>
 Add your link to the bottom of the page before the
closing of your body
 Be sure to add it to its own paragraph
 Should look something like this:
<p><a href=“#top”>Back to Top</a></p>
Download