HTML Links

 

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:
html-line

<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:
html-line

This is an example of creating a Link within your web page.

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

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:
html-line

<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:
html-line

This is an example of creating a Link within your web page.

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

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.

html_links_1Select 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>

html_links_2Create 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:
html-line

<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:
html-line

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:
html-line

<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:
html-line

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:
html-line

<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:
html-line

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:
html-line

<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:
html-line

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.