HTML Links – URLs and Anchors
HTML links, also known as hyperlinks, are used to navigate a website, navigate to another location within the same web page, open an email program or download a file.
Links are created using the anchor tag <a> and the href attribute and the URL, which is the value of the attribute.
<a href="http://www.domain.com">http://www.domain.com</a>
There are basically three types of links:
Local
Internal
External
Local Links
Local links are links to web pages that are part of the same website. All of these pages are located on the same web server. You can create a local link as a complete URL or with just the page’s filename and extension.
Linking to a page on your server in the same directory
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a <a href="http://www.domain.com/page.htm">Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Link within your web page.
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a <a href="page.htm">Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Link within your web page.
Linking to a page on your server in a different directory
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a <a href="http://www.domain.com/directory/page.htm">Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Link within your web page.
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a <a href="directory/page.htm">Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Link within your web page.
Internal Links
Links to other areas within the same web page. This type of link will enable you to easily navigate large pages.
Select the area of text in which you want the link to take you to when clicked on. Create an anchor with this text by linking your text with the following code. You can change the “Anyname” text indicated in red to whatever you’d like.
<a name="Anyname">Text</a>
Create your main link that will be used to navigate to the anchor you just created. Make sure you use the same name you used within your anchor:
<a href="#Anyname">Click Here</a>
External Links
Links to other web pages located on another server. This type of link MUST contain the complete URL.
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a <a href="http://www.domain.com">Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Link within your web page.
When linking to other websites, you may want to open the links in a new window. This will leave your website open in the original window and prevent you from completely losing your visitors.
Create your outside links like this:
http://www.domain.com” target=”_blank”>Site</a>
When placing your web address within an email message, make sure you include the full URL beginning with http://. You don’t need to include the HTML portion to create a link within an email message. As long as you include the full URL, most email programs will automatically create a link. http://www.yourdomain.com When placing your email address within an email, make sure you place mailto: in front of it in order to create a clickable link. mailto:you@domain.com
Email – Electronic Mail Links
In addition to creating a link to another web page, you can also create a link that will launch your visitor’s email program to enable them to contact you. This link is called a mailto: or email link and will look something like this:
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating an<a href="mailto:you@yourdomain.com">Email Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating an Email Link within your web page.
FTP – File Transfer Protocol Links
This type of link is used to create a link for files to be downloaded from a server.
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a<a href="ftp://ftp.domain.com/music/file.mp3">Download Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Download Link within your web page.
Download Links
When linking to a file that is to be downloaded, most servers will allow you to link directly to the file. This includes downloadable files, such as MP3, MP4, EXE, ZIP, and PDF.
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example of creating a <a href="http://www.domain.com/file.zip">Download Link</a> within your web page.</p>
- Browser View
- HTML coding viewed through a web browser:
This is an example of creating a Download Link within your web page.
When a download link is clicked on, a download window will open.
If this method doesn’t work for you, contact your server administrator.
This concludes the HTML links tutorial. In the next section, we will focus on HTML images.