HTML - hyperlinks
Here you learn how to code hyperlinks.
How to code a hyperlink.
There are 4 parts to a link:The first is the opening tag "<a href=>". The "href" stands for "hypertext reference".
The second part is the destination URL in quotes - "http://www.google.com".
The third part is the text that you want people to actually see when looking at the link.
The fourth part is the closing tag "</a>".
Relative link vs absolute paths
When you code an absolute link you write out the full path to the destination page. When you code a relative link you write out the path to the file relative to the current file. For example, look at the directory tree to the right. Assuming you were inserting an image to go on the front page of your site (index.php) and you wanted to code a link to screenshot1.jpg - which is in the same directory. With an abolsute link you would write the destination as "http://www.webpageblueprint.com/screenshot1.jpg" but with a relative link you would write the destination as "/screenshot1.jpg". Whenever you have just a slash and a filename that means the files you are linking to and from are in the same directory. You can look at some examples below to see how to code relative links in different directories.The benefit to coding relative paths is that if you have an HTML or PHP file that has links to images (or any files for that matter) that in the same directory and you move BOTH the HTML/PHP file and the images to a different directory then the relative location of those files is still the same (because they are both still in the same directory). So there is no need to recode the paths to the images. If you had absolute paths to the images then you would have to re-code the location of the images. Note though, that if you move the images to a different directory but you don't move the HTML/PHP file then you will have to re-code the relative paths to the images beause the relative locations of one to the other has changed.
Link to internal page - same directory
|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="page1.php">page1</a> </body> </html> |
||
page1 |
||
Link to internal page - lower directory
This is a link to a file that is 2 directories deeper.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="vbulletin/files/page3.php">page3</a> </body> </html> |
||
page1 |
||
Link to internal page - higher directory
This a link to a file in a directory that is 2 levels higher. To jump up 1 directory just type "../" in front of the file name. You can do it multiple times to jump many directories.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="../../index.php">index</a> </body> </html> |
||
page1 |
||
Link to external page - same browser window
This a link to a file in a directory that is 2 levels higher. To jump up 1 directory just type "../" in front of the file name. You can do it multiple times to jump many directories.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="http://www.google.com">Google.com</a> </body> </html> |
||
Google.com |
||
Link to external page - different browser window
This opens the link in a new window. You will want to do this with most of your external links on your site because when one of your visitors clicks on a link to go to another site you will want your site to stay open so your visitors will not forget to come back to it. You code this by typing "target="blank"" after you type the destination.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="http://www.google.com" target="blank">Google.com</a> </body> </html> |
||
Google.com |
||
Internal link to an image file
This is when you want an image to be a clickable link that brings you to a location (you can also make a clickable image link to e-mail). Make sure the image you are using is on your own server. Using an image an someone else's server is called "hotlinking" and is basically stealing someone else's bandwidth. This is considered very rude. Don't do this without their permission. One of the times where they let people do this is when they want you to put their banners on your site. Many times they will let you hotlink their banners on your page.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="http://www.internetexplorer.com"><img src="ieicon.jpg" border=0></a> </body> </html> |
||
 |
||
Anchor link (same page)
An anchor link is a link which points to a particular section within a page. This can be useful in long pages with lots of different sections. You accomplish this by creating a name for the point you want to jump to and then have the link jump to that name. The coding requires 2 parts: the first is a hyper link at the position you want to jump FROM. The code is in the format of a regular hyperlink but the address you want to jump to will be a pound sign (#) with the name of the location right after it. The second part will require you create tags around the spot you want to name where you want to jump TO. The code will be in the format of "<a name=section7>text</a>". Althouh it doesn't matter if there is anything between the open and close tags for the destination most people link to a section header. The following example shows all the code needed. The name we choose was "section7". If the anchor link doesn't work then just put the page name before the (#) sign like we do in the next example.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="#section7">Go To Section 7</a> <br> <br> <br> <a name="section7">Section 7</a> </body> </html> |
||
Go to Section 7 Section 7 |
||
Anchor link (different page)
To create an anchor link to an anchor on a different page, just create a regular anchor link with the page name before the (#) sign. The page link can be a relative link or absolute link. In the example below there is no actual "otherpage.php" so clicking won't take you anywhere.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="otherpage.php#section8">Go To Section 8 on a different page</a> <br> <br> <br> </body> </html> |
||
Go to Section 8 on a different page |
||
Link to a file
This is when you want visitors to access a file you have (Word, Excel, PDF, Zip, etc). Many of the bigger programs like Excel, Word, Acrobat have the ability to open the file inside a web browser. This means that if you have a link to a PDF file and a vistor clicks on it the it will actually open Adobe Acrobat inside their web browser. Many times this is not the preferred way to do this because there is a chance that your browser will crash and sometimes it is also harder to navigate back to the original page. A better way to do it would be to have your visitor download the file and then view it from their computer. They can do this by right-clicking on the file and clicking "Save Target As". You should tell them this by writing "Save file by right-clicking on the file and clicking 'Save Target As'" next to the link to the file. You can test the link below with a test file I have on my server.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="http://www.webpageblueprint.com/downloads/samplezip.zip">samplezip.zip</a> <br> <br> <br> </body> </html> |
||
samplezip.zip |
||
E-mail link
This creates a clickable link that brings up a blank email with the "to:" field already filled out. A tip here is to make sure the viewable link will always have the email address as the link because some people (mostly AOL users) don't have an e-mail program associated with their web browser. This means when they click on the link that a blank email doesn't come up. Instead they get a Windows error telling them that they don't have a default email program. If this happens then the user can cut and paste the email address from the web page into their email but if the email address isn't on the page then they won't know what it is.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="mailto:help@xyzcompany.com">help@xyzcompany.com</a> <br> <br> <br> </body> </html> |
||
help@xyzcompany.com |
||
e-mail link
This is an email link with the subject already filled out and some text in the body. You can change it so that you only have text in the subject and not the body if you want.|
<html> <head> <title>HTML tutorial</title> </head> <body> <a href="mailto:help@xyzcompany.com?subject=QUESTION&body=What is your question?">help@xyzcompany.com</a> <br> <br> <br> </body> </html> |
||
help@xyzcompany.com |
||
Bookmark this page:
|
