Linking Pages

The Anchor Tag

Linking pages in a Web site is rather simple; all that is needed is an anchor tag. The anchor tag establishes a link that, when clicked takes the user to the other page. This tag is a container tag with clickable content within the beginning and ending tags. Then an href property (hypertext reference) needs to be added in order to supply the link's destination in the form of a URL. For the link to work the file must be placed in the same folder as the Web page. An anchor tag is an inline tag so it resides within a block element. In Dreamweaver a relative link is created by pressing Ctrl+L.

Internal and External Links

There are two types of links:

1. Internal links which lead to pages or devices (ie. downloadable files) in one's Web site.
2. External links which lead to pages or resources in other Web sites.

To establish an internal link a relative URL needs to be used so that the browser can locate the target page relative to the current folder. The browser is given instructions to locate the new folder and then moves up or down from the current folder. Moving down indicates moving from the parent folder to a subfolder whereas moving up indicates moving from a subfolder up to the parent folder.

There are also absolute URLs that include the entire URL (the domain name, folder and page). Absolute URLs are used to create external links.

Relative URL should be used to establish internal links. The links are shorter making the HTML easier to read and sustain. Relative links are also more flexible so that they can be moved around without breaking the link. The links can also be tested on the web designer's computer and the links will work in the same manner as they will online.

Changing Link Color Utilizing Style Sheets

Typically links are colored blue and underlined in Web sites and when the links are clicked they turn red in color. The most effective way to change link colors is to use a pseudo-selector in one's style sheet. There are four kinds of pseudo-selectors:

1. :link - for links that have not been clicked yet and viewed by the user.
2. :visited - for links that the user has already been clicked and viewed by the user.
3. :active - the color the link turns when the link is clicked and before the page appears.
4. :hover - the color the link turns when a the mouse is moved over the link.

All pseudo-selectors begin with a colon (:). If one would like to apply a rule to only some of your links, a class name is used with the pseudo-selector rule. An anchor tag is needed to establish the class in order to apply the style.

Navigation and Frames

Frames are a strategy used by web designers to keep a user open to their web site when an external link is clicked. A new browser window will open within the designer's site. The user will not be taken away from the web site as normally occurs when a visitor clicks an external link. this is all done by utilizing frames. Frames can allow the visitor to be taken to a particular section of the a web designer's site or to a new window.

To create a frame all that is needed is an attribute in the anchor tag which names the destination of the page to be displayed. When the value _blank is added, it specifies that a the page should open in a new frame.

Frames should not be used too often because many people find them annoying and certain pop-up blocking software will keep the frame from opening.

Relative Links and Folders

One's Web site is better organized if groups of related pages are kept in separate folders. The root folder or the point where your Web site begins, is where all the content is located (files and folders). This is where the default page (titled index.html or index.htm) is located. If the index.html page is linked with another page are located in the same folder all that is required is a relative link.

Moving down into a subfolder

To create a relative link to connected to the index.htm page to a page located in a subfolder, the subfolder name needs to be included in the relative link. The link will give the browser two instructions:

1. Go to the subfolder.
2. Get the page.html.

The link's folder name and the file name are separated by a slash (/).

Relative paths can also be used with additional HTML tags, such as the image tag and the style tag.

Additional subfolders of subfolders can be added in the same way; however, the folder name and a slash needs to be added for each additional subfolder.

Things to Keep in Mind:

• Links are always relative to the current page.
• Relative links always begin at the current folder and move up or down to the folder containing the target page.
• When using subfolders one should not change folder names or change the locations of folders although Web page editors can make up for the these changes.

Moving up into a parent folder

To move up a folder level a two periods and a slash (../) are used. The command ../../ links one two levels up.

Moving into the root folder

The only issue related to using relative links is that there are problems maintaining the site if anything gets rearranged on one's Web site. Many HTML editors save one the trouble of updating links; all that is required is dragging the file to a new location and the HTML editor updates everything. An additional way of dealing with this issue is to keep all the related links within the same folder, this way everything is moved as a unit. Root-relative links can also be used.

Root-relative links differ from document-relative links in that instead of being based on the current location of the document it is based on the root folder of the Web site. Root-relative links begin with a slash / to indicate the root folder. Web browsers remove the path and file name information leaving only the domain name. The relative link is then added to the end. If one does not own their domain name then the root of the Web site is the name of one's own personal folder.

Rules for Relative URLs

• URLs must start a protocol (typically http://).
• Do not confuse the backslash (\)with the forward slash (/). The backslash is used for paths on the Windows platform. The forward slash is used to divide subfolders on the Web. If a backslash is used instead of a forward slash on the Web the result will be a broken link.
• File paths should never be used instead of a URL. The file will only point to the computer the file is located on and others viewing the site will not be able to do so. Note that HTML design software can at times insert a file path when one drags and drops a file into their Web Site. Diligence in checking links is a must for this reason.
• Special characters or spaces should never be used for folder or file names. Browsers will translate a space into a strange character code and will not display properly. Numbers, letters, dashes (-) and underscores (_) are okay to use.

Linking to Other Types of Content

The majority of links will point to HTML Web pages. One can also create different links to other file types. The only issue is that a browser determines if a person is directed to a particular file.

Some Examples Include:

• Links to JPEG, GIF or PNG image files. The linked clicked will take the person viewing to a new browser window with the image displayed. This type of link is often used when the graphic is particularly large for instance in a page with thumbnail images. The smaller image is clicked and a new larger detail picture appears in a new window.
• Links to specialized files such as PDF files, Microsoft Word Files, audio files (WAV or MP3) or video files (Adobe Flash files, mpeg (.mpg), QuickTime, Windows Media (.wmv)). The links depend upon a browser having a plug-in that identifies that specific file type or the user already having that type of software already installed on that person's computer. If neither is available the user will only be able to download the file but not be able to utilize it.
• A link can be created to a file that the web designer wants others to download. If a viewer does not have the proper plug-in the viewer will be directed download it. The viewer then has the choice of viewing the file with that program, utilizing another program to open the file or disregard it. This type of link is excellent for sharing large files.
• A link to an email. This type of link is used so that someone viewing your site can send an email to you directly. The link when clicked will open to the viewer's email program with your email address in the to portion of the email.

Image Links and Image Maps

Images can be turned into links by placing an image tag inside an anchor tag. Linked pictures have a thick blue border indicating that it is a link. This border can be changed by modifying the style sheet border properties or inserting a border property with a setting of zero. The mouse will change to a hand indicating that this is a clickable link.

There are times when only a particular portion within an image is clickable. This is called the hotpot within a picture. A hotspot is created with an image map utilizing the map tag. The image map is given a distinct name. Within the map tag the hotspot or hotspots need to be defined by adding an area tag. The hotspots never should overlap and each hotspot must be named within the image tag. The area tag defines three significant details:

1. The target page the link is attached to (the href property).
2. The hotspot's shape (the shape attribute).
3. The exact dimensions of the shape (the cords property).

The shape attribute supports three types of shapes:

1. Circle (cir)
2. Rectangle (rect)
3. Mult-edged shapes (polygon)

Coordinates are needed to define the hotspot in the shape chosen. Coordinates are defined by listing numbers separated by commas.

Circle Coordinates:

• center point (x-coordinate)
• center point (y-coordinate)
• radius

Other shapes are defined by a series of x-y coordinates.

Rectangle Coordinates:

1. Top-Left Corner
2. Bottom-Right Corner

Polygon Coordinates:

1. x1
2. y1
3. x2
4. y2
5. and so on

Dreamweaver has a built in hotspot editor which enables one to create an image map by dragging shapes over a picture with a mouse.

After the hotspot is added the usemap property needs to be added to the image tag. The usemap begins with the hash (#) character and is followed by the map name.

Hotspots are invisible to the surfer except when the pointer of the mouse hoovers over the link when it changes to a hand.

Links can be created to send a viewer directly to a particular portion of a Web page called a fragment. This type of link is established using a two-step process:

1. The fragment must be identified by embedding a marker just before the fragment you would like to send the viewer to. This marker is called a bookmark. A bookmark is created using an anchor tag without utilizing a href attribute (since the anchor will not lead anywhere). A name property is supplied using a descriptive name for the bookmark. Text can be added inside the anchor to make it easier to place the bookmark into a specific word or title.
2. A URL which point to the bookmark needs to be created with the bookmark information attached to the end of the URL. The bookmark is defined by a number sign (#) followed by the bookmark name.

There can be problems with a bookmark located towards the bottom of a page. It may not lead the surfer to a bookmark located at the very top of that page. It may appear in the middle of the browser. To fix this problem, a few line breaks can be added at the end of the document allowing the browser to scroll down further.

A page name is not needed for a bookmark if the link points to the current page. The link will begin with the # sign followed by the book mark name.

Bookmarks generally are used when the Web pages are large and require a great deal of scrolling.

When Good Links Go Bad

Links can break when folder or file names are changed or when folders or files are moved. External links to other Web site are prone to breaking because there is no control over the files and folders of someone else's sites. This is when error messages occur. Link rot is the term Web developers use when referring to broken links.

There are two ways to reduce the occurence of broken links:

1. Constantly test your internal links to verify that all the links within your Web site lead where they are supposed to. HTML editors have tools that can be utilized to test internal links.
2. Although it is impossible to control external links there are ways to lower the occurence of them. The best way is to frequently test your Web site with a link validator; which checks all the links (both internal and external) on every page of your Web site.

Site Management

Numerous HTML editors include site management tools that can be used to see the whole Web site; showing where all the links on your site lead.

Link Checkers

A link checker is a tool used to verify that all your Web sites links are in working order; that they point to the page they are supposed open; this page is called the target page. Some link checkers validate only internal links whereas others check both internal and external links.

Dreamweaver's link checker is intricate and is really good at finding problems. To perform a link check simply click: Site --> Check Links Sitewide.

There are also free online checkers like The World Wide Web Consortium's http://validator.w3.org/checklink

Using Redirects

Making any kind of changes to your Web site pages and folders could result in broken links for other people's Web sites that have links to your site. If a change does need to be done then redirects help. Redirects are instructions that notify the browser to navigate to your new page. They are particularly useful when reworking the structure of your existing site. The redirect also informs a surfer that the link is out dated.

A redirect is created by inserting a meta tag into the head portion of your Web page. An absolute URL followed by the number of seconds to redirect the user is also included in this tag.