Linking Your Pages Together


Although the World Wide Web is a fairly recent development, the idea for linking relevant pieces of content together to allow for easy navigation isn't a new one. In fact, it was originally proposed back in 1945 by Vannevar Bush. Bush was a distinguished scientist and scholar, serving as Dean at the school of engineering in MIT, chairing the President's National Defense Research Committee, and being a central figure in the development of nuclear fission and the Manhattan Project. He was also an inventor who recognised the limitations in the way that information was accessed – as the amount of information grows, there needs to be a way of simply relating one piece to others. To solve this problem, he described a machine called The Memex that would help someone find information based on association and context rather than standard categorical indexing. Without hyperlinks, we wouldn't have websites as we know them – all we'd be capable of developing is individual pages. Whenever we wanted to navigate from one page to another, we'd have to type in the new URL in the address bar, and displaying such links would break up the flow of text.

HTML Anchors

HTML anchors are the basis for linking between web pages, relating them to each other and making it easier for a user to find the information they're interested in. There are several options we can make use of, and parameters we can vary, when we use anchors to add extra functionality. To start with, we'll keep things simple, before looking at the other features available to us shortly.

Try It Out—Using HTML Anchors

To show how we can make use of anchors (links) in our applications, in this Try it Out we'll create a homepage for the Cornflakes at Midnight site. This page will link to all of the pages that we're going to create in our site, such as the discography we've created in the previous couple of chapters, a biography of the band, and so on.

  1. Within Web Matrix, create a standard ASP.NET page called Default.aspx.

  2. Making sure that the HTML Elements tab is selected in the Toolbox, drag an Anchor control onto the page. Select the Anchor text that has appeared, and type Discography. Then from the Properties window on the right, change the href property to Discs.aspx, and the title property to View Discography.

    click to expand

  3. Click the Start button from the top toolbar to view our page, and when the browser window opens, you'll see the hyperlink appear in the top left. If you click on it, the browser should navigate to the Discs.aspx page (as long as it is in the same folder as Default.aspx), showing all of Cornflakes at Midnight's albums. The Discs.aspx page is included in the code download for this chapter.

How It Works

When you drag an Anchor onto the page, three things are inserted into the underlying HTML. The first is the text that is shown on the page, Discography in our case. The other two are a pair of opening and closing tags, <a> and </a>. If you look at the HTML view of the page we created, you'll see the following:

<a title="View Discography" href="Discs.aspx">Discography</a>

The href part is the most important attribute that has been specified in this tag; it is this that tells web browsers what to do when the text enclosed within the link is selected. When we're in the Design view, the Web Matrix environment acts a bit like a web browser, interpreting the <a> tag, and displaying the text in a different color to show that it is a link. The other attribute, title, displays a tool-tip when you hover over the link with a mouse (only when the page is properly browsed – this won't happen when you are working in design view). It is important to include this attribute for the benefit of visually impaired readers, who use tools such as screen-readers to browse the web. When a screen reader reads this attribute, it will read out the title attribute, informing the user where the link will take them if they click it.

Folder Structures

In the example above, we linked from our homepage for the Cornflakes at Midnight site to another page located in the same folder – the Discs.aspx page. However, web sites are regularly split across several folders in order to separate files of different types, to help make the files more manageable, or for security reasons. When we need to link to a file in one of these folders, we obviously need a way of specifying a path to get there.

Try It Out—Referencing Other Paths

In this Try it Out, we'll see how to reference files in other locations, and how these references are used for all types of files, not just hyperlinks.

  1. Open up the Default.aspx page, and make sure that you're in Design view. At the top of the page, enter the text Cornflakes at Midnight, select it, and choose the Heading 1 option from the toolbar at the top left-hand corner of the screen. This will be the title of our page, and your page will look like this:

    click to expand

  2. Beneath this title, drag and drop an Image control from the HTML Elements tab of the Toolbox. With this image selected, change the value of the src property to Images/bandphoto.jpg. Also, change the alt property to Photo of the band:

    click to expand

  3. Now, when you run the page, you will see the photo of the band rendered in your browser.

How It Works

In a similar way to the Windows folder system, websites can contain folder structures to physically (and logically) separate and group files. To see the folder structure of your local machine as an example of the tree structure that folder hierarchies create, click on the + symbol next to one of your drives in the Workspace panel in Web Matrix – this will display the folder tree on your local machine.

On a website, when we reference a file that is in a different folder from the document calling it, we must provide the necessary information to locate this folder. In the example above, this was relatively simple, as the bandphoto.jpg image was just in the Image subfolder of our current folder, requiring only the folder name, the file name, and a slash (/) character to separate the two. Depending on the location of the folder, other techniques may need to be used, as presented in the table below:

Path

Referencing Method

Description

Subfolder

FolderName/FileName

This is the simplest form of referencing a file, as shown in the example above. The FolderName precedes the FileName, separated by a slash (/) character.

Parent folder

../FileName

If, rather than accessing a file that exists in a subfolder of our current location, we want to access one higher up the folder tree (the parent folder), we must use the .. symbol. This specifies "go up one folder". If we want to go up more than one, we can specify this multiple times. For example ../../ will take us up two folders.

Root folder

/FileName

Sometimes it's simpler to navigate down the folder structure from the top, rather than going up to the parent folder first. To do this, we must prefix the path we're interested in with a slash character.

Important

The referencing of files on the Web is always done using a slash (/) character, rather than the backslash (\) character used in Windows file paths. Although Internet Explorer can accept locations specified in either manner, other browsers may not locate files in paths with backslash characters.

The items in the table above can be combined to reference any local path. We'll show this using the folder structure below as an example:

If the file that we were working on existed in the Files folder, and we wanted to reference a picture in the Images folder, we could specify either of the following two paths:

../Images/FileName /Images/FileName

The first of these would take us to the directory above (Root), and then down to the Images folder. The second would take us straight up to the root (which also happens to be Root), and then back down to Images. If, instead of the Images folder, we wanted to reference an image in the Photos subfolder, we could append another folder name to either of the paths above, again separating them with a slash character:

../Images/Photos/FileName /Images/Photos/FileName

Linking to Other Sites

When we were looking at path structures above, we were using what are known as relative links. This is where all file and folder locations that are specified are given in relation to our current folder. As well as specifying files in this manner, we can also specify paths in absolute terms, as shown below.

Try It Out—Referencing Absolute File-paths

  1. Once again, open up the Default.aspx file within Web Matrix in Design view. Between the photo image and the Discography link, insert the text Contents, and set it to be Heading 2 (from the menu on the toolbar, as we did before). Beneath the Discography link, insert another Heading 2 item, this time named Links. These will be the section headings on our homepage.

  2. Beneath the Links item, drag another Anchor link onto the design canvas from the HTML Elements tab of the Toolbox. The text for this should be changed to Our favorite book, the href property should be set to http://www.wrox.com/books/1861007922.htm, and the title property should be Beginning Dynamic Websites. When this is done, the properties and page should appear as in the screenshot:

    click to expand

  3. Press the Start button on the toolbar to show the page. When the Our favorite book link is clicked, Internet Explorer will navigate to the correct page on the remote Wrox site.

How It Works

Unlike relative file paths, absolute file paths do not require (or expect) any knowledge of the current location to work. As a result of this, they must specify the exact URL required. This not only means that by definition they cannot begin with a / character or contain the parent folder reference (..), and they must start with the http:// string. If this wasn't done, and the URL specified was www.wrox.com/books/1861007922.htm, then the browser would try and find the file in a folder named www.wrox.com within the current folder – it assumes it to be a relative path.

It's worth noting that there are advantages and disadvantages to both relative and absolute linking. As absolute linking requires the entire URL to be provided, if a site is moved to a different domain name, such as from www.myDomain.com to www.myOtherDomain.com, all of the links will require altering to point to this new location. However, if you always try to use relative links, then not only can it sometimes be difficult to see where they are linking to if many parent-folder (..) references are made, you can obviously only link to certain (local) resources.

Default Pages

In the examples above, we've linked to specific files, whether they're on our local site (in the case of Discography.aspx and BandPhoto.jpg), or on a remote server (in the case of the book's page on the Wrox website). It isn't always necessary to link to a specific page on a site though, we can sometimes just link to the folder containing the files. Depending on how the server has been set up, this can present us with several different options, as we'll find out.

Try It Out—Linking to a Default Page

In this Try it Out, we'll add a link to a couple more of Cornflakes at Midnight's favorite sites, this time making use of default files for sites and folders, allowing the remote site to determine the appropriate page to display.

  1. As before, open the Default.aspx file in Design view in Web Matrix. Beneath the Our favorite book anchor, drag and drop another Anchor element. The text of this should be set to Our favorite search engine, with the attributes for href and title set to http://www.google.com and Google respectively.

  2. Repeat step one, dragging another Anchor onto the page, beneath the first. This time the text should be set to A page that doesn't exist, the href should be http://www.microsoft.com/noSuchPage/, and the title should be No such page.

  3. Save the file and press the Start button in the top toolbar to view the page. When either one of these two newly created links is selected, not only will we now navigate to the site that we want, the default document will also be displayed for that site:

    click to expand

  4. If you look at the address bar in the Internet Explorer window that has been opened (and in the screenshot on the previous page), you'll see that we're explicitly specifying the Default.aspx document to be viewed. If you edit this address, removing the filename so that all that is shown is http://localhost:8080, and then press Enter to navigate to the URL, you should see that exactly the same page is displayed; Default.aspx is already a default document for our site.

How It Works

Default documents can be created for folders. When this is done, as well as being able to navigate to the file explicitly, the file will also be displayed if only the folder name is given. Microsoft's web servers (IIS and Personal Web Server) automatically treat certain files as default files without any configuration changes being made. In the preferred order, these are:

Default.aspx Default.htm Default.asp index.htm iisstart.asp

So, if both a Default.htm and Default.aspx file are specified, the Default.aspx file will be the one returned to the user.

As well as being able to display default documents, web servers can also display error pages and directory listings. These are shown when the specified file or folder doesn't exist, or no default document can be found for a folder. If we click on the No Such Page link, we'll be taken to the Microsoft page, and as the folder we gave doesn't exist on that server, a standard error page will be shown:

click to expand

In the case of directory listings, details of all of the files and subfolders within a location are given, along with hyperlinks to navigate to them. If the Default.aspx file that we'd created weren't treated as a default document, or if it were deleted, then a directory listing, similar to the screenshot shown would be displayed:

click to expand

Depending on the web server that is being used, the settings that have been applied, and so on, several different results can be returned to the user if they try browsing to a folder without specifying a particular file. These are summarized below:

Result

Description

Desired page is displayed

A default file has been specified for this folder, saving the user from having to specify the exact file desired.

List of folder contents is displayed

Directory browsing has been enabled, listing all of the contents of this folder. This usually allows the user to click on hyperlinks to each of the files in the folder, again removing the need for typing in the exact filename.

Permission denied message displayed

No default files have been set, and directory browsing is disabled. This message is often displayed by Microsoft web servers.

File not found message displayed

No default files have been set, directory browsing is disabled, and no permissions have been set. This message is usually displayed by web server software that is running on a platform other than Windows, for instance an Apache web server running on a UNIX variant.

Pop-up Links

In the previous example, we linked to two external locations (www.google.com, and a Microsoft page that didn't exist). When any of these links was clicked on within a web browser, the URL was navigated to within the current window. While that is probably desired when we're linking to a page within our site, if we're adding a reference to an external site, we may well want to allow the user to continue browsing our site, and view the referenced page/site separately.

Try It Out—Creating Pop-up Links

In this Try it Out, we'll edit the three external links that we've got, specifying that they should all be opened outside the current Internet Explorer window.

  1. Open the Default.aspx document in Design view once more from within Web Matrix. Select the first link (Our favorite book), and alter the target attribute in the Properties pane to ExternalSite.

  2. Repeat step one for each of the other two external links (Our favorite search engine and A page that doesn't exist), setting each of their target attributes to ExternalSite too.

    click to expand

  3. Click the Start button on the toolbar, and wait for the page to be displayed within your browser. If any of the bottom three links are now clicked on, it will open in an external window. You will notice that these all open in the same "new" browser window, however. Switching back to Web Matrix, we can change this so that each opens in an entirely new window. Selecting each of the links in turn, edit the target property, appending 1, 2, and 3 to the value respectively, so that we have targets of ExternalSite1, ExternalSite2, and ExternalSite3.

  4. When the Start button is clicked now, and the page is shown again, each of the links will now open in a different window when clicked on. If any of them is clicked twice, however, it will be displayed in the same window that is first created for it each time.

How It Works

When no target attribute is specified in a hyperlink, the page is opened within the current Internet Explorer browser window by default. This is usually the case with other browsers too. However, there is no rule stating that other third-party browsers shouldn't open all links within new windows. If we want to specify that a window is always opened within a new window, then we can specify a name for that window within the target attribute. The value for the window name should not contain any spaces or punctuation, other than the underscore character (_).

For each unique name that is specified on a page, all links targeting it will be opened within that window, navigating away from any content that was previously displayed there. If we want the page to ensure that this never happens, and that the page opens in a totally new browser window each time, we can specify _blank as the target (note the use of the underscore). This target is a special value that is understood by all commonly used browsers, including Internet Explorer, Opera, and any of Netscape's offerings.

Important

When specifying target window names for hyperlinks, the following values are reserved for special functions: _self; _parent; _blank; _new. In turn these open the link in the current window, the window that opened the current one, a new window, or a different window (which may override a previously opened one). If any of these values is entered, then it will always open in one of these predefined ways.

How Web Servers Process Files

So far in this chapter, we've dealt with linking to two types of files – web pages, and images. From just these two, we can see that content is dealt with differently depending on its type. When a web page is returned from the web server, the HTML that it contains is interpreted and rendered in a browser window as a document containing links, tables, etc. If the file is an image file (not a web page that displays images, but an actual image file itself), then it is treated differently, being rendered as-is to the page without being searched for HTML tags as a web-page would be. Depending on the file type, other actions can be taken, too. It's important to note that no matter what the type of the file, it is transmitted to the browser in the same way, and referenced in an identical manner on a URL.

Try It Out—Dealing with File Types

We'll now add an extra page to our website where visitors can download samples of the "music" Cornflakes at Midnight have recorded. We'll create a new page and add links to allow them to select what format they'd like to download the music in to do this.

  1. In your Default.aspx page insert a link (an HTML Anchor element) beneath the Discography called Downloads, just as we've done before. The target of this anchor should be Downloads.aspx.

  2. Create a new ASP.NET Page called Downloads.aspx. This file will contain the links to each of our downloadable files. When this file opens, insert a Heading 1 title of Downloads (in a similar kind of way to how we did earlier in the chapter) at the top of the page. Beneath this, drag and drop two HTML Anchors. The first of these should have a href of Files/Sounds.wma, the second should be set to Files/Sounds.zip. Also, change the text of the two anchors so that they match the following:

    click to expand

  3. Save the file, and click the Start button in the toolbar. When the page is displayed in Internet Explorer, you should see different things happen when each of the links is clicked on. The ZIP file will always present the user with a dialog, asking whether the file should be opened or saved to disk. The WMA link behaves differently from this however. Internet Explorer presents a second dialog – stating that it recognizes the audio/video link that was clicked on. The option of playing the file in Internet Explorer is then given. If this is selected (by clicking the Yes button), the Media bar will be shown at the side of the screen, and the music will begin to play.

    click to expand

How It Works

When a file is transmitted to a web browser from a web server, it contains extra information in addition to the file itself. One of the items that are included is the type of the content (known as a MIME Type), which is represented as a string in the form Type/SubType. The content type string returned is calculated by the web server based upon the file extension. So, if a file with an extension of .htm or .aspx is detected, then the content type of text/html will be returned as the web server knows that this is a web page. Similarly, if a file with a .gif (Graphics Interchange Format) extension is found, the content type of image/gif will be returned.

So, if we renamed our Cornflakes.wma file to Cornflakes.htm and updated the hyperlinks to point to this, then it wouldn't be treated properly when it was returned to the browser; we'd see a load of garbage representing the data contained in the file displayed in the Window. If you like, you can try this out to see; just remember to change everything back again once you're done! As well as being used to control the content type that is sent down to the browser, the file extension is also used by the web server to determine what to do with the file before sending it across the web. In the case of most files, nothing at all is done. The main exception to this is with .aspx files – those that contain code that needs executing first. As with the WMA file, you can try renaming one of the .aspx files that contains server-side code (for instance Discography.aspx) so that it has an .htm file extension. When this URL is now requested in Internet Explorer, you'll see that any source code that was on the page (such as that for creating a DataGrid) is now returned.




Beginning Dynamic Websites with ASP. NET Web Matrix
Beginning Dynamic Websites: with ASP.NET Web Matrix (Programmer to Programmer)
ISBN: 0764543741
EAN: 2147483647
Year: 2003
Pages: 141

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net