Mark Wilson I am the creator of TopXML. I am available for international and local (Australia) contracts. I am a Solution Architect/Business Analyst. I have worked in IT in several countries (NZ, Australia, South Africa, UK) building and training teams for government and very large non-governmental organizations. I am ex-Microsoft Consulting Services. I wrote the first book on Microsoft XML published in 2000 called XML Programming with VB and ASP. Most recently I have been building tools for the SEO industry. Ask me for a 37 point SEO health-checkup for your website.
This is a continuation of the XHTML
Basics series by Scott.
In the last article you got your hands dirty by putting XHTML to
use with the focus on building tables in XHTML. The examples
weren't too difficult but it gave a solid foundation for building and
using tables.
We're going to do the same thing today with
Links. We're going to talk about how to build links and how
they work in XHTML. As was discussed last time, XHTML is HTML 4
with an XML flavor, so as a topic is covered we'll be discussing any
differences between HTML and XHTML.
And for you techies we've
again provided the DTD information on the Anchor element in the
Appendix.
Everywhere we go on the Internet we are directed from one page to
another, either within the same site or another site. This is
commonly called Navigating the Internet. I can view one
page and within that page click on some text or a picture and be
taken to or navigate to another page. This page can either be
within the same site or on another site altogether.
Let's throw out some more terms. The page I'm currently
viewing is called the source page. The page I'm
navigating to is called the destination page. How
this happens is what we are going to talk about today. So how
do we do this? How do you jump or navigate from one page to
another or from one location on a page to another location on the
same page?
Most of you are already versed in the ways of the <a>
element as it is used in HTML but we'll talk about it here from an
XHTML perspective.
The 'a' in the <a> element means anchor. The
information in this element can point to a location within the same
document or a separate document. Let's take a quick look at the
attributes commonly used with the <a> element.
href: this is the only required attribute of the
<a> element for anchors defining a hypertext source link.
It indicates the target link.
id: this attribute is used to specify a unique
identifier to be associated with an element.
name: this is required when the target is located on the
same page.
There are a lot more but these are the most commonly used.
We'll be using these attributes in some of our examples.
Consider, for instance, a sample that takes you from one web page to
another web page. Creating this link is easy - in your favorite
text editor create an anchor tag as follows (using our XHTML template
we covered in our Groundwork
article):
Save that as Links.htm and then make the following changes to it
and save it as Links2.htm.
Now open up Links.htm in IE5. This is what you should
see:
If you click on "Click here to go to page 2", you should get the
following:
Click on "Click here to go back to page 1" and you will return to
the first page.
What did we do?
Using the <a> element along with the href attribute we
created a link on the first page. The destination page resides
on our own site (and in the same directory as the first page) so we
didn't need to specify a path to the second page.
If you are looking at this example and saying "Hey, that's exactly
like HTML", you're right.
You could modify the DOCTYPE statement to reference the HTML DTD
(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">) and
your page would look and behave exactly the same. But by doing
this in XHTML we are guaranteed a well-formed
document.
The href attribute is important because without it (meaning our
anchor statement looked like:
<a>Click here to go to page 2</a> )
our page would like this:
The href attribute tells it where to go when you click on it (the
link). The browser evaluates the href attribute when we click
on the link. The value of the href attribute is read and it
goes and looks for the file and if it finds it, loads and displays
it. We all know what happens if the browser can't find the
file.
There are certain rules we need to follow when using the <a>
element. Let's discuss those now.
You can't nest <a> elements. For example, <a
href=site><a href=site>click
me</a></a>
Inline elements are acceptable in the <a> element, but block
elements are not.
If you are asking what is the difference between block elements
and inline elements, don't fret. We'll be covering that when we
talk about document style in a couple of article from now.
This was an easy example because the two pages were located in the
same directory. What about if the second page is located in a
different directory (still on the same server)? Just as
easy.
Open your Links.htm and make the following modifications:
Now create a new directory called temp in the same folder
where you Links.htm file resides. Copy your Links2.htm file to
this directory and open it up in your text editor. Let's make
the following changes to this file:
Open up Links.htm. It should look exactly like the one
above. I won't show you screen shots here because they look
exactly like the ones above. You will notice however that when
you click on the link it will take you to the Links2.htm in the new
Temp folder you created.
What did we do?
The changes we made to the code are small but the impact is quite
large. In our link on the first page, the browser reads the
anchor line and sees "href=temp\links2.htm". The browser knows
to go to the child folder (called "temp") of the current folder and
find a file called Links2.htm and open it.
On our second page in the "temp" folder, the browser reads the
anchor line and sees "..\Links.htm". This tells the browser to
navigate up one folder from its current folder and find a file called
Links.htm and open it.
You can see the benefit here. We don't have to have all our
files stuffed into a single directory. We can organize our web
pages into separate directories and still be able to open them.
What if the destination page is on a different server? Not
much different from our examples above. The only difference
here is that we need to specify a full internet address in our href
attribute. For example:
Let's open our Links.htm and change it to look like the
following:
Which produces:
What do you think will happen when you click on "Click
here"? You now know what your homework assignment is for this
article. Take the above example and see what results you
get.
What did we do?
We didn't do anything really too different than our previous
example. What we did was specify a full URL address in our href
attribute. That told the browser that our destination page is
on an entirely different server and where on the web it is
located.
Are we done? Not quite. What if we want to jump to a
location within our same page? Yep, you guessed it, the
<a> element. We can use the <a> element as both a
destination AND a source. How, you ask? Well, I'll show
you!
To accomplish this we need to use the other two attributes listed
above, the name and id attributes.
Let's go straight to an example and see it in action then we'll
explain what we did. We'll use my favorite hobby,
Motocross. Open up your text editor and type in the
following:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Riders Ezra Lusk and Sebastien Tortelli will fill the Honda camp
for 2001. Lusk was unjured for most of last year and has
another year to go on his contract. Torelli is Honda's best
chance this year for returning the number one plate to Honda.
He is improving indoors but he shines brilliantly outdoors.
2000 250 Motocross champ Ricky Carmichael returns to the Kawasaki
camp for 2001 while Stephane Roncada joins Carmichael in the Kawasaki
big rig. This will be Roncada's first year on the 250 so it
should be interesting.
David Vuillemin returns to the team Yamaha fold while Team
Chaparral's Team Ferry joins him. The biggest change here is
that Ferry has signed to ride the YZ426. Let's hope Ferry is up
to the challenge. If Vuillemin picks up where he left off last
year then he could be in the bid for the number 1 plate.
The 2000 125 Outdoor champ Travis Pastrana returns to the Suzuki
big rig and has ex-Honda rider Kevin Windham joining him.
Pastrana will start out riding the 250 class and will stay there if
he does well. Windham better hope that this year is better than
his years at Honda.
</p>
<a href="#index">Return to index</a>
</body>
</html>
Save that file as Links5.htm and open it up in IE5. Mine
looked like the following:
Click on any of the anchors on the top and you will automatically
navigate to the appropriate corresponding section in the
document. Click on any "Return to Index" and you'll be taken
back to the top (or the index).
What did we do?
First, we used the # symbol to identify the name or id
where we want to navigate to in the document. In our
destination we used both the name and id to be compatible with older
browsers. Each id attribute in the document must be unique.
How about if our destination is in a separate file? Can it
be done? By now you should know that the answer is yes.
Your second homework assignment for this article is to try that
out.
We'll cover two more quick examples and wrap it up. We'll
quickly cover using images as links, and then the mailto:
link.
First, images. What if we wanted to show an image instead of
the "Click Here" text. For example, we have a link on our page
that took us to theTopXML web site but we wanted to use an
image. We would use the <img> tag to accomplish this.
Now when people clicked on the image, they would be taken to the
TopXML web site (which is where all people should be going anyway,
right?).
Now, the mailto: link. Have you ever clicked on a link and
have your mail client start up with a new message with the To: filled
in? Ever wonder how they did that? It's called
mailto. Here's how it works.
It's probably a good idea at this point to briefly cover links
using other types of protocols. Is the mailto instruction a
protocol? Not really, it's really a way to call up a mail
client to send e-mail. An example of a mail client would be
Microsoft Outlook, Novell Groupwise, or Lotus Notes.
We've talked about linking using the HTTP protocol, but what about
the ftp protocol? The ftp (or File Transfer Protocol) is used
for transferring files over the Internet. It is still used
today as a main transport of files and chances are that you used it
to download something from your favorite web site. Using the
ftp protocol with XHTML is as simple as the following:
<a href=ftp://www.TopXML/downloads/files/accessxml.zip>You
will want this</a>
As you have seen, there aren't many differences between XHTML and
HTML when using Links.
We'll, we've covered quite a bit. There is enough
information here for you to use and put to work and be able to
navigate between pages in no time. We created links using
images and we used the "name" and "id" attribute as a way to point
inside our web page. We also talked about links as protocols
using mailto.
In our next article we'll be talking about frames.
