Links or "Hyperlinks" in HTML
A Hyperlink is a link in the HTML language that lets you "link" to another page or a position in the same page of your website. It is probably the most commonly used and useful function in all of the world of website design.
The tag for a hyperlink is in its basic form <a></a>. Now this doesnt do very much as it is, to make it work proper we are going to give the tag some attributes.
A tag attribute is ammended normally to the opening tag and provides more information about what it is and what it does. More than one attribute may be used though you do not want to use more than one attribute definition of same type. This may be a bit over your head at the moment but that's okay because we have a section on attributes here.
The most important attribute of the "A" tag is the destination that you want the link to take you. The following example shows you how to create a hyperlink to that when someone clicks it, it goes to Google.
Linking To Another Web Page
Code Example
<a href="http://www.google.com" target="_blank">Visit Google</a>
Rendered Example
The above shows an "a tag" with 2 attributes, the "href" and the "target". As you may have guessed, the "href" attribute refers to where you want the link to take the person clicking it but what is that second attribute?
The "target" attribute tells the browser to open another window before visiting the location we provided. There are a couple of different options for this. Seeing as we are in the "Basics", for now just know that "_blank" means new window and omitting the target attribute altogether essentially replaces the current page you are on when clicked.
Linking To a Locaiton Within The Same Page
Similarly, to link to another location within the same page, your link will also have an "href" attribute, however instead of it being a URL it will be whats called and "anchor". In addition, you will actually need another "<a></a>" tag indicating the position that you would like the screen to scroll to.
Code Example
<a id="anchorName">Here is where I want to link to</a> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p>Space created to demonstrate the functionality of anchor tags, please scroll down and click link. <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </p> <a href="#anchorName">Here</a> is where I want to link from.
Rendered Example
Here is where I want to link to
Space created to demonstrate the functionality of anchor tags, please scroll down and click link.
Here is where I want to link from.
Something to keep in mind is that this type of linking will not work if both the link and anchor are both visible on the page at the same time, it works by scrolling the page and if it doesn't have to, it wont.
Combining The Two
You may cobmine the two features we talked about above as well, this comes in handy if you want to link to a specific part of another page.
Code Example
<a href="page2.html#bottom">Link</a>
<!-- page2.html --> <p>This is the other page. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> With what your looking for at the <a id="bottom"></a></p>
