Navigation: Home Tag, You're it. Basic Markup Navigation, Anchors & Links Graphical Elements What Next?
The primary goal of most Web sites is to make their content available to the biggest possible audience. That includes supporting multiple browsers and platforms, as well as assistive technologies for handicapped users. Accessibility also makes good business sense. After all, you don't want to disenfranchise any potential readers. However, reality demands that you balance the desire to support every possible user against the time, effort, and cost to do so. You need to know the audience for your Web site and base your browser support decisions on the needs and usage patterns of that audience, rather than some generic Web demographic.
You now have a basic idea of how to create a Web page, but you're probably still wondering how you actually get that page onto the Web and what it's address will be.
This is a picture of a browser showing our index.html page at its working location on Chris' web site. The added bar shows what it would look like when the browser points to the local copy on Gary's computer. Mozilla will actually insist that you use a proper protocol such as: file:///C:/Documents%20and%20Settings/index.html the two '%20' sequences must be used to represent the space characters, since files with spaces in their names are not allowed on the internet. Limiting yourself to a lowercase alphabetic or numeric only 8.3 (eg. myfile99.htm) name for internet files saves you some trouble. This is much more restrictive than really necessary, but it's pretty much guaranteed to work. Notice again that when you point the browser at a remote directory, you don't need to specify a file name. If there's a file named index.htm or index.html in the directory, the browser will automatically display that file. If no such file exists, the browser will display a directory listing. Some systems do not allow browsing, so you may receive an "Access Denied".
This text that you type into the address bar of your browser is called a URL (Uniform Resource Locator) although purists prefer URI (Uniform Resource Identifier.) This section introduces the link (or hyperlink, or Web link), the basic hypertext construct. A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.
A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, a named element within an HTML document, etc.). You can link to a specific location on the current webpage. You can link to a different webpage on your website. You can link to a different website, or Uniform Resource Locator (URL). You can also allow people to e-mail you with just a click of their mouse.
Navigation uses two terms:The anchor tag, although it might be considered a 'Basic tag' has enough attributes to warrant its own page. We will not talk about most of them. After all, you want to get a Homepage up with some other pages, and you want people to be able to move around them, on your site. You want people to find the information they want, in a nice neat order, and not all jumbled on the homepage, right?
There are five types of linking tags.
In order to link to a location on the same webpage, you need to "name" each link using a specialized version of the <a> tag. You would use <a name="NameYouWantToUse">. Lets use the template we used in Tag, You're it. Basic Markup as an example, the addition is bold and underlined :
<html>
<head>
<Title>
My Writer's Web Site
</Title>
</head>
<body>
<!-- Let's Bold our Name -->
<b> Author's Name Goes Here</b>
<!-- Let's add a new line, as html will read each line as one BIG line -->
<br>
<br>
Let's write a short paragraph about the Article/Book/Short Story.
<table border=5 width="50%" align="center"><center>Stories I have written</center>
<th>Name of Article/Story<th>Description<th>Where can you find it
<tr>
<!-- Let's put a Named Link here -->
<a name="articles"></a>
<!-- Italicize the name of our article -->
<td><i>My First Article</i></td>
<td>This article was written when I was in 12th grade, but I enjoy it so much I think you would too.</td>
<td>Link to Article Will go here</td>
</tr>
<tr>
<!-- Italicize the name of our article -->
<td><i>My Second Story</i></td>
<td>I am still working on this, and will post it here, or the URL where it is published.</td>
<td>Not Published Yet</td>
</tr>
<table>
</body>
</html>
Now that we have at least one target location placed within our webpage, we want to have people be able to get there without scrolling. We will add the source anchor with its "href" attribute to the top of our template.
<html>
<head>
<Title>
My Writer's Web Site
</Title>
</head>
<body>
<!-- Let's Bold our Name -->
<b> Author's Name Goes Here</b>
<!-- Let's add a new line, as html will read each line as one BIG line -->
<br>
<br>
<!-- Let's put our Navigation Link here -->
<a href="#articles">Go To My Articles</a>
Let's write a short paragraph about the Article/Book/Short Story.
<table border=5 width="50%" align="center"><center>Stories I have written</center>
<th>Name of Article/Story<th>Description<th>Where can you find it
<tr>
<a name="articles"></a>
<!-- Italicize the name of our article -->
<td><i>My First Article</i></td>
<td>This article was written when I was in 12th grade, but I enjoy it so much I think you would too.</td>
<td>Link to Article Will go here</td>
</tr>
<tr>
<!-- Italicize the name of our article -->
<td><i>My Second Story</i></td>
<td>I am still working on this, and will post it here, or the URL where it is published.</td>
<td>Not Published Yet</td>
</tr>
<table>
</body>
</html>
To grasp what we just did, let's go over the changes:
Linking to another page is just as easy, except you don't use the anchor (<a name="NAME"></a>). If you took the above example and took off the original anchor we placed you could link to another page easily. Just change the link to be:
<a href="tags.html">a href="tags.html">Tag, You're it. Basic Markup</a>
Notice that instead of going to a section within the document (articles), I am now pointing to an external document (tags.html). We can name the page anything we want, BUT you need to make sure the page exists. Here is what it will look like on the screen: Tag, You're it. Basic Markup
In this case, not only does the tags.html page need to exist, it needs to reside in the same folder as your other pages. if you get fancy and start having different folders for different thoughts, you have to include THAT directory name with the tags.html. For example if you have a work directory, a play directory and you want to link from an html page in your play directory to tags.html in your work directory
<a href="../work/tags.html">Tag, You're it. Basic Markup</a></a>
(Yes, include the "../") This moves you down one directory. Without it the browser will look for a work directory inside the current directory, play in this case."../../" would move you down two directories in the chain. It can be difficult to get these correct, so you may need to experiment a bit.
Linking to another Website is very similar, except you add the full, qualifying URL (http://www.mysite.com). If you took the above example and took off the original anchor we placed you could link to another Website easily. Just change the link to be:
<a href="http://www.longridgewritersgroups.com">Longridge Writer's Group - A great place to meet fellow writers</a>
Here is what it will look like on the screen: Longridge Writer's Group - A great place to meet fellow writers. Remember to click the back button to come back to this page.
You probably noticed that when you clicked the Longridge link, you loaded the Longridge website, but more importantly, You left this site!. So how do we allow the user to visit other links to other sites but keep them on YOUR site? It is as easy as counting 1-2-3, once you know how. Simply add the following tag to your link, target="_blank". So your link will now look like: <a href="http://www.longridgewritersgroups.com" target="_blank">Longridge Writer's Group - A great place to meet fellow writers</a>.
It is very important that target="_blank" is entered exactly as shown with the quotes (") and underscore (_) and is all in lower case!
Now click the Longridge Writer's Group - A great place to meet fellow writers
If you set the link up correctly your user will have a new browser window open up, sending them to the link you provided. So now they don't leave your site.
Finally, we want the user to be able to send us an E-mail without having too much to do. To allow them to click a link and compose an E-mail we will use the mailto attribute.
Where ever you want to put the E-mail link, usually at the top or bottom of the page, just add the following:
<a href="mailto:phony@address.com">Description of Email Link<a>
Try this out on this phony e-mail address. Just click it...
Description of Email Link
Navigation: Home Tag, You're it. Basic Markup Navigation, Anchors & Links Graphical Elements What Next?
Created on ... January 24, 2005