All code is displayed on the right, and the link itself is on the left. The text that appears in the page will be shown in blue in the code.
If you wish to click on any of the links below to see where they take you, please do so. If the link opens within this browser window, simply click the "Back" button on your browser to come back to this page.
Absolute or External links | |
| Don't forget to add in the "http://" at the beginning. Otherwise, the browser will assume the page is in your directory. Nothing is more irritating than going to a broken link (i.e., a link that leads to a "Cannot find page" error). | |
| Click here to find out about The Arrogant Worms. |
Code: Click here to find out about <A HREF="http://www.arrogant-worms.com">The Arrogant Worms</A>. |
| You will note that the above link will take you to another site within the same browser window. In order to open the site in a new browser window, we use the TARGET attribute: | |
| Click here to find out about The Arrogant Worms. |
Code: Click here to find out about <A HREF="http://www.arrogant-worms.com" TARGET="_blank">The Arrogant Worms</A>. |
| If you clicked on the above link, go to the new window that opened and close it. Let's try naming the window that will open, so that we can direct all later links to it. I will assign the name "_new" to the window. | |
| Click here to find out about The Arrogant Worms. |
Code: Click here to find out about <A HREF="http://www.arrogant-worms.com" TARGET="_new">The Arrogant Worms</A>. |
| You will note that a new browser window opened with the link in it. Now, keep this new window open to see how the TARGET="_new" works. After you click on the links below with TARGET="_new" in the link tag, go to the "_new" window, and you will see that the page has opened there. | |
Relative links | |
| The relative link will take you to pages within the sub directories ("folders" in Windows jargon) of your webpage. If you just write the name of the file you want to go to, it will assume that the file is within the directory that you are currently in. | |
| Click here to go back to Creating Links. |
Code: Click here to go back to <A HREF="HTMLLink.html" TARGET="_new">The Basic Guidelines for a good webpage layout</A>. |
| Thus, the browser assumes that the page "HTMLLink.html" is within my main directory (http://players.won.net/casual/felisd/), which is where we currently are. How about if you want to go to another directory, but don't want to write out the whole address (<A HREF="http://players.won.net/casual/felisd/....yadda yadda yadda>)? | |
| Click here to go up one directory level. |
Code: Click here to <A HREF="../index.html" TARGET="_new">go up one directory level</A>.
|
| So, "../name" will take you back one directory (in this case, https://felisd.tripod.com/). To go back to the parent directory (i.e, the very first directory listed in the link address), you use "/name": | |
| This link takes you to the index. |
Code: This link takes you to <A HREF="/index.html" TARGET="_new">the first directory</A>, which in this case is the same as in the previous example. |
| If you want to jump directly to a directory within your subdirectory, simply type "directoryname/", replacing "directoryname" with the name of your directory. | |
| Click here to learn about me in the "kat" directory. |
Code: Click here to learn about me in the <A HREF="kat/index.html" TARGET="_new">"kat" directory</A>. |
Internal links |
|
| I have created an internal link within this page. Check below to see how it works. | |
| Click to go to the top of the page. |
Code: Click to go to the <A HREF="#top">top of the page</A>. |
At the top of the page, I inserted the following tag:
Then, by putting in the code above, I can create a link to that part of the page. You can link to different parts of another page as well, provided that the page you want to link to already has an internal link in its source code. |
|
| Click to see Example 8 from the Tables lesson. |
Code: Click to go to the <A HREF="../HTMLTable3.html#eg8">Example 8</A> from the Tables lesson. |
| Click to see my picture in the "kat" directory. |
Code: Click to see <A HREF="kat/index.htm#pic">my picture</A> in the "kat" directory. |
E-mail Links | |
| E-mail links do not need much more explanation, so here is the example without further ado. | |
| Click here to e-mail me. |
Code: Click here to <A HREF="mailto:felisd@chickmail.com">e-mail me</A>. |
Return to the HTML Lesson Guide.
Return to the Links Lesson.
Read the next lesson: Graphics