Web Design Stuff
HTML Tutorials    CSS Tutorials    Web Hosting   Resources
Create a Web Page 101
Making Web Pages Intro What is a Web Page? Why Make a Web Page? The History of HTML Learn HTML or XHTML?
Basic HTML
Basic HTML Tutorials Basic HTML Necessities How to Make a Web Page How to Edit a Web Page The Basics of HTML Tags Basic HTML Page Structure HTML Attributes
HTML Font Codes
HTML Font Codes Intro HTML Font Color Codes HTML Font Size Codes HTML Font Style Codes HTML Bold/Italic Codes Combining Font Codes
Formatting Text
Formatting Text Intro Making Paragraphs Miscellaneous Formatting Headings & Subheadings Creating Hyperlinks
Using Graphics
Using Graphics on the Web Add Graphics to Your Pages Graphics and Accessibility How to Align Graphics Page Color & Background Graphics as Hyperlinks Horizontal Rules
Creating Tables
HTML Tables Tutorials HTML Table Fundamentals Background & Border Color Table Frames & Rules Table Width and Alignment Cells 1 -Space & Alignment Cells 2 -Row Column Span Cells 3 -Width & Height
Making Lists
HTML Lists Tutorials Bulleted Lists Numbered Lists Definition Lists
HTML Frames
HTML Frames Tutorials Using Frames for Layout Advanced Frame Layouts Putting Hyperlinks in Frames Frame Border Width Color, Margin and Control Problems with Frames SmartFrames: A Solution SSI: An Alternative to Frames
Web Page Forms
Making Feedback Forms A Simple Feedback Form Installing NMS FormMail Debugging Your Setup My Web Host is Out to Lunch User Input Components Text Fields Checkboxes & Radio Buttons Dropdown Menus Push Buttons Layout and Presentation
Basic CSS
Basic CSS Tutorials What is CSS? Why You Should Use CSS How to Use CSS Inline Styles Embedded Style Sheets External Style Sheets Class Selectors ID Selectors Combining Selectors
CSS Properties
CSS Properties Intro Font Styles Width, Height & Spacing Borders Backgrounds Position Float & Alignment Hyperlinks
All About Web Hosting
Hosting Your Own Website What is a Web Host? Your Website's Home Page Building a Website Offline About Free Web Hosting Best Free Web Hosting Commercial Web Hosting How to Get a Domain Name Ecommerce Web Hosting Web Hosting Terminology
Free Web Design Tools
Best Free Website Tools Best Free Text Editors Best Free Graphics Editors Free Website Analysis Tools
Setting Up HTML Kit
HTML Kit Introduction How to install HTML Kit Screenshot Breakdown Basic Configuration Overall Appearance Shortcuts and Startup Editing Window Customizing Toolbars Using the Favorites Tab Making a New Actions Bar Odds and Ends
Free Templates
Free Website Templates Two Column Fixed Width Three Column Liquid Layout Miscellaneous Templates Dynamic Menu Effects Two Column Experimental Terms of Use About These Templates
Website Templates Help
Getting Started Template Zip File Download How to Edit Your Template What to Edit in the HTML How to Add Your Logo Making a Website
Web Design Tips
Web Design Basics Tables vs. Tableless Using Tables for Layout Example Table Layouts World's Crappiest Web Page
Twitter Backgrounds
Twitter Backgrounds Intro Cool Twitter Backgrounds Cool Twitter Backgrounds 2 Plain Twitter Backgrounds Dark Twitter Backgrounds Best Twitter Backgrounds Cute Twitter Backgrounds Music Twitter Backgrounds Music Twitter Backgrounds 2 Twitter Backgrounds 101 TERMS OF USE
All About Web Browsers
What is a Web Browser? Mozilla Firefox Internet Explorer Opera How to Set Up Firefox Top 5 Firefox Extensions
 
Contact
Post Some Feedback Send Me An Email Iron Spider Blog About Iron Spider... Site Conventions
 
 
 

 

Creating Hyperlinks

 
<a href="web address">Link text</a>
Without a doubt, the most powerful and widely used of all HTML elements is the A element (a.k.a. 'anchor' tag). The A element uses the href attribute 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:

Example 1A

<a href="valid web address">The text or image you wish to display as a hyperlink goes here.</a>


...where valid web address equals any existing Uniform Resource Locator (URL).

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:

Example 1B

<a href="http://www.ironspider.ca/format_text/hyperlinks.htm">
Creating Hyperlinks</a>



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:

Example 1C

Creating Hyperlinks



Link Colors


Clicking on hyperlinks with your mouse pointer will typically load the designated web page in your web browser. Hyperlinks can also be used to view images, download files, run various media such as Flash presentations, and activate Javascripts. All these and more represent the targets 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:

UnvisitedThe user has not visited the target of the hyperlink.
VisitedThe user has visited the target of the hyperlink.
HoverThe user's mouse pointer is currently hovering over the hyperlink.
ActiveThe 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 to the body element (see Essential Page Structure for more information about the body element). These attributes and their associated effects and values are displayed in the following table:


ATTRIBUTE EFFECTVALUE
link Sets the color for unvisited hyperlinksAny legal color value*
vlink Sets the color for visited hyperlinksAny legal color value*
alink Sets the color for active hyperlinksAny legal color value*


The above attributes with their associated values (*same as font color values) are placed in the <body> tag to define the link colors on a web page. Example:

Example 2 - SOURCE CODE

<body link="green" vlink="olive" alink="maroon">


Example 2 would produce the following result on your web page:

Example 2 - RESULT
Unvisited links would appear in green

Visited links would appear in olive

Activated links would appear in maroon



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:
http://www.ironspider.ca/format_text/hyperlinks.htm
Now let's break it down:

http:// 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)
www. Host name ~ This is typically www. which stands for World Wide Web and refers to the gargantuan international collection of interlinked web pages.
ironspider. 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".
.ca 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.
/format_text/ 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.
hyperlinks.htm File name ~ This is the name of the electronic text file that contains the source code of the web page you are currently reading.
#url 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 href 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 href 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 href 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 name attribute in the A element. This will create what is known as a 'named anchor'. Here's the code you would use:


<a name="photos"></a>


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 href attribute. For example, if the named anchor 'photos' (the link destination) existed on a page called "vacation.htm" 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 'vacation.htm' 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...





Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates

See also:

Best Free Web Hosting

 

If you need a .COM web address, you can get one quick and easy at...

www.GoDaddy.com
<~BACK TOP NEXT~>
 
HTML Tutorials |  CSS Tutorials |  Web Hosting |  Domain Names |  Web Design Resources
Iron Spider © Copyright 2004-2011 Robert Darrell