Getting Connected with (Hyper)Links: The
Cornerstone of the World Wide Web
What You’ll Learn in This Hour:
. How to import a new page and link to it
. How to create links between pages on your website . How to create links to other websites
. How to create links that open in new windows . How to create bookmark links within your page
Hyperlinks (also known simply as links) are an integral part of any website. Hyper- links work as both navigational tools within your website and pathways to further resources in your network or on the World Wide Web. They can also perform actions such as opening an email program and sending commands.
The hyperlink, in its basic form, appears on a web page as a colored and underlined segment of text with a web-page address attached. When you click the text, the browser goes to that new page. However, hyperlinks don’t have to be only text. You can attach them to images and behaviors, and even empty areas within a web page.
By knowing the capabilities and limitations of hyperlinks, you can build intuitive, functional, and visually compelling navigational tools and menus to make it easy for visitors to navigate and interact with your site.
ptg7913109 For the most part, you use hyperlinks to navigate within your website or link to other
websites. But, you can also use hyperlinks to give visitors access to other types of files, such as documents, compressed archives, and more. Although a web browser is lim- ited in the file types it can display, it can be set up to interact with other programs on your computer to handle these file types. One such file type encountered often on the Web is the Portable Document Format(Adobe PDF). If you click a PDF file, your browser asks whether you want to save the file or open it (if you have Adobe Reader or a similar PDF-capable program on your computer). Then, the browser automati- cally calls for the program to open and display the file. The same goes for docu- ments, spreadsheets, and numerous other types of files.
The two most commonly used links are internal links that point to other pages within a website and external links that point to other websites. To start this hour, you make an internal link. However, before you can do that, you need to have a new page to which you can link.
Import a New Page and Create an Internal Hyperlink
The lesson files include a file called myCameras.html. Follow these steps to import that file into your project:
1. From the menu bar, select File, Import, File (see Figure 5.1).
FIGURE 5.1 Importing a new page or other document can be done from the File option under Import in the File menu.
ptg7913109 2. In the Import dialog, click Add File and browse to the location where you
stored the downloaded lesson files on your computer.
3. Click Hour 5 and select the myCameras.html file. Click Open;
myCameras.html is now visible in the Import dialog (see Figure 5.2). If you did not complete the default.html page in Hour 4, “Building a Home Page: A Look Behind the Curtain,” or you want to ensure you are working with an identical version of the file to the one I used to write this book, I’ve also added the default.html file in the lesson file for you to use.
4. Click OK, and the myCameras.html file shows up in the Folder List panel.
FIGURE 5.2 myCameras.html file selected in the Import dialog.
Now you have two files in the My Kipple website project: default.html and myCameras.html. The next step is to link the two pages to each other with hyperlinks. Open default.html by double-clicking the filename, and then select Design view from the buttons at the bottom of the page. The first hyperlink you make is an inline link—a segment of text that links to a further explanation of the topic.
Inline links are prevalent throughout the Web and are just as useful as menu links because they mainly point directly to highly relevant information or further read- ing. For example, whereas a menu link might be generic and titled something such as “Norwegian Mythological Creatures” or “Scandinavian Christmas Tradi- tions,” an inline link would be titled “The Norwegian Nisse” with a link to a page exclusively about this mythical creature.
Did you Know?
ptg7913109 Scroll to the bottom of the page and find the last paragraph. On the second line, high-
light the words “my collection of cameras.” These four words will be the link to the new myCameras.html page. Right-click the highlighted text and select Hyperlink from the menu that appears. Doing so opens the Insert Hyperlink dialog (see Figure 5.3).
FIGURE 5.3 The Insert Hyper- link dialog can be opened by high- lighting one or more words, clicking the right mouse button, and selecting Hyperlink from the pop-up menu.
From this dialog, you have complete control of your hyperlinks. On the left, you have four options that set where you are linking to:
. Existing File or Web Page—Lets you link to a file within your current site or enter a URL to an external web page.
. Place in This Document—Lets you link to bookmarks (also known as anchors) within the document. A bookmarkis a destination within a document that can be targeted by a link. Longer documents, such as Frequently Asked Questions (FAQ) lists and registries, make heavy use of bookmarks.
. Create New Document—Lets you link to a new page you have not created yet.
You define a name for the new file and have the option to edit it right away or simply link to the blank page now and edit it later. This is useful if you build a menu but haven’t created the target pages. The reason for this option is obvi- ous: You can’t link to something that doesn’t exist!
. E-mail Address—Creates the code necessary for the browser to open the default email program on the computer and insert a recipient address and even a default subject line if you so choose.
URL stands for uniform resource locator. A URL is the web address that takes you to a web page, a file, or a specific server location. The URL to the site I built to accompany this book is http://expression.pinkandyellow.com and the URL to my blog is www.designisphilosophy.com.
Did you Know?
ptg7913109 In this case, you are linking to an existing file, so pick the first option. The Text to
Display field shows the text you previously highlighted. This text becomes the link and is visible on the page. If you change the text here, the text in the page changes as well. Directly underneath is a standard file browser window where you can find and select the file you want to link to. As you can see, the main window lists both default.html and myCameras.html.
Expression Web 4 assumes that you intend to link to other files within your web- site, so these files are the first option you get. You can navigate away from this folder and link to other files, but any file you link to should always be either inside your website folder (or one of its subfolders) or a file that is already on the Web.
Never link to a local file on your computer that is not in your website folder unless your website is only for use on your computer—the link will not work anywhere else.
Did you Know?
Select myCameras.html. Its address shows up in the Address box. The last step is to add a ScreenTip or title to the link. This is not strictly necessary for the link to work but is required if you want your site to be accessible. A ScreenTip is the title attribute for a link (a short line of text that pops up next to the mouse pointer when you hover over a link). It gives the user more information about the link. In terms of accessibility, if the visitor uses a text-to-speech browser, the ScreenTip is read out loud to tell the user that there is a link and what the link points to. To add a ScreenTip, click the ScreenTip but- ton in the upper-right corner of the Insert Hyperlink dialog. In the Set Hyperlink ScreenTip dialog that opens, typeLearn more about my camera collection and what I use them forand click OK (see Figure 5.4). Click OK in the Insert Hyperlink dialog to finish the hyperlink.
FIGURE 5.4 The Set Hyper- link ScreenTip dialog lets you add a detailed description to your hyperlinks and is necessary to make your links accessible.
The text you highlighted before is now blue and underlined, indicating to the visitor that it is a link. Save the file and test it in your browser (see Figure 5.5).
If you hover over the new link, a small box with the ScreenTip appears. If you click the link, the browser navigates to the linked file myCameras.html. However, there’s a small problem: After you get to myCameras.html, you have no way to get back
ptg7913109
▼
unless you use the navigation buttons in the browser. To address this problem, you need to create a Home link in the myCameras.html file to link back to default.html.
The new link ScreenTip
FIGURE 5.5 Firefox showing default.html with the new link and its ScreenTip.
Try It Yourself
Create a Home Link in myCameras.html
It’s important to give the visitor an easy way to get back to the main page of any website. The easiest way to do this is to create a Home link.
1. Open myCameras.html in Design view by double-clicking it in the Folder List task pane.
2. With the cursor at the beginning of the first line of the heading, press Enter once to shift the heading down one line, and then put your cursor up on the new first line. Use the Style menu to change the style of the new line to Para- graph.
3. Type the word Homeand double-click the word to select it. Then, right-click the selected word and select Hyperlink from the menu that appears.
4. In the Insert Hyperlink dialog, select the default.html file and use the Set Hyperlink ScreenTip dialog to give it the ScreenTip text Go back to My Kipple.
▼
ptg7913109 5. Click OK. Save and test the file in your browser, making sure the ScreenTip
works and that it links back to default.html.
Hyperlink Syntax: Absolute, Relative, and Root-Relative
As you create hyperlinks in Expression Web 4, you will notice that the syntax of the link address in the Code view changes depending on what you link to. There are actually three different ways of writing a hyperlink address, all of which are used for different purposes:
Absolute hyperlinksare complete addresses that contain all the elements of a URL.
They always start with some version of http:// followed by the domain name (for example, www.designisphilosophy.com) and optionally a page/folder. You use absolute hyperlinks when linking to pages outside of your current site that have a different domain name.
Relative hyperlinksare addresses that are relative to the current domain or loca- tion. They only contain the name of the target page prefixed with any necessary folder moves (for example, default.html). The browser sees that this is a relative hyperlink and adds the domain and folder location of the current page to the begin- ning of the link to complete it. If you use relative hyperlinks and you want to navi- gate from a page stored in one folder to a page stored in a different folder, you add the folder prefixes to the hyperlink. For instance, a relative link from a page in Folder 1 to a page in Folder 2 would be ../Folder 2/page.html, where the ../ tells the browser you want to go out of the current folder and into a new one. When you create hyper- links between pages in Expression Web 4, they are always inserted as relative links so that the application can easily update them if you choose to move files around.
However, if you move the files around on your computer outside of the Expression Web program, the hyperlinks break.
Root-relative hyperlinksare a subset of relative hyperlinks in which all the links are assumed to start from the root folder (domain name) of the site. They differ from the relative hyperlinks in that the address is prefixed by a forward slash (for example, /default.html). The browser applies only the domain to the beginning of this link.
Root-relative hyperlinks are used in place of relative ones in large sites where there is a chance the files will be moved around without using an application such as Expression Web 4 to update them. Because they refer to the root of the site rather than the current location of the page they are placed in, they work regardless of where the file is placed as long as they remain under the right domain.
▲
ptg7913109
Creating External Links and New Windows
Now that you have created some internal links, it’s time to link your website to other external websites. You do this in much the same way that you created your internal links, but instead of selecting a file from your computer, you go to the link’s destina- tion and find its URL to insert.
In the second paragraph of the home page (default.html) is a reference to the book Do Androids Dream of Electric Sheep?Some of the readers of this website might want to buy this book. Why not give them a link to the book’s page on Amazon.com? To do this, you first need the address. In your browser, go to www.amazon.com and search forDo Androids Dream of Electric Sheep?Click one of the search results to get to the book’s main page. Highlight the entire address in the address bar and copy it by using Ctrl+C (the universal copy shortcut). Alternatively, you can right-click the address and select Copy (see Figure 5.6).
FIGURE 5.6 Copying the Amazon.com URL for the book can be done by right-clicking and selecting Copy from the context menu.
Back in Expression Web 4, select the book title in the second paragraph, right-click the selection, and select Hyperlink as you did before. In the Insert Hyperlink dialog, select Existing File or Web Page and paste the Amazon.com URL into the Address field by clicking in the text box and either pressing Ctrl+V (universal paste shortcut) or right-clicking and selecting Paste (see Figure 5.7).
Open the ScreenTip dialog and type “Do Androids Dream of Electric Sheep?” is available from Amazon.com. Click OK twice and save the new file. Test it in your browser.
But, here is a new problem: After the visitor clicks the link, she goes to Amazon.com.
How does she get back to your site? Unlike the myDesk.html file, you can’t insert a home link in the Amazon.com page. How do you keep your visitor on your site and still let her visit other sites? One solution is to edit your link so that the external page opens in a new window.
ptg7913109 FIGURE 5.7
Pasting the Amazon.com URL for the book by right-clicking and selecting Paste from the menu.
1. Right-click the Do Androids Dream of Electric Sheep? link you just created and select Hyperlink Properties.
2. In the Edit Hyperlink dialog, click the Target Frame button on the right.
FIGURE 5.8 The Browsed Pages option gives you access to the recent browser history from Internet Explorer.
Using the Browsed Pages Option to Obtain Hyperlinks
If you don’t want to copy and paste the URL from the browser, there is an alter- native built in to Expression Web 4: The application connects to the Internet Explorer browser history, which means you can get the URL from right inside the program itself. To use this option, go to the desired target location in Internet Explorer before creating the hyperlink. When inside the Insert/Edit Hyperlink dia- log, click the Browsed Pages option (see Figure 5.8) in the main window to get the browsing history. From here, you can select any of the pages you have vis- ited with Internet Explorer recently, and Expression Web automatically inserts the URL to that page for you.
Did you Know?
ptg7913109 FIGURE 5.9
The Target Frame dialog within Hyperlink Properties lets you define where the linked page opens.
3. In the Target Frame dialog, select New Window under Common Targets. This tells the browser to open a new window (see Figure 5.9).
4. Click OK twice, save the file, and test it in your browser.
Now, when you click the link to the book, the page opens in a new window or tab in your browser. This is a basic way to make links open in new windows.
Creating Internal Links Within Documents Using Bookmarks
Another type of link you can create is a bookmark(also known as an anchor), which is a hyperlink that points to a specific position in the current page. Designers most often use this type of link to help people navigate longer web pages by providing a menu that leads to different sections. Bookmarks are also effective for linking directly to footnotes.
Before you make bookmark links, you have to insert the bookmarks in your docu- ment. In default.html, select the first subheading (Kipple: A Definition). Select Insert, Bookmark from the menu bar, or click Ctrl+G. This opens the Bookmark dialog. From here, you can set the bookmark’s name. The name becomes the address of the book- mark and is included in the hyperlink. For that reason, underscores replace all spaces (see Figure 5.10).
ptg7913109 You can change the bookmark name to whatever you want, but it’s a good idea to
keep it consistent and meaningful, especially if your document has many book- marks.
FIGURE 5.10 The Bookmark dialog lets you define a so- called “slug” for your bookmark anchor. Note the underscores between each word.
When you click OK, you see that the title now has a dotted underline in the Design view of the page. This is a visual reminder that the text has a bookmark attached and is visible only within Expression Web, not in the web browser. Follow the same process and attach bookmarks to the two other subheadings.
Now, all you have to do is make a menu with links to the bookmarks. This menu should go directly under the main heading. Make a new paragraph under the main heading by clicking the beginning of the first paragraph and pressing Enter. In the new first paragraph, create an unordered (bulleted) list. Each list item should be identical to the subheadings, like this:
. Kipple: A Definition
. Show me your kipple and I’ll tell you who you are
. Every piece of kipple has a story
Highlight the first bullet point and right-click to open the Hyperlink dialog. By select- ing Link to Place in This Document from the left-side menu, you open a list of the three bookmarks you created. Select the one that matches your title (see Figure 5.11).
As before, attach a ScreenTip such as Jump to Kipple: A Definition to keep your page accessible. Finally, click OK and save your changes.
Did you Know?