Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Links in HTML

Page 1 of 4


HTML was invented in the 80's by the scientist Tim Barnes-Lee in order to help him and his colleagues share their information and discoveries. The main feature of this new language was its ability to include hyperlinks.

Hyperlinks—or more simply: links—are specially highlighted words inside a text that, when clicked, take you to another section on the page you are watching, to another page inside the site, or even to a completely different site.

The <a> tag

To create a hyperlink, you need to place your desired text or word within the
<a>
tag, using the href attribute to specify the file or site you are pointing to.
  1. Create a new .html file and write:
    HELLO <a href="http://www.scriptingok.com">WORLD</a>!
  2. Test your file in your browser and click on WORLD.
You just created a HELLO WORLD! sentence where the word WORLD is a link to scriptingok.com.
Now let's try something slightly different

  1. Change the href value of your link to "http://www.scriptingok.com/forums/"
  2. Preview your file in your browser and click on WORLD.
This time, you not only specified the domain where you wanted to point your link, but you also specified a folder inside that domain, in this case the folder forums.

You can also create links inside the same site.
  1. Create a new file, name it first.html and write:
    <h1>FIRST</h1>
    This link goes to the <a href="second.html">second file</a>.
  2. Now create another file, name it second.html and write:
    <h1>SECOND</h1>
    This link goes to the <a href="first.html">first file</a>.
  3. Save both files, preview first.html in your browser, and follow the links.
You should now have two different files linking to each other.

You now know how to create links to other sites and files but, what if the file you are linking to is inside the same site as the source file, but in a different folder?

Find out how to specify paths in the next page.

More pages of this tutorial → Links in HTML  1234>

Comments & Questions