Adding Links to Your Website - Greene Central School District
Download
Report
Transcript Adding Links to Your Website - Greene Central School District
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>