• Home
• About
• FAQ
• Contact
• Link
• Sitemap
• Forums

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML links

Links are used to create connections to other documents and other resources such as images or sound files on the world wide web.

This tutorial focuses on:

• The <a> tag
• Linking to other pages
• Linking within the same page
• Absolute vs. relative linking
• Download links

The <a> tag

The <a> (anchor) tag is the tag used to create links on a webpage.

Attributes of the <a> tag:

• href - denotes the webpage or resource to link to.

• target - denotes where a link will open. By default, it will open in the same window, but you can set it to open in a new window by setting the target attribute to "_blank".

Clicking on the link will open www.lycos.com in a new window.

• title - sets a title for the link that will appear in a small box (called a tooltip) when you move the mouse over the link. It is not always necessary, but it is good to have for usability purposes when it is unclear where a link takes you too.

In the above example, the first link is very obvious and so does not need a title, but the second link not so much. A title helps clarify where a link will take you. Move your mouse over the text Apples are good! in the above example (but don't click!) to see the title of the link.

Linking to other pages

Linking to pages in another website

To link to a page in another website, you should use the absolute location (that is the entire URL including the http:// part) of that page.

Linking to pages in your own website

Linking to pages in your own website is a little different, and actually a little trickier.

When you link to a page on another website, all you have to do is specify the absolute URL for it. However, when you link to a page on your own website you have to take into consideration the directory that page is located in.

The page introduction-to-html.php is located at http://www.landofcode.com.com/html-tutorials/introduction-to-html.php and we want to put a link on it to the page about.php located at http://www.landofcode.com/about.php

Notice the / character in the link? This character means the root directory. When you put it in a link, you're saying that the link should start from the root directory of the website.

Had about.php been located in the same directory as introduction-to-html.php, the link would look like this instead:

However, it is generally good practice to begin all internal links with the / character (even if the pages are in the same directory) since you don't know if the page you're linking from may move to another directory in the future.

Linking within the same page

Linking within the same page refers to having a link in a webpage that when clicked will "jump" to another part of the same webpage.

This is achieved by using the name attribute in the <a> tag. The name attribute denotes a specific part of a webpage to jump to -- a named anchor.

To link to a named anchor, add a # symbol and the name of the anchor to the end of a URL.

This example will jump to the data section on the page located at www.somewebsite.com/files/file1.php. The named anchor at the 'data' section would look like this:

Absolute vs. relative linking

Relative linking

Relative linking refers to linking to files that are on the same domain. With relative linking, you do not have to link to the entire path for a file.

Example:

The file html-basics.php is located at http://www.landofcode.com/html-tutorials/html-basics.php and we want to link to it from a file named html-frames.php located in the same directory. Instead of creating a link to that full path, we can create a relative link to it. The relative link would look like this:

Absolute linking

Absolute linking refers to linking to files using the entire URL.

Absolute linking is usually done when linking to files on another domain.

Download links

Ever have a situation where you click on a link and it opens a box that asks you to download something? If you have been on the internet for more than two weeks, then you probably have! This is called a download link. Making your own download links is easy. All you have to do is link to the path of the program to download, the same way you would a webpage.

NOTE: Don't ever download anything from websites you do not know or trust! There are many viruses out there.