URLs, Hyperlinks, and Anchors
In specific computer terms a URL (Uniform Resource Locator) is just a web address. URL is the plain old popular usage. A URL is made up of the document's name preceded by the directory name.
(Example: http://www.your-website-name/pathname).
There are two types of URLs -- Absolute and Relative.
An absolute URL is one that points to the exact location of a file.
A relative URL points to the location of a file from a point of reference. This reference is usually the directory beneath the file.
It's preceded by two dots...
(../directory_path/file.txt) for the directory above
... and one dot...
(./directory_path/file.txt) for the current directory.
URLs
Here's the technical breakdown of a URL -- it's not necessary to memorize this but it's nice to know the meaning of simple HTML links.
A full Web address like this...
http://www.create-a-website-adviser.com/how-to-make-a-website.html
follows these syntax rules...
scheme://host.domain:port/path/filename
The scheme is defining the type of Internet service.
Most of the time the type is http.
The domain is defining the Internet domain name like...
create-a-website-adviser.com or cnn.com
The host is defining the domain host. If omitted, the default host for http is www.
The :port is defining the port number at the host. You don't see this one in most cases because the port number is normally omitted; the default port number for http is 80.
The path is defining a path (a sub directory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site.
The filename is defining the name of a document. The default filename might be default.asp, or index.html or something else depending on the settings of the Web server.
Tip:
You can copy the URL of any Web page from your browser? Highlight the address in the address box and select Edit, then Copy (CTRL+C for Windows users / CMD+C for Mac users). Select Edit, then Paste (CTRL+V for Windows users / CMD+V for Mac users) to paste the address between the quotes of the href attribute. |
Hyperlinks
Pointing to another domain or to some document in a different part of the world via hyperlinks is cool -- and your own web documents can be referenced in this way too!
Hyperlinks helps user navigate to your collection of web page in their search for valuable information. The easiest link to learn is the hyperlink to another location.
The <a> tag with the href attribute and its closing tag, </a>, surround any text that you want to highlight.
The default hyperlink highlighting in HTML is underlined blue text. You can modify the color of your HTML links if you so desire.
In the following examples, you need to click on the hyperlink words...
Create A Website Adviser's Home Page
... in order to go to the document or web page found at the URL inside the quotes -- in this case we want to go to...
http://www.create-a-website-adviser.com
Examples of HTML Links:
Link to Another Page By Leaving the Current Page
Try it by clicking Create A Website Adviser's Home Page
... link to browse its home page.
Then click on your back page arrow to return to this page.
The actual HTML code for the above link looks like this:
<a href ="http://www.create-a-website-adviser.com"><u>Create A Website Adviser's Home Page</u></a>
Link to Another Page By Opening a New Page
Now try this link by clicking Create A Website Adviser's Home Page
... to browse the home page again.
When you're done simply close the home page and you'll see that this page is still open in your browser.
The actual HTML code for the above link looks like this:
<a href ="http://www.create-a-website-adviser.com target="_blank""><u>Create A Website Adviser's Home Page</u></a>
Tip:
The HTML attribute... target="_blank", is what makes your browser open a new web page. |
Anchors
The anchor or <a> tag, is the HTML/XHTML identifier for defining the source and the destination of a hyperlink.
Most of the time you'll use the <a> tag with the href attribute to define a source hyperlink. The value of the href attribute is the URL of the destination -- usually a web page within your domain or within another domain.
Note:
Usually the anchor contents looks different from the surrounding text -- the is color different and underlined. Images will have specially colored borders or other effects -- the mouse-pointer icon changes when passed over them. |
Link to A Destination On the Same Page
Text and graphics can link to places within the same document. It requires two parts -- the anchor and the link.
The <a> tag contents should be some kind of text or an image that explicitly or intuitively tells users where the hyperlink will take them if they click it.
In this case the anchor represents the destination to go to. These types of HTML links uses the name of the anchor to make the browser action work -- instead of the usual web page file names.
Check the following anchor link... on this page
Here's the actual code on the link side of things...
<a href="http://www.create-a-website-adviser.com/html-links.html#urlshyperlink" span style="color:#003366;">Same Page Link Example</a>
Click on the following link then...
... scroll down to continue - - - - ->>> Same Page Link Example
This is what the actual code on the anchor side looks like...
<a name="urlshyperlink" id="urlshyperlink"><b>URLs, Hyperlinks, and Anchors</b><</a>
The name= attribute is from old school HTML world; id= has been grown out of the new XHTML way of coding. Currently both typically used to cover all bases.
Quote:
"Success has always been easy to measure. It is the distance between one's origins and one's final achievement..."
-- Michael Korda (1933 - ) |
At this point you've gained some basic knowledge on how to construct a few HTML links. Building the necessary navigation to make your website more user friendly will please your visitors.
As you can see HTML links are a necessary part of web navigation.
