7. Hyperlinks and multimedia
Hyperlinks to pages (click any heading below to return here)
Hyperlinks are the essence of the Web. In fact hyperlinks represent about half of what Web pages do: they show content and link to other pages.
Hyperlinking has been extended lately, and with it our English language, to include hypermedia. Linking from content material on one page to another page with songs and video is commonplace. And the pages may be across the world from each other. To us the World Wide Web seems boundless.
We will learn about hyperlink markup and how to control it for the benefit of visitors and our businesses.
The <a> tag
Everyone seems to be familiar now with how hyperlinks are identified on Web pages. You should stop and think about this fact as a lesson in the benefit of standards. Hyperlinks started out as blue underlined text, and they still are, mostly. There are two unerring clues that a click will send you somewhere else.
- When underlined text changes colors
- When the cursor changes to a hand
The anchor element <a></a> supports these features, but not without a sufficient number of attributes and values. Up to this point in the course, attributes were optional. XHTML worked without using them. For anchors, you must specify the href attribute and provide it with a value (a page or location on a page).
<a href="more.html">More on the topic</a>.
As you may have guessed More on the topic will be underlined. It is the clickable link. Visitors who click there will be sent away from your page to more.html which is in the same folder as your page. More.html will replace your page in the browser window. More on this last statement in a minute.
Checkpoint (answer then click)
Hyperlinks appear in a standard and very well known format. Name the format AND name the other standard clue that hyperlinks use to make you aware of their presence. Click the check point to confirm your answers.
Relative addresses
This topic came up when you were advised to set up a Mirror Web Site for development and testing. You may recall the picture of the fictitious IBM site. When the IBM authors want to hyperlink between pages in different folders, they would use the href attribute.
Relative addresses are strongly preferred for intra-site links, which you will do most of the time. For links elsewhere you do not have a choice. You must use the complete URL. Authors linking into the IBM Web catalog from outside the site must use this complete URL.
http://www.ibm.com/internet/web/catalog.html
But inside authors can shorten it to this relative reference.
/internet/web/catalog.html
Addresses with <base />
You should not use the complete URL for the value of href unless you link outside the site. Even within your own site, there are helpful ways to cut down on explicit (but relative) references. The previous example seems as short as possible, but if you had to type it frequently, or if the site is reorganized frequently, then think about using the <base href= /> tag. Then you can omit the folder references in href.
<a href="/internet/web/catalog.html">Web Catalog</a>
New relative reference with <base />
<base href="/internet/web" />
<a href="catalog.html">Web Catalog</a>
The <base /> element must only appear in the <head> section of your XHTML document. Base does not affect images only hyperlinks.
Goodbye to customers
If this sounds like a cynical statement, notice how often pages send visitors away from their site. Keep visitors on your site. Link them off your site only for very good business reasons.
With millions of Web sites to choose from, customers have options besides the ones you have to offer. When they are at your site, then, treat them as an asset. Providing them with hyperlinks to kindred sites might be giving in to your deep-seated self-destructive urges.
Prevention
Most of us use only one browser window. We link from site to site in that window. When a visitor leaves your site, then, the next site overwrites your site. In other words, the most recent site is the only one visible. The target hyperlink attribute lets you author the link to not replace the window, but to open in another window. Your window stays open after the hyperlink.
<a target="_blank" href="catalog.html">Web Catalog</a>
Checkpoint (answer then click)
Name two uses that you would have for the <base /> tag.
Hyperlinks can open a new window, or they can replace the contents of the current window. How do you decide which you want? How do you control which window is used? Click the check point to confirm your answers.
Hyperlink to a section
You have learned about hyperlinking to pages. Now it is time to learn about hyperlinking to specific sections of pages. Say you want to read a particular story at a network news site. One page at the site may hold six stories, so you want to be hyperlinked directly to the story of interest, not to the top of the page.
Hyperlink to document#id
Hyperlinks can include identifiers, not just file names. Before you hyperlink to an identifier, first code the identifier (id attribute) into a tag. Staying with the news stories for a moment longer, say the story you are interested in reading is "Bush Recycling." The author might have coded a hyperlink to that story, and identified the story as follows:
The following code would be in the network news homepage.
<a href="newsarticles.html#BushRecycling">Bush Recycling</a>And the following code would be in the news articles page.
<div id="BushRecycling">...story content...</div>
The result of a user link would be to show the Bush Recycling article at the top of the news articles page. This was made possible by adding #BushRecycling to the usual file named for the link. Notice that the effect is to show the same news articles page for links to any articles. The browser automatically scrolls down to the article of interest before showing the page.
Hyperlink to #id
Within your page, it is good navigation usability to provide hyperlinks for returning to the top of the page. Some page designs do not need this feature, but other designs with long pages will benefit greatly from it.
Locate this code at the top of a page of news articles.
<h1 id="page_top">News for July 4, 2004</h1>And at the end of each of the articles, let users reach the page top without scrolling by placing this code at the end of each article.
<a href="#page_top">top of page</a>
Maybe you have seen this technique used on pages with a great deal of content. It is also common to include an image beside or instead of the top of page. It's easy to include images in the <a></a> container. The topic of the next lesson is Images.
top of page
Checkpoint (answer then click)
Describe how to link from outside a page into a specific location there. How do you provide for within-page navigation? Click the check point to confirm your answers.
Combining links and lists
Structuring links as lists provides us with menus. Web menus have become creative; do not think of boring lists of blue underlined text as Web menus. Creative Web authors have found ways to provide "ahhh, here it is" for visitors to their pages. Menus also provide for a quick summary of Web content -- just as headlines do for the newspaper media. The quicker visitors find what they want on your site the more successful your site is.
Until we finish studying XHTML and begin learning about CSS we must postpone learning how to polish the look of our link-lists. For the present time we will concentrate on how to markup the elements and attributes we need to prepare for CSS markup later.
Basic menu list
A menu list is an unordered list with the list items consisting entirely of hypertext. When rendered, a menu list with default styles would look like that at the left. Clicking on any list item (the hypertext) would link you to the appropriate page. The markup for a menu list consists of placing the hyperlinks inside the individual <li> containers as shown below.
Menu definition list
This use of lists and hyperlinks together has become a standard for good pages. The definition term <dt> tag contains the menu as hypertext, and the definition <dd> tag contains descriptive content to bolster the menu text. The objective is to provide a menu-like link in the form of a short summary followed by a longer description of what can be found at the target. This layout probably grew from news magazines that have tables of contents that contain headlines, a short sample of the news article and then a page number. Page numbers are unnecessary on the Web, of course, and the format works very well on a Web page where space is limited. Surfers use the extra information to understand the link before they take it.
<dl>
<dt><a href="st1.html">Secretary of State speaks</a></dt>
<dd>In an optimistic effort to extend the olive branch to
warring factions in the middle west, Secretary of State spoke
for two hours to the United Nations<
/dd>
<dt><a href="st2.html">Inflationary tensions reduced</a></dt>
<dd>Concerns over inflationary monetary policy today were
unwarranted in light of recent Fed policy statements</dd>
<dt><a href="st4.html">Cabinet members disclosure</a></dt>
<dd>Cabinet members are for sale. Look for knobs, hinges,
strikers and latches at a local hardware store.</dd>
</dl>
General-to-specific menu list
Another combination of hyperlinks and lists that is a useful for your Web pages involves two links in one list item. This sounds confusing at first, having two links side by side on a single line. It works well because the first link targets a section or chapter of a page while the second link targets a specific topic or story within the chapter. CSS will help this format further by adding to our ability to color the two links differently, use different fonts, and use different sizes of the fonts.
Other menu links
Links can be in horizontal menus as well as vertical menu lists. It is common to see a series of links spread out across the bottom of a Web page as shown here.
Markup for this variant format of menu links involves the character entity for a non breaking space ( ) to force the browser to keep one space between the link and the pipe character (|). Here is the markup.
<a href="catalog.html">Catalog</a> |
<a href="order.html">Order</a> |
<a href="support.html">Support</a> |
<a href="jobs.html">Jobs</a> |
<a href="site.html">Site Map</a> |
<a href="mailto:site@mail.site.com">Contact Us</a>
e-mail hyperlinks
There is another scheme or protocol besides http: named mailto: that can be used in conjunction with hyperlinks. Instead of linking visitors to a document, you send them to an e-mail application where they can send mail to you. Generally, this means that your hyperlink will open their e-mail client program, or transfer focus to it when it is already open. If they do not have an e-mail client such as Outlook, Pegasus, or Eudora, then they will receive an error message. We will learn to circumvent the need for client e-mail applications in the Server section on PHP.
Designing e-mail links
Hyperlinks involving e-mail are commonly indicated at the bottom of pages by "contact us" or "contact Webmaster." The hypertext is formatted just as if the link were to another document. Because a visitor may not have an e-mail client program, you should either use the more reliable PHP technique, or provide a bit more information in the hypertext. For example, use the markup "Contact us at service@mail.ibm.com" so that visitors without e-mail may note the address for future use.
It is a good page structuring practice to place these links inside an address container, indicating to search engines how you can be contacted.
Visitors with Eudora clients will see the following when they click the example hyperlink. The delivery (TO:) address is taken automatically from the href value and the visitor's own name and e-mail (FROM:) address are filled automatically into the From field. Nothing else is included, so the visitor has to supply a subject and a message, then press the Send button.
Coding e-mail links
Further customization is possible for this variant of hyperlinking. You can markup all or part of the body of the message, as well as the subject, and provide a copy to a second e-mail address. Preparing these fields of information in advance is an excellent way of standardizing e-mail from Web pages. Attributes are not used for coding the subject, body and cc. Instead, you would include them in the href value, carefully following a very particular format.
At the end of the e-mail address (service@mail.ibm.com) append a question mark and one or more of the optional fields shown below. Substitute anything in place of the "literal text" except quotes, which are used in the markup to delimit the entire href value. If you include two or more of the three optional fields the second and third fields must begin with "&", for example "&body=literal text". Order of the fields is not important.
You might want to force a new line in the body so your mail appears as below.
Suggestion:
My name:
My email:
%0A where you want the line breaks. For example: "&body=Suggestion:%0AMy name:%0AMy email:".
Link and list exercises
Basic lists. Make three separate ordered lists of names and phones for your friends, family and contacts each in its own XHTML transitional page. Save your work in the mirror folder under the names EX3-friends.html, EX3-family.html, and EX3-contacts.html. Test each page and validate each page using the W3C Validator.
Nested lists. Create a new page that combines the three lists under an unordered list that has three list items: friends, family and contacts. Copy your work from each of the three pages you made in the first exercise. Save your work as EX3-allphones.html. Test and validate the page.
Links. First, make a page that has an unordered list with list items: friends, family and contacts. Change the list item text into hypertext by placing the text into the anchor container with href="EX3-friends.html" and so on for each of the three list items. Save this page as "EX3-phones.html". Second, modify EX3-friends.html by including a hyperlink below the list of names and phone numbers that links back to EX3-phones.html. Repeat this for the other two lists. Test and validate.
e-mail links. Modify EX3-friends.html to include e-mail links for each friend. Test and validate.
Accesskeys. Further modify your friends list by adding an accesskey attribute to important friends e-mail links. You might decide to use the first letter of their last name as the accesskey character. As a reminder, indicate what character you decided on someplace beside the e-mail link. Test and validate. Target. Modify EX3-phones.html by adding a link at the bottom of the page to some site you use frequently, such as a search engine (www.google.com), and include the attribute target="_blank". Test and validate.
<h3>Press alt+N to set focus on a hyperlink</h3>
<ol>
<li><a href="doc1.html" accesskey="1">Lorem ipsum dolor</a></li>
<li><a href="doc2.html" accesskey="2">consectetuer adipiscing</a></li>
<li><a href="doc3.html" accesskey="3">nibh euismod tincidunt</a></li>
</ol>
Links helper. Create a new page that combines everything from EX3-phones.html, and adds hyperlinks that you frequently take (for example, search engines, Microsoft tutorials, W3Schools tutorials, etc). This is an alternative to the Favorites list, but it could be used from any computer that has Web access. Save the file as Favorites.html, test, and validate, then upload it to your Web server. Test it on the Web. Did you make the most convenient use of the target attribute?
Links helper refinement. If you have many links on your page, they are probably disorganized. Make categories of the links (as you did for friends, family, and contacts), and nest the list items in each category under an unordered list of the categories. At the top of the modified Favorites.html page, add an unordered list of just the category names. Hyperlink each category name to the related items in the nested list below. For this to work you will need to use the id="categoryname" attribute for each sublist target, and use the unique id category names as your href destination. Test, validate and upload to the Web server.
Automatic hyperlinks
The no-frills forward pass
If your site moves and you have a different URL, what will happen to surfers who use the old link to your homepage? Think ahead and keep the old site available for a few months to forward visitors to your new homepage after they arrive at your old one.
The technique below is very automatic. Visitors may not even notice your new URL. This works very well if you can keep the URL active. Replace all the markup in your old homepage with the few lines below. Then save it under the old homepage file name.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body onload="location.href('/newsite.html')">
</body>
</html>
Another technique is described next for automatic linking that provides a timer. You can display a message for a few seconds then pass visitors to a new site.
Forward pass with a notice
This example allows you to pause for a few seconds before linking to newsite.html. Use the time to display a message such as "We have moved. Update your favorites list." The meta tag uses HTTP header code which can specify the length of time needed. Change the Content="10 to Content="5 for a five second delay. The quotes are in the right place, really.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Redirecting to new page…</title>
<meta http-equiv="Refresh" Content="10;URL=../newsite.html">
</head>
<body>
<p>We have moved. Update your favorites list.</p>
</body>
</html>
Slide show
You may want pages top be served up in a particular sequence and at fixed time intervals, like a slide show. While this is not typical for a Web site, slide shows make sense in situations where you are making presentations about your Web pages and need them to change them automatically. Web pages are great for showing photos and can perform like Power Point presentations, so keep this trick in mind.
To make a slide show, include the meta tag (see above) on each page in the series, and adjust the time for adequate viewing. Remember to include the meta tag on each page in the slide show and code the name of the next page in sequence as well as the viewing time. If you need to pause briefly during the presentation, click the refresh button.
Link checkers
Avoid having "dead links" and missing images on your pages. Use a free program called a "link checker" to test whether your hyperlinks find their destination pages successfully, and whether images will be found as well. Enter the phrase "free link checker" in a search engine; you will find hundreds of programs. These programs work by opening your Web pages after you have them on a Web server and then they attempt to use each hyperlink you placed there. Dead ends are listed so you can either correct the URL or remove the hyperlink.
Your visitors will have less respect for your Web site if you provide links that do not work. The programs that check links are free; use them!
W3C now provides a link validator, which is a mixed blessing since it inspects and comments on a variety of features present in your pages. Try it at http://validator.w3.org/checklink. And learn how this page fares at the W3C Checklink.
Checkpoint (answer then click)
Why would you want to disable user control of hyperlinks by making them automatic? What two options do you have for implementing the automatics links? Click the check point to confirm your answers.
Multimedia
For the demos in this section to work you should have the speakers turned on and have one of the multimedia players installed on your computer. The free Windows Media Player is a good choice to download.
Multimedia players and MIMEs
The browser will become automatically aware of a media player (called a plug-in) when you download it. You will usually be asked "Do you want to make this your default media player?" Your answer establishes a connection between the plug-in and multimedia file types. After acquiring a plug-in you probably will be notified of updates that can be downloaded as new versions become available to handle new multimedia file types.
Internet Explorer, like all good Windows applications, is aware of your preferences for particular multimedia players because file extensions are associated with the "opening application" or multimedia players you have installed. File extensions indicate standard MIME multimedia formats. For example, audio files with the extension .WAV indicate files formatted as MIME type "audio/wav", files with the extension .AU are formatted as MIME type "audio/basic", files with extensions .MOV and .QT are formatted as MIME type "video/quicktime", files with the extension .AVI or .VFW are formatted as MIME types "video/avi" and "video/msvideo". New MIMEs become available at the same rate new multimedia compression formats are developed. Update your player. Get the MIME.
Changing your Windows preference from one brand of player to another requires you to open the Windows Control Panel and select the player application you wish to switch to. Presently, for video this amounts to selecting either QuickTime or RealPlayer. The player applications will allow you to bind (associate) multimedia files that have certain file extensions to their player.
Multimedia players may operate alone. The browser is not required, so you may play media files offline. Because file extensions are associated with particular players, double clicking on a file in Windows Explorer will bring up the player and start the show.
Media players that are free
The Windows Media Player will be present on workstations with Internet Explorer 6 or newer, but other players may or may not be present on visitor's workstations. QuickTime by Apple is an excellent alternative to the standard Windows player, and it can be downloaded at www.apple.com/quicktime/download/. Because the visitor has control over which player is installed, you may not have control of players from your page markup. Other players such as the RealPlayer offer short evaluation periods that are free.
Sound page design
Did you hear the Microsoft Sound when this page rendered? It is distributed with Windows NT as the auditory signal that Windows is beginning its loading sequence. For many of us, this sound is as familiar as the morning coffee pot.
You may want background music to help set a mood. Photographs, page layout and color can establish a mood -- and music can amplify the effect. Use audio sparingly and let the visitor be in charge of deciding to keep it on (or turn it on in the first place) or turn it off. Be considerate.
Long music tracks can slow downloads and chase away impatient visitors. You might want the "musical version" of your page to be a choice available to visitors. Visitor preferences can easily be stored in cookies, as described in the JavaScript lesson.
Pirating graphics or audio are equally unwelcome in the community of Web developers. You may wish to record your own, or use these free audio files that we found by searching Google.com.
Next learn how to mark up a page with audio tags.
The embed element*
The <embed /> tag is used to include sound on your page. Here is the code used on the previous page that automatically initiated the familiar Microsoft sound when the page loaded.
<embed src="media/The Microsoft Sound.wav"
autostart="true"
hidden="true"
/>
Let your visitors decide whether to hear an audio track by placing the audio control in full view for them to use or not use.
system audio
<embed
src="media/shutdown.wav"
autostart="false"
hidden="false"
/>
embed is a Microsoft extension to HTML
The bgsound element*
The <bgsound /> tag, like embed is used to include sound on your page. Unlike embed it can provide continuous background sound. The loop attribute controls how often the sound repeats (loops). Value of "-1" indicates indefinite looping, "0" indicates one, "2" indicates two and so on.
<bgsound
src="media/The Microsoft Sound.wav"
loop="-1"
/>
Click the Repeat Sound Indefinitely button to hear the sound over and over. Click the Play Sound Once button to hear the sound only once.
Source code (JavaScript)
<script type="text/javascript">
//<!--
function loopOnce() {
oBGSound.loop = 1;
oBGSound.src = oBGSound.src; // reload sound
}
function loopContinuously() {
oBGSound.loop = -1;
oBGSound.src = oBGSound.src; // reload sound
}
//-->
</script>
</head>
<body>
<html>
<bgsound id="oBGSound"
src="media/The Microsoft Sound.wav"
/>
<button onclick="loopOnce()">
Play Sound Once
</button>
<button onclick="loopContinuously()">
Repeat Sound Indefinitely
</button>bgsound is a Microsoft extension to HTML
Audio hyperlinks
Here is an example of audio in the hyperlink element.
<a href="media/freedomatmidnight.mid">
Listen to Freedom at Midnight by David Benoit
</a>
Listen to Freedom at Midnight by David Benoit
Video hyperlinks
And an example of video in the hyperlink element:
<a href="media/SAMPLE.AVI">
View Microsoft demo video clip
</a>
View Microsoft demo video clip
Embedded video
The <embed> element can be used for most multimedia formats. Like audio, video can be placed on your page for visitors to use or ignore. By changing the autostart attribute to "true" a video sequence can be made to start automatically after the page is loaded.
<embed src="media/SAMPLE.AVI"
autostart="false"
hidden="false"
loop="true"
align="left"
/>
Download time is one difficulty with the embed element. Video documents that are embedded will always be downloaded when pages are downloaded. Consider putting the visitor in charge of deciding on long downloads by using video hyperlinks.
Multimedia exercises
Audio media. Using the Windows file-search application available in the Start menu, locate "*.wav" on your computer. Write down the path and name of one of the files you locate. Create a new XHTML page named EX3-Multimedia.html and markup the embed element to play the sound. This will be an exercise in multimedia and relative referencing. Test and validate. Your test will be successful if you can play the sound. Your Validator experience should reveal that the embed element is not sanctioned by W3C for XHTML transitional. Change the embed markup to a hyperlink. Save the changes, test and validate. Do not upload to the Web server since this would be making a copy of the file without permission.
Video media. Using the Windows file-search application available in the Start menu, locate any video by searching for *.avi. Write down the path and name of one of the files you locate. Repeat the audio media exercise by adding your markup to the EX3-Multimedia.html file. Test and validate. Do not upload to the Web server since this would be making a copy of the file without permission.