===========================================================================
Today on The World Vol. 4 #149 Monday, June 8, 1998
===========================================================================
Continuing the HTML tutorial series...
In Chapter 2 I showed how to make simple links. Today I'm going to
cover the black art of links in more detail. Incidentally, you can
now find the previous chapters at
http://world.std.com/help/web/tutorial
as well as the necessary images for the exercises in Chapter 4.
Incidentally, I've fixed a broken link to the HPA (Home Page Alone)
setup tutorial on our help pages. If you were having trouble finding
it, it's at
http://world.std.com/help/web/hpa-tutorial.shtml
(kibo)
---------------------------------------------------------------------------
HTML TUTORIAL -- CHAPTER 5 -- LINKS
5.1 Relative & Full URLs
Let's start with a new document (this "skeleton" should be looking
pretty familiar by now) with a picture on it and a paragraph of text
that contains a link:
My Page.
Welcome to my page!
A good place to look for stuff is the
Yahoo! Web index.
Save that as linkspage.html and view it with your Web browser.
There should be a small picture followed by a line of text
including a simple link. Later on we'll make that little "thumbnail"
picture link to a bigger one.
You'll recall that in Chapter 2 I broke a URL down into its component
parts:
protocol :// computer / directory / directory / filename
...such as:
http://www.yahoo.com
http://world.std.com/index.html
http://world.std.com/world-general-faq.html
http://world.std.com/about/services.html
http://world.std.com/help/web/tutorial/tutorial-01.txt
URLs such as these that contain the name of a computer are called
full URLs, because they include the complete route to get wherever
you're going. Relative URLs do not include the name of a computer,
and look like this:
hobbies.html
index.html
about/services.html
../pictures.html
/images/bullet.gif
If you try to use those in your Web browser, they won't work.
They're not complete paths to anything in particular -- they
don't include the name of the computer or all the information
about what directories to look in. However, when you make a
link, you can use relative URLs to reference one of your own
pages (stored on the same computer) because the Web browser
will start looking in the same directory as the document that
contains the link. For instance, suppose you had two Web pages:
http://world.std.com/~freduser/index.html
http://world.std.com/~freduser/hobbies.html
The first one could refer to the second as
...
(and so could anyone else, for that matter) but the first
page could also refer to the second as just
...
(Although, in the case of Home Page Alone [HPA] pages on The World,
there's one extra step -- -- that you might need
to take to ensure that relative links on your index page always work.
More on that later.)
Notice that the third example of a relative URL, "about/services.html",
has a slash in it, meaning "about" is a directory. This would work
if the document which refers to "about/services.html" can find a directory
named "about" in the same places as the referring document. In other
words, directory X contains index.html and the "about" directory.
The "about" directory contains services.html. index.html (or other
Web pages stored directly in directory X) can refer to "about/services.html",
but Web pages stored in the "about" directory would refer to "services.html".
If that's confusing you can always use full URLs. (You have to know
about full URLs anyway, because they're the only kind you can give out
to other people.)
To add to the list of tricks you can do with relative URLs, you can
use UNIX-style conventions such as:
../pictures.html means "go into the directory that contains
the directory this page is in, then find
pictures.html". ".." is the "parent" directory.
/images/bullet.gif means "go all the way to the 'top' directory
on this site -- www.kibo.com or whatever --
and then find "images/bullet.gif". This
isn't useful for HPA customers, only for
Kiosk customers who have their own
www.xyz.com site-name. "/" (at the start of
a relative URL) is the "root" directory.
I imagine you won't have much need for those two (although the latter one
can be useful for people who have a www.xyz.com sitename and want to keep all
their images in /images.)
5.2 Internal URLs
So far I haven't told you about "internal" URLs. These are how a Web page
can refer to a particular part of another Web page (or, more commonly, to
a particular part of the same page.) Add this large amount of filler to
linkspage.html so you can see an example in action:
Jump to part 1.
Jump to part 2.
Jump to part 3.
Part 1.
Part 2.
Part 3.
The reason I included all that junk (
s,
s, and four copies of
the same large picture) was to make the page long enough to necessitate
scrolling. Notice the three links at the top. A link to "#name" causes
the Web browser to scroll to the appropriate NAME="name" part of the
same page. You name the parts of your document by including
tags (although generally nobody puts anything before
the this still takes an to end it because is a
form of .) Note that there is no "#" in , and also note
that these names are case-sensitive.
You can combine #name with relative or full URLs to link to part of
another page. Some examples:
http://world.std.com/index.html#BOTTOM
http://www.kibo.com/kibofood/index.html#DONTDRINK
http://world.std.com/~mmcirvin/favelinks.html#science
(This should make it obvious that they're case-sensitive.) Some Web
browsers have little quirks about displaying these, but internal links
are useful and almost always work (and anyway, people can always figure
out how to scroll down if they're not very stupid.)
To recap all that link stuff:
MAKING LINKS
name a part of your page
... scroll to named part of same page
...
link to part of another page
...
link to part of a page on another site
5.3 Thumbnail images
So how do you make that little picture of Potsie at the top of your
page link to a big picture of Potsie (the one I've been using for
filler) elsewhere? It's easy as pie. See the ![]()
tag that displays
"photo_t.gif" on our page? Make it a link by putting
right before it and right after it, so your HTML looks like this:
(You could have all that code on one line, but I've spread it out over
five to make it clearer.) Make that change to your experimental page
and see what it looks like in the browser. Is the border of the picture
now a different color? What happens when you click on it?
Basically, everything between and is the "clickable"
part (or, for those people using lynx, is a link they can follow
WITHOUT clicking -- remember, not all browsers are mouse-driven.)
We could put more stuff into that section of the page. Change your
page so that part of it looks like this:
I'm a link! Follow me to see my bigger photo!
Now we have an ![]()
, a
, and some text in the "hot" area between
and . (If your browser displays a little "_" to the right of
the photo, that's because I've indented the code above by putting some
spaces before each line -- so it thinks there's a space between the
![]()
tag and the
tag. Try taking out my extra spaces and maybe
the line break as well and it'll go away. Remember that in HTML multiple
spaces or a line break generally count as a single space (some browsers
may vary.) The result is that if you really want ... to hug
the ![]()
tightly, you may need to pack all your code onto one line.
You'll notice we linked the thumbnail image (photo_t.gif) directly
to the larger one (photo.jpg). We could also have made a page for
the large photo -- if you'd like to practice, try making a photo.html
page which includes photo.jpg, then change linkspage.html's link to
point to photo.html.
If you're going to include many photos on your pages for people to
view, using thumbnail images to preview them saves people from waiting
for all the big images to display if they don't want to see all of
them. (Also, you can fit a lot of thumbnails on one page!)
5.4
Earlier I said that HPA customers might want to include
on their pages if they want to use relative URLs in links. Why?
It's explained in the HPA setup tutorial at
http://world.std.com/help/web/hpa-tutorial.shtml
and to recap: for security reasons, "http://world.std.com/~login"
actually points to a directory named "public_html" so that people can't
see your account's other files (such as your E-mail or .newsrc) and
thus the Web server has been fooled into thinking your Web pages are
stored in an obvious place when they're actually tucked away in
"public_html". This is all fine and dandy except when your index.html
refers, for instance, to itself (with "#name"). In some cases
(usually only older Web browsers) the browser can get confused.
(I haven't run into this problem lately.)
The purpose of is to inform the Web browser what the URL
of the current page is, so that when it comes to a relative or internal
link it knows the other half of the path to the desired link.
goes in the ... section at the top of your
Web page, and looks like this:
But remember that whenever you put that into one of your Web pages,
you need to put in the page's own URL there (i.e. is
different for each of your pages if you're following the W3C standards.)
A benefit of using is that if the page's URL is ever
changed, or if someone downloads the page and views it with their
Web browser (from their hard disk) the relative URLs will still
work because will override the new location of the
page with the place it used to be. is what's used to
turn relative or internal links into full URLs that the Web
browser uses to locate pages.
You don't have to use if you don't want to -- you'll probably
never run into the problem with HPA I mentioned. But if you're worried
about it, you can add it to your index.html. (It shouldn't be necessary
on your other pages.)
Next chapter I'll talk about tips for making sure your pages
look good and work well, tools for checking them, and some
other general pointers... and then later we'll get into the
relatively advanced stuff, like lists, tables, and entities.
(kibo)
==========================================================================
[] Send suggestions for tips & URLs to today@world.std.com.
We're also collecting links for our Web pages at eyeguy@world.std.com.
[] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or
call 617-739-0202.
[] To subscribe to the "Today" mailing list, send a note saying 'subscribe
announcements' to majordomo@world.std.com.
Subscriptions to this mailing list are open to World customers only.
[] Darn it, I'm gonna buy that digital camera this weekend or explode.
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
Its contents may freely be redistributed as long as credit is given.