| CIS 207 | Introduction to Web Development |
Hypertext links can point to:
The <A> tag creates an anchor, which is text that is marked so you can
link to it from other points in the document. Anchored text will become the
destination of a link you later create. Anchored text is not the text you click.
You assign each anchor its own anchor name, using the NAME property.
To create a link to an anchor, add the HREF property to the A tag. HREF is short for Hypertext Reference. HREF indicates the location to jump to. HREF can refer to an anchor you place in a document, or, as we will see in moment, HREF can refer to a totally different document on the web. You link to an anchor using the anchor name preceded by a pound ( # ) symbol.
In this example, we will create a table of contents at the top of a web page, and create links to sections one, two and three below. We have to create an anchor for each section below. Then, we create links out of the table of contents entries that link to the anchors below. Here's the example.
Let's SKIP the Table of Contents for now... and look at creating the anchors for each section below.
Table of Contents (contains the links to the anchored sections below)
Section One - we create a link out of the words "Section One" to the anchor
"Sec1" with the following:
<a href="#Sec1">Section One</a>
Section Two - we create a link out of the words "Section Two" to the anchor
"Sec2" with the following:
<a href="#Sec2">Section Two</a>
Section Three - we create a link out of the words "Section Three" to the
anchor "Sec3" with the following:
<a href="#Sec3">Section Three</a>
Section One - The words "Section One" is an anchor.
We marked the words "Section One" with an anchor tag as follows:
<a name="Sec1">Section One</a>
Section Two - The words "Section Two" is an anchor.
We marked the words "Section Two" with an anchor tag as follows:
<a name="Sec2">Section Two</a>
Section Three - The words "Section Three" is an anchor.
We marked the words "Section Three" with an anchor tag as follows:
<a name="Sec3">Section Three</a>
The anchors above can now become the target of a hyperlink from the table of contents above.
Try clicking one the links in the Table of contents. Then, click your back button and try clicking on a link to a different section. Note that when you click a link, you jump to that section that we marked as an anchor. When you link to another section of the same document, the browser jumps to that section, making the start of that section appear at the top of the browser window. In this simple example, each section is quite short, so you will see the sections below your choice.
Before you set up links for navigating a group of web pages, you will probably want to map out exactly how you want your pages to relate. This technique is called storyboarding. Storyboarding your web pages before you create links helps you determine which structure works best for the type of information you are presenting.
In a linear structure, each page is linked to the next and to previous pages, in an ordered chain of pages. The linear structure is used when you expect your users will want to progress through your pages in order.
A hierarchical structure starts with a general topic that includes links to more specific topics. The Yahoo! directory of web pages uses this structure. Each topic includes links to more specific topics.
You can combine structures into what is known as a mixed structure.
If you wanted to add a link to your web page that linked to a different file on your site, let's say a file named 198ln02contact.htm, you would add a link as follows:
<A HREF="198ln02contact.htm">Click here to contact me</A>
Your link would appear as Click here to contact me
You did not have to set an anchor in the above link - the filename serves as the anchor. And when the user clicked your link, the browser would open the 198ln02contact.htm file. Try it out now by clicking on that link.
Until now you've worked with documents that were all in the same folder. When you created links to other files in that folder, you specified the filename in the link tag, but not its location. Browsers assume that if no folder information is given, the file is in the same folder as the current document. In some situations you might want to place different files in different folders, particularly when working with large multi-document systems that span several topics, each topic with its own folder.
When referencing files in different folders in the link tag, you must include each file's location, called its path.
Your experience with Windows folders or DOS directories will help you understand exactly where a file is located since the concept is identical. As a matter of fact, when you link to other files on your server, you are linking to files within the server's directory structure. In your web links, you will use the forward slash ( / ), or just a slash, rather than a backslash ( \ ) which you use in DOS or Windows. Instead of using a drive letter followed by a colon (as in the DOS or Windows path A:\folderName\FileName.htm), you will use the drive letter followed by the pipe symbol ( | ) after your drive letter in absolute web links (as in A|/FolderName/FileName.htm).
HTML supports two kinds of paths:
Given the following pathnames, which ones are absolute and which ones are
relative?
/student/home.htm
/student/tutorial2/resume.htm
../home.htm
../tutorial1/chester.htm
refer.htm
cases/ludwig.htm
There are two important reasons to use relative paths rather than absolute paths:
Most web authors use relative pathnames in their hypertext links.
You will find out how important it is to use relative pathnames in your hyperlinks when you link your files in your WWW Assignments. If you use absolute pathnames, you will have to change all your links when you upload your files to the web server in order for them to work. However, if you use relative pathnames, you can simply upload your files and all your links will work without any problems.
A URL, or Uniform Resource Locator, gives a file's location on the web. Each server has a default file which is loaded when a user goes to their URL without specifying a specific file. The default filename is usually index.htm, index.html or default.htm. This means that you can load the Jeff State home page in the server's root folder named index.htm by simply typing in the URL: http://www.jscc.cc.al.us which is the same as typing in the URL: http://www.jscc.cc.al.us/index.htm. By convention, if the path and filename are left off the URL, the browser searches for a file named index.html or index.htm in the root folder of the web server. Microsoft servers use default.htm or default.html. You will also find sites that use index.asp.
To link to a URL, type the URL as the HREF property as in the following example:
<A HREF="http://www.cnn.com">Link to CNN's web site</A>
Will produce this link to CNN Link to CNN's web site
You can place a link to another site, such as, for a map to the Shelby-Hoover campus of Jeff State, with the following link:
<a href="***"></a>
And you would see the following weather information on your web page.
Each URL follows the same format. The first part identifies the communication protocol, the set of rules governing how information is exchanged. All web page URLs begin with the letters "http", short for Hypertext Transfer Protocol. Other Internet resources use different communication protocols. After the protocol, you'll use a colon ( : ), followed by a slash or two (depending upon the Internet resource).
FTP servers store files that Internet users can download to their computers. FTP, short for File Transfer Protocol, is the communications protocol these file servers use to transfer information. You may want to use FTP to transfer your files to geocities when you set up an account there to publish your WWW Assignments. You will type the URL: ftp://ftp.geocities.com or you may use ftp://username:password@ftp.geocities.com to speed the login process.
You link to FTP servers by using the FTP URL as the HREF property as you did with HTTP links. We can use the following HTML code to create a link to Microsoft's FTP server:
<A HREF="ftp://ftp.microsoft.com">Microsoft FTP Server</A>
Which will provide a link as Microsoft FTP Server.
Usenet is a collection of discussion forums, called newsgroups, that let users send and retrieve messages on a variety of topics. The URL for a newsgroup is news:newsgroup as in the following example:
<A HREF="news://news.php.net">PHP Newsgroups</A>
Which will provide a link as PHP Newsgroups.
In order to make it easy for web surfers to send you email, create a link to your email address. The URL for an e-mail address is mailto:e-mail_address. For example, I can create a link to my email address with the following HTML code:
<A HREF="mailto:hharris@jscc.cc.al.us">E-mail Me</A>
Which will provide a link as E-mail Me.
By clicking the above link, your email client will open and automatically address an email to me at my email address above. Some authors prefer to make their email address the link as well to insure that everyone can see their email address, even if the link does not work properly on their platform. In that case, we could use:
<A HREF="mailto:hharris@jscc.cc.al.us">hharris@jscc.cc.al.us</A>
Which will provide a link as hharris@jscc.cc.al.us.
Let's create a couple of sample pages and link them together...