Creating HTML Links

HTML linking is the magic of the web but before we dive in there are a few important concepts to grapple with. "Paths", "Relative Paths" and "URL"

Local Path - the location of a file

Every file has a logical location on your computer which is described as a "path". For example, if you copy a file named "index.htm" to the c:\ drive, it's full path would be c:\index.htm. If you create a folder in c:\ named MyWeb and then copy the index.htm file into that folder, its path would then be c:\MyWeb\index.htm. If you know a file's path, you know how to find the file on your own computer.

URL - a universal file path

A URL is a universal path, a "Universal Resource Locator". "Resource" refers to a file such as an HTML file or an image file. Thus, a URL is like a unique path describing where a file is on the internet. For example, the file URL for the web page you are now viewing is http://notepad.com/html-tags-5.htm. This URL has three parts, the first part http:// we will not worry about -- basically it means that the file is on the internet. The second part notepad.com is my server's "domain name" while the last part html-tags-5.htm is the location of the file on this server. When you type this domain into your browser's address bar, the browser will sent a request to notepad.com asking for the file html-tags-5.htm.

If you just type http://notepad.com into your browser's address bar, the notepad.com server will respond by sending back its default HTML file -- which is usually named "index.htm".

Relative Paths - how to get there from here

When you create links from your web page to another website, you will need to use the entire URL in your link. However, when you link between pages on the same website, you can save a lot of time by using a "relative path". For example, a web page on the domain http://notepad.com/ which links to http://notepad.com/tools.htm need only use the short relative path of tools.htm. You'll see lots of examples of this soon.

Linking in Action - How to Create Links

Linking is done in HTML using the <a> tag. This tag requires the attribute href which tells your browser where the other web page is located. The href value is either a URL or a relative path. For example, since the page you are looking at now is "http://notepad.com/html-tags-5.htm", a link to this page would look like this: <a href="http://notepad.com/html-tags-5.htm">a web page</a>. The person viewing the link would only see the link text "a web page" -- but as a link.

Let's go ahead and create links in our web pages. Start by making a copy of your first web page and rename it to "second.htm". Open it in Notepad and change the text to read "My Second Page". Then add the line below which will link back to our first page "index.htm": <p> Click to visit my <a href="index.htm">first web page</a></p>

Now save the file and open it in a web browser. You see that only the link text is displayed -- and clicking on the link opens your first web page.

In this example, "index.htm" was, in fact, a relative path -- which is fine since both the index.htm and second.htm files are located in the same folder.

HTML Tags in Summary

In just a few minutes, we've covered the basics of HTML including basic formatting, page construction and linking. You've learned to create your own local HTML page and link it to another local page. However, there is still much to learn before you can create, manage and promote your own website.

In the next section we'll start diving into some serious HTML code. By the time you are done, you'll be up and running on all the major HTML concepts and will have had enough practice to feel comfortable building your own website. Within a few days, you'll be able to build a keyword optimized website which will attract thousands of visitors and actually earn you substantial revenue if you wish. Let's get busy and dive into some serious HTML code!