The core dynamic capability of the World Wide Web is the ability to link across pages. When a user clicks on a hypertext link, they go to a different page on your site, or to another site completely. Every user can choose to take a different path through the Web.
In this exercise, we will create links between two of our own pages. These are called internal links. We will have two instances of notepad open. Feel free to use copy/paste (ctrl-c and ctrl-v) to save on typing.
Now, save this file as first.html
Toggle to your other notepad window. Enter the following code.
Now, save this file as second.html
Next, in your browser, open up first.html
You should see a link to the second page. Test the link. If you typed correctly, the link should work.
Here are some things to think about and to try.
Can you create a link to the first page from the second page? Try it. Test it to see if it works. In order to test it, in notepad you must File/Save (alt-f,s) the page, and in your browser you must Refresh the page.
What happens if you create a link to a page that does not exist? For example, suppose that on your second.html page you type a link as follows: <a href = "furst.html">Return to the first page</a>. Test it in your browser to see what happens.
What happens if you forget to close the double quotes inside a link tag? That is, suppose that on your second.html page you type <a href = "first.html>Return to the first page</a>. By the way, I forgot to close a quote in my code.. Test it in your browser.
Now, get rid of all the errors in your code, but do the following. On your second.html page, type <a href = "first.html">Return to the first page. By the way, I forgot to close the link by typing /a inside brackets.. Test it in your browser.
On first.html, edit the link to add a link title. Change the code inside the tags to read < href = "second.html" title = "Exciting Second Page">. To test this, open first.html in Internet Explorer (Netscape 4 ignores link titles) and put your mouse cursor over the link. Do you see the title?
In this section, we create links to pages on someone else's web site. To do this, we copy the URL (Uniform Resource Locator) from the Web address box near the top of the browser.
Let us create a link to this page on arnoldkling.com from your first page. Start by clicking your mouse into the address box near the top of this page and doing an edit/copy by typing ctrl-c.
Next, in notepad, open up first.html. Now, type
<a href = "" title = "Arnold Kling How to Link">Go to the link page</a> on arnoldkling.com.
We left the link blank. To fill it in, put your mouse cursor in between the "" and paste in the link by byping ctrl-v. The code now should say
<a href = "http://arnoldkling.com/webdesign/htdocs/links.html" title = "Arnold Kling How to Link">Go to the link page</a> on arnoldkling.com. Use your browser to test this external link.
Remarks:
You can edit an external link by hand. For example, in your code on first.html you could change /links.html to /firstpages.html and the link would go to that page. Of course, it would make sense to change the link title and text also, so that your code would read
<a href = "http://arnoldkling.com/webdesign/htdocs/firstpages.html" title = "Arnold Kling Creating Web Pages">Go to the page about creating web pages</a> on arnoldkling.com.
Now, we can see the kind of mischief you can create by leaving out the /a closing tag. Go to your second.html page. You should still have this bad code:
<a href = "first.html>Return to the first page. By the way, I forgot to close the link by typing /a inside brackets. Keep that code there, and afterward, type in this external link.
Here are some <a href = "http://www.stars.com" title = "Web design tutorials">Web design tutorials at www.stars.com</a>. Test this link using your browser. What went wrong? How can you fix it?