HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  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

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

Attributes of the <a> tag:

Syntax:
<a href="url">text that will be displayed as the link</a>
Example:
<a >href="http://www.google.com">google.com</a>
Output:
Example:
<a href="http://www.lycos.com" target="_blank">Check out the Lycos search engine!</a>
Output:

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

Example:
<a href="http://www.hostforweb.com"> Click here to go to HostForWeb web hosting company homepage </a> <br /> <a href="http://en.wikipedia.org/wiki/apple" >title="Learn about Apples"> Apples are good! </a>
Output:

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.

Example:
<a href="http://en.wikipedia.org/wiki/apple">Apples are good!</a> <br /> <a href="http://www.google.com/cse">Custom search engine from Google</a> <br /> <a href="http://freshome.com/2008/09/08 /35-of-the-most-unique-creative-sofa-designs/">Cool sofa designs</a>
Output:

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

The link would look like this:
<a href="/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:

<a href="about.php">

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.

Syntax for a named anchor:
<a name="anchor_name">text that will be displayed</a>

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

Example:
<a href="http://www.somewebsite.com/files/file1.php#data">See the data</a>

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:

<a name="data">Data</a>

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:

<a href="html-basics.php">HTML basics</a>

Absolute linking

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

Example:
<a href="http://www.statcounter.com/help /knowledge_base/index.html"> StatCounter Knowledge Base </a>
Output:

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.

Example:
<a href="http://www.somesite.com/downloads/prog1.exe">Download a cool game</a>
Output:

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

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information