Learning Web Design Third Edition- P13 ppsx

Part II: HTML Markup for Structure
106
Linking Within Your Own Site
Linking to a specific point in a page
Did you know you can link to a specific point in a web page? This is useful
for providing shortcuts to information at the bottom of a long scrolling page
or for getting back to the top of a page with just one click. You will sometimes
hear linking to a specific point in the page referred to as linking to a document
fragment.
Linking to a particular spot within a page is a two-part process. First, you
identify the destination, and then you make a link to it. In the following
example, I create an alphabetical index at the top of the page that links down
to each alphabetical section of a glossary page (Figure 6-11). When users click
on the letter “H,” they’ll jump down on the page to the “H” heading lower
on the page.
Step 1: Naming the destination
I like to think of this step as planting a flag in the document so I can get back
to it easily. To create a destination, use the id attribute to give the target ele-
ment in the document a unique name (that’s “unique” as in the name may
only appear once in the document, not “unique” as in funky and interesting).
In web lingo, this is the fragment identifier.
You may remember the id attribute from Chapter 5, Marking Up Text where
we used it to name generic div and span elements. Here, we’re going to use it
to name an element so that it can serve as a fragment identifier, that is, the
destination of a link.
Here is a sample of the source for the glossary page. Because I want users to
be able to link directly to the “H” heading, I’ll add the id attribute to it and
give it the value “startH” (Figure 6-11
1
).
<h1 id="startH">H</h1>

Step 2: Linking to the destination
With the identifier in place, now I can make a link to it.
At the top of the page, I’ll create a link down to the “startH” fragment
2
. As
for any link, I use the a element with the href attribute to provide the location
of the link. To indicate that I’m linking to a fragment, I use the octothorpe
symbol (#), also called a hash or number symbol, before the fragment name.
<p> F | G | <a href="#startH">H</a> | I | J </p>
And that’s it. Now when someone clicks on the “H” from the listing at the
top of the page, the browser will jump down and display the section starting
with the “H” heading
3
.
N ot e
Linking to another spot on the same
page works well for long, scrolling pages,
but the effect may be lost on a short web
page.
N ot e
Remember that id values must start
with a letter or an underscore (although
underscores may be problematic in some
versions of IE).
To the Top!
It is common practice to add a link
back up to the top of the page when
linking into a long page of text. This
alleviates the need to scroll back after
every link.

A U t H O R I n G t I P
Linking Within Your Own Site
Chapter 6, Adding Links
107
<h2 id="startH">H</h2>
<dl>
<dt>hexadecimal</dt>
<dd>A base-16 numbering system that uses the characters 0-9 and
A-F. It is used in CSS and HTML for specifying color values</dd>
<p> | F | G | <a href="#startH">H</a> | I | J </p>
Create a link to the destination. The # before the name is necessary to identify
this as a fragment and not a filename.
Identify the destination using the id attribute.
1
2
3
Figure 6-11. Linking to a specific destination within a single web page.
Named Anchors
The old way of identifying a
destination in a document was to
place a named anchor element. A
named anchor is an
a
element that
uses the
name
attribute (for providing
the unique fragment identifier)
instead of
href

, for example:
<h2><a name="startH">H</a></
h2>
Named anchors are not underlined
when the page displays in the
browser.
The
name
attribute is no longer used
with the
a
element in XHTML, so the
recommended practice is to simply
identify the element itself with the
id
attribute (as we’ve done in this
chapter). It also keeps the markup
simple and semantically sound.
(Note that
name
is still used for
certain form input elements.)
If, for some reason, you must
support Netscape 4 or other out-of-
date browsers for the .1% of people
still using them, you will need to
include a named anchor because
old browsers do not support the
id

attribute for naming fragments.
Part II: HTML Markup for Structure
108
Targeting a New Browser Window
Linking to a fragment in another document
You can link to a fragment in another document by adding the fragment
name to the end of the URL (absolute or relative). For example, to make a
link to the “H” heading of the glossary page from another document in that
directory, the URL would look like this:
<a href="glossary.html#startH">See the Glossary, letter H</a>
You can even link to specific destinations in pages on other sites by putting
the fragment identifier at the end of an absolute URL, like so:
<a href=" the Glossary,
letter H</a>
Of course, you don’t have any control over the named fragments in other
people’s web pages. The destination points must be inserted by the author
of those documents in order to be available to you. The only way to know
whether they are there and where they are is to “View Source” for the page
and look for them in the markup. If the fragments in external documents
move or go away, the page will still load; the browser will just go to the top of
the page as it does for regular links.
Targeting a New Browser Window
One problem with putting links on your page is that when people click on
them, they may never come back. One solution to this dilemma is to have the
linked page open in a new browser window. That way, your visitors can check
out the link and still have your content available where they left it.
The downside is that opening new windows is problematic for accessibility.
New windows may be confusing to some users, particularly those who are
accessing your site via a screen reader or other assistive device. At the very
least they may be perceived as an annoyance rather than a convenience,

particularly now that we are regularly bombarded with pop-up advertising.
Finally, because it is common to configure your browser to block pop-up
windows, you risk having the users miss out on the content in the new
window altogether.
The method you use to open a link in a new browser window depends on
whether you want to control its size. If the size of the window doesn’t matter,
you can use (X)HTML alone. However, if you want to open the new window
with particular pixel dimensions, then you need to use JavaScript. Let’s look
at both of these techniques.
exercise 6-8
|
Linking
to a fragment
Want some practice linking to
specific destinations? Open the file
glossary.html in the materials folder
for this chapter. It looks just like the
document in Figure 6-11.
Identify the
h2
“A” as a destination
for a link by naming it “startA”
with an
id
attribute.
<h2 id="startA">A</h2>
Make the letter “A” at the top of
the page a link to the named
anchor. Don’t forget the #.
<a href="#startA">A</a>

Repeat steps 1 and 2 for every letter
across the top of the page until you
really know what you are doing (or
until you can’t stand it anymore). You
can help users get back to the top of
the page, too.
Make the heading “Glossary” a
destination named “top.”
<h1 id="top">Glossary</h1>
Add a paragraph element
containing “TOP” at the end of
each lettered section. Make “TOP”
a link to the identifier that you
just made at the top of the page.
<p><a href="#top">TOP</a></p>
Copy and paste this code to the
end of every letter section. Now
your readers can get back to the
top of the page easily throughout
the document.
1.
2.
3.
4.
Targeting a New Browser Window
Chapter 6, Adding Links
109
A new window with markup
To open a new window using (X)HTML markup, use the target attribute in
the anchor (a) element to tell the browser the name of the window in which

you want the linked document to open. Set the value of target to _blank or to
any name of your choosing. Remember with this method, you have no con-
trol over the size of the window, but it will generally open at the same size as
the most recently opened window in the user’s browser.
Setting target="_blank" always causes the browser to open a fresh window.
For example:
<a href="" target="_blank">O'Reilly</a>
If you target “_blank” for every link, every link will launch a new window,
potentially leaving your user with a mess of open windows.
A better method is to give the target window a specific name, which can then
be used by subsequent links. You can give the window any name you like
(“new,” “sample,” whatever), as long as it doesn’t start with an underscore. The
following link will open a new window called “display.”
<a href="" target="display">O'Reilly</a>
If you target the “display” window from every link on the page, each linked
document will open in the same second window. Unfortunately, if that sec-
ond window stays hidden behind the user’s current window, it may look as
though the link simply didn’t work.
Opening a window with JavaScript
If you want to control the dimensions of your new win-
dow, you’ll need to use JavaScript, a scripting language
that adds interactivity and conditional behaviors to
web pages. Teaching JavaScript is beyond the scope of
this book, but you can use this simple window-open-
ing script. Copy it exactly as it appears here, or (thank
goodness) copy and paste it from the document win-
dowscript.html provided in the materials for this chapter
(at www.learningwebdesign.com/materials).
Figure 6-12. JavaScript allows you to open
a window at a specific pixel size.

Figure 6-12. JavaScript allows you to open
a window at a specific pixel size.
Targeting Frames
The
target
attribute is also useful
with framed documents. A framed
document is one in which the
browser is divided into multiple
windows, or frames, each displaying
a separate (X)HTML document. If you
give each frame a name, you can use
the
target
attribute in links to make
a linked document open in a specific
frame. Frames, while once popular,
have largely gone out of style due to
usability and accessibility problems.
Part II: HTML Markup for Structure
110
Targeting a New Browser Window
The script in the following example opens a new window that is 300 pixels
wide by 400 pixels high (Figure 6-12).
There are two parts to the JavaScript. The first is the script itself ➊; the sec-
ond is a reference to the script within the link ➋.
<html>
<head>
<title>Artists</title>
➊ <script type="text/javascript">

// <![CDATA[
var properties = { width: 300,
height: 400,
scrollbars: 'yes',
resizable: 'yes' };
function popup(){
var link = this.getAttribute( 'href' );
var prop_str = '';
for( prop in properties ){
prop_str = prop_str + prop + '=' + properties[prop] + ',';
}
prop_str = prop_str.substr( 0, prop_str.length - 1 );
var newWindow = window.open( link, '_blank', prop_str );
if( newWindow ){
if( newWindow.focus ) newWindow.focus();
return false;
}
return true;
}
function setupPopups(){
var links = document.getElementsByTagName( 'a' );
for( var i=0; i<links.length; i++ ){
if( links[i].getAttribute( 'rel' ) &&
links[i].getAttribute( 'rel' ) == 'popup' ) links[i].
onclick = popup;
}
}
window.onload = function(){
setupPopups();
}

// ]]>
</script>
</head>
<body>
<h1>Artists</h1>
<ul>
➋ <li><a href="waits.html" rel="popup">Tom Waits</a></li>
<li><a href="eno.html" rel="popup">Brian Eno</a></li>
</ul>
</body>
</html>
When a user clicks on a link with a rel attribute set to “popup,” this script
kicks into action and opens the linked document in a new window that is
sized according to the width and height property settings (300 × 400 pixels
in this example).
Mail Links
Chapter 6, Adding Links
111
This script opens any link with a rel attribute set to “popup” in a new win-
dow set to a specific size. You can set the width and height of the window to
any pixel dimensions in the properties list at the beginning of the script (in
bold). You can also decide whether the window has scrollbars and whether
the user can resize the window by setting the “scrollbars” and “resizable” vari-
ables to “yes” or “no.” The property values are the only portion of the script
that should be customized. The rest should be used as-is.
In the body of the document, you’ll see that each link includes the rel
attribute set to “popup” ➋. Links without this rel value will not trigger the
script.
Mail Links
Here’s a nifty little linking trick: the mailto link. By using the mailto protocol

in a link, you can link to an email address. When the user clicks on a mailto
link, the browser opens a new mail message preaddressed to that address in
a designated mail program.
A sample mailto link is shown here:
<a href="mailto:">Contact Al Klecker</a>
As you can see, it’s a standard anchor element with the href attribute. But the
value is set to mailto:
The browser has to be configured to launch a mail program, so the effect
won’t work for 100% of your audience. If you use the email itself as the linked
text, nobody will be left out if the mailto function does not work.
Test Yourself
The most important lesson in this chapter is how to write URLs for links and
images. Here’s another chance to brush up on your pathname skills.
Using the directory hierarchy shown in Figure 6-13, write out the markup for
the following links and graphics. I filled in the first one for you as an example.
The answers are located in Appendix A.
This diagram should provide you with enough information to answer the
questions. If you need hands-on work to figure them out, the directory struc-
ture is available in the test directory in the materials for this chapter. The
documents are just dummy files and contain no content.
In index.html (the site’s home page), write the markup for a link to
tutorial.html.

<a href=“tutorial.html”> </a>
1.
Spam-Bots
Be aware that by putting an email
address in your document source,
you will make it susceptible to
receiving unsolicited junk email

(known as spam). People who
generate spam lists sometimes use
automated search programs (called
bots) to scour the Web for email
addresses.
One solution is to encrypt the
email address so that it is hidden
from email-harvesting robots but
accessible to human readers. The
Enkoder from Automatic Labs
will do this for you. It is available
via an online form or as a Mac
OS X application. Get Enkoder at
/automaticlabs.com/products/
enkoder.
Otherwise, if you don’t want
to risk getting spammed, keep
your email address out of your
(X)HTML document.
Part II: HTML Markup for Structure
112
Test Yourself
In index.html, write the anchor element for a link to instructions.html.

Create a link to family.html from the page tutorial.html.

Create a link to numbers.html from the family.html page, but this time,
start with the root directory.

Create a link back to the home page (index.html) from the page instruc-

tions.html.

In the file intro.html, create a link to the web site for this book (www.
learningwebdesign.com).

Create a link to instructions.html from the page greetings.html.

2.
3.
4.
5.
6.
7.
/
somesite
images/
index.html tutorial.html
examples/
instructions.html intro.html
french/
friends.html family.html
spanish/
food.html greetings.html
german/
money.html numbers.htmlcolors.html
arrow.gif logo.gif
Figure 6-13. The directory structure for the Test Yourself questions.
/
somesite
images/

index.html tutorial.html
examples/
instructions.html intro.html
french/
friends.html family.html
spanish/
food.html greetings.html
german/
money.html numbers.htmlcolors.html
arrow.gif logo.gif
Figure 6-13. The directory structure for the Test Yourself questions.
The
/
(or multiples of them) always
appears at the beginning of the
pathname and never in the middle. If
the pathnames you write have
/
in
the middle, you’ve done something
wrong.
t I P
(X)HTML Review: The Anchor Element
Chapter 6, Adding Links
113
Create a link back to the home page (index.html) from money.html.
We haven’t covered the image (img) element in detail yet, but you should be
able to fill the relative URLs after the src element to specify the location of
the image files for these examples.
To place the graphic arrow.gif on the page index.html, the URL is:

<img src=" " alt="" />
To place the graphic arrow.gif on the page intro.html, the tag is:
<img src=" " alt="" />

To place the graphic bullet.gif on the friends.html page, the tag is:
<img src=" " alt="" />
(X)HTML Review: The Anchor Element
There’s really only one element relevant to linking:
Element and attributes Description
a
Anchor (hypertext link) element
href="url"
Location of the target file
name="text"
Obsolete method for naming an anchor to cre-
ate a fragment
8.
9.
10.
11.

115
IN THIS CHAPTER
Adding images
to a web page
Using the src, alt, width,
and height attributes
Creating an imagemap
A web page with all text and no pictures isn’t much fun. The Web’s explosion
into mass popularity is due in part to the fact that there are images on the

page. Before the Web, the Internet was a text-only tundra.
Images appear on web pages in two ways: as part of the inline content or as til-
ing background images. Background images are added using Cascading Style
Sheets and are talked about at length in Chapter 13, Colors and Backgrounds.
In this chapter, we’ll focus on adding image content to the document using
the inline img element.
Inline images may be used on web pages in several ways:
As a simple image. An image can be used on a web page much as it is used
in print, as a static image that adds information, such as a company logo
or an illustration.
As a link. As we saw in the previous chapter, an image can be used as a link
to another document by placing it in the anchor element.
As an imagemap. An imagemap is a single image that contains multiple
links (“hotspots”) that link to other documents. We’ll look at the markup
used to add clickable areas to images in this chapter as well.
With the emergence of standards-driven design and its mission to keep all
matters of presentation out of the document structure, there has been a shift
away from using inline images for purely decorative purposes. See the sidebar,
Decorate Images Move on Back, on the following page for more information
on this trend.
First, a Word on Image Formats
We’ll get to the img element and markup examples in a moment, but first it’s
important to know that you can’t put just any image on a web page. In order
to be displayed inline, images must be in the GIF, JPEG, or PNG file format.
Chapter 18, Web Graphics Basics explains these formats and the image types
they handle best. In addition to being in an appropriate format, image files
ADDING IMAGES
CHAPTER
7