Without a doubt, the most powerful and widely used of all HTML elements
element (a.k.a. 'anchor' tag). The
element uses the
along with a valid web address as the value and some content between the start and the end tags to create what is known as a hyperlink
. The gigantic international network of web pages known as the World Wide Web is interconnected through the use of hyperlinks and indeed would simply fail to exist without them.
The hyperlink typically uses the following syntax:
valid web address">
The text or image you wish to display as a hyperlink goes here.
valid web address
equals any existing Uniform Resource Locator
The following example displays the source code used to create a hyperlink which, if clicked on, would load the web page you are currently viewing:
The portion highlighted in red represents the URL
which typically appears in the Address bar of your web browser. (If you're using Internet Explorer
, hold down the Alt key and then press 'D' to highlight the URL. Press Ctrl + C to copy it.)
Example 1B would look like this on your web page:
of the hyperlink. Hyperlink text is usually underlined and also carries a default color coding to indicate the current status of the hyperlink. The following illustrates the default color coding for the four basic states of a hyperlink:
|Unvisited||The user has not visited the target of the hyperlink.|
|Visited||The user has visited the target of the hyperlink.|
|Hover||The user's mouse pointer is currently hovering over the hyperlink.|
|Active||The hyperlink is currently being activated (by clicking on it).|
If you are using Internet Explorer
, you can access a dialog to view and modify the default color coding for hyperlinks by clicking on Tools » Internet Options » Colors
. These colors will be used for web pages that do not specify in the source code which colors to use for hyperlinks.
To specifically set the color of the hyperlinks on web page you are creating, you can apply certain attributes
element (see Essential Page Structure
for more information about the
element). These attributes and their associated effects and values are displayed in the following table:
|ATTRIBUTE ||EFFECT||VALUE |
|Sets the color for unvisited hyperlinks||Any legal color value* |
|Sets the color for visited hyperlinks||Any legal color value* |
|Sets the color for active hyperlinks||Any legal color value* |
The above attributes with their associated values (*same as font color
values) are placed in the
tag to define the link colors on a web page. Example:
Example 2 - SOURCE CODE
Example 2 would produce the following result on your web page:
Example 2 - RESULT
Anatomy of a URL
The URL, which stands for Uniform Resource Locator
, is basically the address of your hyperlink's target. Using the URL of the web page you are currently viewing, let's dissect it and take a closer look. First, here's the full URL:
Now let's break it down:
|Protocol ~ This defines how the information (in this case, a web page) travels over the internet. |
http = Hyper Text Transfer Protocol. Another common protocol is
ftp (File Transfer Protocol)
|Host name ~ This is typically |
www. which stands for World Wide Web and refers to the gargantuan international collection of interlinked web pages.
|Second Level Domain (SLD) ~ This is the name that I selected to define this web site. This —combined with the Top Level Domain (see below)— is what is often referred to as the "domain name".|
|Top Level Domain (TLD) ~ This is the suffix I selected for my domain name to categorize this website. TLDs often employ a country-specific code (e.g., |
.ca = Canada) and other times are reserved or restricted for a specific use (e.g.,
.biz is restricted to businesses). See the official ICANN FAQ for full details.
|Subfolder ~ My web host assigns me a root directory to store my web pages in. |
/format_text/ is the subfolder in that root directory within which the current web page resides.
|File name ~ This is the name of the electronic text file that contains the source code of the web page you are currently reading.|
|Fragment identifier ~ This is a special in-page identifier. (Note: This may or may not appear depending on how you got to this part of the web page). This is used in hyperlinks leading to a specific location on a web page.|
Altogether, this represents what is known as an absolute address
. Likewise, the absolute address of any web page you visit on the World Wide Web will appear in the Address bar running across the top of your browser and this will represent a valid web address provided that the web page loaded successfully. You may use any valid web address as the value for the
attribute (as per above
) to create a hyperlink.
If you wish to create hyperlinks (also known simply as links
) in between pages on your own web site, you can alternatively use what is known as relative
addressing. With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the
attribute provided that the page containing the link resides in the same folder
as the page acting as the link's target. Please see Relative Addressing
for more information.
Linking to a Specific Location on a Web Page
So wondering how to create hyperlinks that —when activated— jump to a specific location on a web page? No problem. Let's start with the simplest example of this which is a hyperlink which leads to another part of the same page. For this you need only to use the standard hyperlink code and then use a fragment identifier
as the value of the
attribute. The fragment identifier can be any name you like and must be preceded by the hash mark '#'. The following code will create a hyperlink that uses 'photos' as the fragment identifier:
<a href="#photos">My Photos</a>
Now all we have to do is create the code that will serve as the destination of our fragment identifier. This is inserted at the place in our web page that we want our hyperlink to jump to when it's activated (clicked). To do this, we need to use the
attribute in the
element. This will create what is known as a 'named anchor'. Here's the code you would use:
Note that the
<a name="anchor name"></a>
tags are typically empty (i.e., no content is required between the start and end tag).
You can also create a hyperlink on one page that leads to a specific location on another page by using the same setup. You only need to append the fragment identifier on to the end of the URL used as the value for the
attribute. For example, if the named anchor 'photos' (the link destination) existed on a page called "
" then the hyperlink that leads to it from another page would be created as follows:
<a href="vacation.htm#photos">My Photos</a>
Clicking on this link from another page would first load the '
' page and then jump to the part of the page where the named anchor 'photos' is located.
Creating named anchors and using fragment identifiers is really useful when you have a tendency to cram a lot of information on one page (like I do) and you would like to help readers out by enabling them to quickly locate specific sections.
* * *
Whew! And that concludes all the tutorials on Formatting Text
If you have followed all these tutorials from the beginning of this section and the previous section
, you are now equipped with all the necessary know-how to start from scratch and create a full blown text-only web page. But you'll probably want to learn how to jazz up your web page with some other stuff, right? (Of course you do.)
So let's giddy-up, move on and learn how to insert graphics on your web page...