Page 1 of 1

Guide to the Web and Design part IV Links Rate Topic: -----

#1 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 98
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Posted 03 October 2006 - 10:07 PM

HTML Basics – Links

An html link you probably know about, at its simplest its a text based link that you click on and it will take you to another web page. The same ability can be combined with images to make them 'linkable' and other objects in html.

The format for a link is as follows :
		<a href=”http://www.capty-design.com/”>Go to my website </a>


Now you can see the first part is obviously pointing to a website, while the part between the tags is what is displayed on the page, and then you have a closing tag. Try that out and you will have a simple (most likely blue) link that you can click and should take you to your destination.

Now, it does not help you much to have a link going to my site so how am i going to make this work for you. First off, if you are still in notepad, save your file as page2.html, and replace the content with something different so you will be able to differentiate between the pages. Save again.
Now remember, all of this needs to be in the same folder for this purpose right now.

When you are working on a website more often than not you are working at home on your computer, not directly on a web server, so, the links cant be set up to your full web address because as you edit and change pages your links will cease to work. So, we use relative linking instead of absolute linking (which is specifying a specific page on a specific server).

Your code will be :
< a href=”page2.html”>Go To Page 2</a>

Place that on your index, save everything, and load it up into the browser. Click the link and magic you are set to go.

This effect can also be applied to images, which we will cover in the next chapter, simply by surrounding the image code just as you have the displayed text on the page.

Your probably not always going to want your links to be bright blue so html has an attribute that is actually applied to the body container.

<body link="#33FF00" vlink="#FFFF00" alink="#FF0000"> 


link being the default state of the hyperlink
vlink being the color the link is after you have gone to the other site and returned to the index
alink is the color the link is while the 2nd page is loading after you clicked on it. (a brief state, but it lets the user know that the site recognized their click)
<html>
<head>
<title> Personal About Page </title>
</head>
<body bgcolor="#3399FF" link="#33FF00" vlink="#FFFF00" alink="#FF0000"> 
<center><h1> Tyler Lee </h1></center>
<p> <center><font face="verdana" color="#FFCC00" size="4pt">The true story of the man of mystery.</font></center>
<p> Tyler was born in Dallas, Texas, the <em>greatest</em> city and state in the U.S.A.
<p><a href="page2.html">Hey Visit My Other Website! </a>
</body>
</html>



you could , if the files are not in the exact same place, navigate through your folder lists like if you were using windows explorer. You will see on some websites something like ...

<a href=”http://www.capty-design.com/news/story/page2.html”>


Simply, the slashes just mean the web browser will look into the news folder, then the story folder and then for page2.html

<a href=”http://www.capty-design.com/../page2.html”>


This is a little bit different in that the '../' tells the server to back out of the current folder it is in.. So if you had your files on your c drive in a folder named website1, it would back out to the c drive and then look for page2.html.



Email Links * - You have probably clicked on a link that goes to an e-mail address in the past, simply fill in the website address with 'mailto:youremail@yourisp.com' . so....

<a href=”mailto:capty99@capty-design.com”>E-mail me at capty99@capty-design.com”</a>


also noticed i did include my full email address in the displayed part of the link, lots of people dont have a specific email system set to default when they click on a link like this , so they also need to see the written email so they can write it down or transfer it to their email client.

This post has been edited by capty99: 04 October 2006 - 07:11 AM


Is This A Good Question/Topic? 1
  • +

Replies To: Guide to the Web and Design part IV

#2 FiendKing04  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 10-August 08

Posted 24 December 2009 - 04:08 AM

Another good section.

Can't wait to move onto CSS!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1