Links in XHTML
Download
Report
Transcript Links in XHTML
Links in XHTML
Please use speaker notes for
additional information!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
In original HTML, this would be written as:
<html>
<a name=“top”>. Some browers support id
<head>
<title>Linking within a page</title>
and some support name.
</head>
<body>
Because of support issues, you might
<div><a id="top"></a></div>
consider coding this as:
<h2>Linking within a page</h2>
<p>Four score and seven years ago, our fathers brought
<a id=“top” name=“top”>
forth on this continent a new nation, conceived in
liberty and dedicated to the proposition that all men
are created equal - I think I got the quote right, but...</p>
In the top and details anchors,
<p>Four score and seven years ago, our fathers brought
forth on this continent a new nation, conceived in
notice that there are no words
liberty and dedicated to the proposition that all men
between the <a> and the </a>,
are created equal - I think I got the quote right, but...</p>
This means there is nothing
<p>Four score and seven years ago, our fathers brought
forth on this continent a new nation, conceived in
visible on the page that indicates
liberty and dedicated to the proposition that all men
this is a link to location. In the
are created equal - I think I got the quote right, but...</p>
fulltext example, the words
<div><a id="details"></a></div>
<ul>
Gettysburg Address are between
<li>Delivered by Abraham Lincoln</li>
the <a> and the </a> so the words
<li>Delivered at Gettysburg, Pennsylvania</li>
appear on the page.
<li>Delivered on November 19 ,1863</li>
</ul>
<p><a id="fulltext">Gettysbury Adddress</a><br /><br />
"Fourscore and seven years ago our fathers brought forth on this continent a new nation,
conceived in liberty and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation or any nation so
conceived and so dedicated can long endure. We are met on a great battlefield of that war.
We have come to dedicate a portion of that field as a final resting-place for those who
here gave their lives that that nation might live. It is altogether fitting and proper that
we should do this.
<p>Four score and seven years ago, our fathers brought
forth on this continent a new nation, conceived in
liberty and dedicated to the proposition that all men
are created equal - I think I got the quote right, but...</p>
<p><a href="#top">Go to the top</a><br />
<a href="#details">Go to the details</a><br />
<a href="#fulltext">Go to the full text</a></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Linking to another page</title>
</head>
<body>
<h1>Linking using a href</h1>
<p>When you link to another page you need to give the name of the page and the unless the
page is located in the same directory, you need to give the address of the page that you
are going to bring up as the new page. If the page is on your hard drive, you use hard
drive addresses. If the page is out on the web, you use web addresses. If the page is
at a totally different web site, you should use the complete address starting with http.</p>
<p>Link to another page in the same directory</p>
<p><a href="linkwithinpageid.html">Link to linkwithinpageid.html</a></p>
<p>Link to an anchor spot within another page - still in same directory</p>
<p><a href="linkwithinpageid.html#fulltext">Link to fulltext within linkwithinpageid.html</a>
</p>
<p>Link to a different web site - in this case the BCC web site</p>
<p><a href="http://www.bristol.mass.edu">Link to BCC</a></p>
</body>
</html>
When you are linking to an anchor within a page
as opposed to the top of the page, you use the
#followed by the id or name assigned to the
anchor.
This is where I am having problems. This is the color for visited.
This illustrates hover.
This illustrates active.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Linking to another page</title>
<style type="text/css">
a:visited {color:green;}
a:link {color:yellow;}
a:active {color:blue;}
a:hover {color:red;}
</style>
</head>
<body>
<h1>Linking using a href</h1>
<p>Link establishes the color of the link before it is activated, vlink establishes the color
of the link after it has been visited and alink establishes the color of the link while it is
active - a quick change in the color when the link is clicked.</p>
<p>When you link to another page you need to give the name of the page and the unless the
page is located in the same directory, you need to give the address of the page that you
are going to bring up as the new page. If the page is on your hard drive, you use hard
drive addresses. If the page is out on the web, you use web addresses. If the page is
at a totally different web site, you should use the complete address starting with http.</p>
<p>Link to another page in the same directory</p>
<p><a href="linkwithinpageid.html">Link to linkwithinpageid.html</a></p>
<p>Link to an anchor spot within another page - still in same directory</p>
<p><a href="linkwithinpageid.html#fulltext">Link to fulltext within linkwithinpageid.html</a>
</p>
<p>Link to a different web site - in this case the BCC web site</p>
<p><a href="http://www.bristol.mass.edu">Link to BCC</a></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Linking to another page</title>
</head>
<body bgcolor="beige" text="purple" link="yellow" vlink="green" alink="orange">
<h1>Linking using a href</h1>
<p>Link establishes the color of the link before it is activated, vlink establishes the color
of the link after it has been visited and alink establishes the color of the link while it is
active - a quick change in the color when the link is clicked.</p>
<p>When you link to another page you need to give the name of the page and the unless the
page is located in the same directory, you need to give the address of the page that you
are going to bring up as the new page. If the page is on your hard drive, you use hard
drive addressess. If the page is out on the web, you use web addresses. If the page is
at a totally different web site, you should use the complete address starting with http.</p>
<p>Link to another page in the same directory</p>
<p><a href="linkwithinpageid.html">Link to linkwithinpageid.html</a></p>
<p>Link to an anchor spot within another page - still in same directory</p>
<p><a href="linkwithinpageid.html#fulltext">Link to fulltext within linkwithinpageid.html</a>
</p>
<p>Link to a different web site - in this case the BCC web site</p>
<p><a href="http://www.bristol.mass.edu">Link to BCC</a></p>
</body>
</html>