|
|
|
 |
 |
|
 |
|
 |
|||||||||||||||||||||
 |
Lab #5Links5.1 The Anchor TagThe anchor tag (<a>) provides us with the ability to link from one document to another on the World Wide Web. When you think about it, the anchor tag makes the web possible, since it permits us to create a virtual web of documents.To use the anchor tag (and create a link in our document), we surround the link's text with the <a> and </a> tags. The opening anchor tag must also contain the href attribute specifying the location of the destination document we are linking to. Thus, an anchor tag takes the form of: <a href="URL of destination document">link text to display</a>For example, if we wished to create a link to the web site at Virginia Tech, we would use the following: <a href="http://www.vt.edu">Virginia Tech's web site</a>This would result in a link such as: Virginia Tech's web site. Note that when specifying the URL of the destination web site, we included the http:// part of the URL to correctly specify what we are linking to. Technically, we can specify a variety of communications protocols in a URL (like http, ftp, and others), so it is a good idea to be clear which protocol we would like to use. This particular example links to a site that is not part or our network or web server (and is known as an external link). To link to a page you create (that is served from your web server), we remove the http:// and address of the web site, and simply put the name of the document as the link destination in the href attribute. Thus, if we wanted to link from our Cat Window Lounger page to the main page of our site we could simply create a link that looks like <a href="main.html">Return to home</a>and place it in the Cat Window Lounger's web page. We are going to take advantage of links now and grow our web store! We will create several more web pages of products, as well as an "entry page", or "home page" for the front of the store. The new product pages will look similar to the existing product page we have already created (but with new products listed). We'll add links to each of the product pages to return us to the "home page" for the store, and similarly, we'll use links on the "home page" to provide access to each product. The code below is from our new "home page" for the store. A screen capture of the result can be seen in Figure 1, while in Figure 2 we point out one of the new links on the product page. <html>
5.2 Internal LinksLinks don't always need to point to other web page on the World Wide Web or to other pages on the same server. You can create a link that points to a specific location within the same document by using a pair of anchor tags. First, to define a location in a document which will be the destination of a link, we use the anchor tag to name the location. For example, if we wished to create a named location for Section 5.4 of this web page, we could use the following HTML:<a name="section5_4">5.4 Link Attributes</a>Generally speaking, browsers will display links as blue underlined text (so that it is recognizable as a link to the user). Named link targets (as we defined above) are not displayed as links, but rather are hidden to the user. However, to reference this named location, we do need to create a link that the user can click their mouse on. To do this, we'll use the href attribute to specify the named location, however, the name will be proceeded with a # character. For example, to link to our named location for Section 5.4 we would use the following: <a href="#section5_4">jump to Section 5.4</a>Now, when the user clicks the link that says "Section 5.4", the browser will display the portion of the document which was named "section5_4". We can take this one step further. We can reference a named location in another document by specifying the document name followed by the name location in the href attribute of an anchor tag. Thus, to link the Section 5.4 location from another web page we would type: <a href="lab5.html#section5_4">jump to Section 5.4 of Lab 5</a>
5.3 Images as LinksNearly any part of a web page can be the basis of a hyperlink. In fact, everything that is between the opening and closing anchor tags can be turned into a link. One popular example of this is using images as links. You can create a link that is an image by embedding the image tag inside of the anchor tag.By default, an image will have a one pixel border around it, when when rendered as a link will generally be blue. However, if we use the border attribute of the image tag, we can control the thickness of the border to help enhance it. We can even turn off the border all together to hide the link. The table below contains several examples of the logo used on the main page for our store, each linked to the main page of the store.
5.4 Link AttributesThere are two other attributes for the anchor tag we should introduce as well. The first is the target attribute. We'll use this attribute extensively when we cover HTML frames, but you can start to use one aspect of this attribute right away. If we include the target="_blank" attribute value in a anchor tag, a new browser window will appear with the contents of the linked page (once the user has clicked on the link). Many web sites use this technique to keep one browser window on their site (the original window), while permitting the user to "click through" to another site.In the HTML code fragment below, we have modified the links to the external web sites on our main store page such that when a users clicks on these links a new browser window is opened. <center><b>Our Favorite Links</b></center>The other attribute to note here is tabindex. By providing the anchor tags on a page with this attribute (and a number between 0 and 32767), we can control the focus order that each link receives. This concept is important to people with disabilities who browse web pages. Since not every uses a mouse, most browsers will support more than one method of clicking on a link. For example, many browsers will allow the user to hit the Return or Enter key to follow a link. By tapping the tab key, we can "visit" each link in the sequence defined by the tabindex attributes and then hit the Return or Enter key to visit the link. In the example below, we have reorganized the links on our main web page so that the tab sequence is now from the last link on the page to the first (bottom up). Note that neither the target or tabindex attributes provide instructions on changing how the link is displayed in a user's browser. Any changes to their display would be browser specific. <hr width="75%">
5.5 Absolute vs. Relative LinksFinally, we should say something about links to documents served by the same web server. Generally speaking, it may be better to organize our web pages in directories. Up to this point, we have assumed that all of your web pages (and images) are all contained in the same directory location on your computer (or web server). If you look closely at the underlying source code for these web pages, you'll see that we created a subdirectory named images, where we store the images used in our examples.Despite how we organize our files, we can access them as links or images in our HTML by using relative path names to our files. For example, we might want to create a products directory which stored the web pages for our products, and an images directory for all of the images for our web site. We can create these directories and place them in the same directory that contains the main page (main.html) for our web site. This would result in a file system that appears as: (Some directory holding our main page)Then, from within main.html, we can link to our products pages with a href attribute that appears as: <a href="products/catLounger.html">Note that we did not preced the products directory with a forward slash (those were shown above to indicate that they were directories in our file system). This is known as a relative link. That is, we linked to a file via a reference that is relative to the page that the link is contained on. Similarly, a link from the Cat Window Lounger product page can contain a relative link to the main page with an anchor tag such as: <a href="../main.html">Again, the web page specified in the href attribute is a relative link to a file located in the directory above the directory which contains the product web page. An absolute link is a little more tricky and implies that you know something about your web server. Absolute links point to web pages which are stored in directories relative to where all of the documents reside. This special location is known as the Document Root. For example, your web server may have the Document Root pointing to the directory C:\WWW\Files, and your web pages may really be located in the C:\WWW\Files\Students\YOURNAME directory. If you wished to link to a file named introCourse.html in the directory named C:\WWW\Files\Courses, you can use an absolute link such as: <a href="/Courses/introCourse.html">Here, the absolute link points to a file located in the Courses directory which falls under the Document Root directory (C:\WWW\Files). Don't worry that the slashes don't point the same way, the web server will take care of that. (Windows and UNIX computers use different directory separation characters, but the web servers can distinguish your intention no matter which way your directory separation characters point (forward or backward slashes).
About the labs: These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis. ISBN: 0-7637-1760-6 Lab content developed by Pete DePasquale and John Lewis. |
 |
|
 |
 |
|
|||
