Learning Web Design Third Edition- P13 ppsx

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?. You will sometimes hear linking to a specific point in th

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 docuele-ment 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

Note

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.

Note

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

<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.

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="http://www.example.com/glossary.html#startH">See 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.

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="http://www.oreilly.com" 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="http://www.oreilly.com" 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. a window at a specific pixel size JavaScript allows you to open

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.

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)

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 winwin-dow 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:alklecker@hotmail.com">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:name@address.com

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.

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/

examples/

instructions.html intro.html

french/

friends.html family.html

spanish/

food.html greetings.html

german/

money.html colors.html numbers.html arrow.gif logo.gif

Figure 6-13 The directory structure for the Test Yourself questions.

/ somesite

images/

examples/

instructions.html intro.html

french/

friends.html family.html

spanish/

food.html greetings.html

german/

money.html colors.html numbers.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

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

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 ustil-ing Cascadtil-ing 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:

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