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="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. 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="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. 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: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. 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 . 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 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. 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