HTML HyperLinks - Code and Explanation

Hyperlinks have always been a big part of the internet. It is the way we move from one place to another; from one web page to another within a website or to another website. Hyperlinks are created with the anchor element.

Anchor Element <a></a> Creates a hyperlink. The object to be clicked on to trigger the hyperlink can be text or an image. It will be placed between the tags.
 

HREF attribute defines the target of the hyperlink and is placed inside the beginning tag.
Like this: <a href="http://sfimg.com">place text for the user to click on here</a>
An anchor tag that includes an image for the user to click on just inserts the image between the <a> and </a> tags.
 

<imga href="https://moreinfo247.com/7396778/free"> <img src="http://sfimg.com/Images/Banners/Banner124.gif" alt="ratrace banner />Click this hyperlink</a>

IMAGE element
<IMG> inserts an image by giving the exact filename and the location to it.
Like this
<img src="http://img146.imageshack.us/img146/4920/527169sendmailsz7.jpg" alt="Image Hosted by ImageShack.us" />
 

The alt="" is the alternate text that will be displayed in a browser that is set to NOT display images. Some say that the search engines use alt data. 
 

Test the Image - If you have trouble getting the image to display.
You can test to see whether an absolute URL works by entering it into your browser address window. It should display the image in your browser window if everything is OK. In this example, enter just what is inside the quotes following img src= which will be just this part:
http://img146.imageshack.us/img146/4920/527169sendmailsz7.jpg

To avoid some problems, keep in mind about whether you need to use absolute URL's or not:

 RELATIVE vs ABSOLUTE URL's - what's the difference?

URLs are located relative to a webpage's location.

Example of Relative URL: the image: banner.jpg can be linked from a page in the same directory with a link that looks like this: <IMG SRC= "banner.jpg" >

Example of Absolute URL: The same image (if it were on another website) might need to be linked like this:
<img src="http://img146.imageshack.us/img146/4920/527169sendmailsz7.jpg" />
 

Curly Quotes can cause trouble in html code
When using Microsoft Word to create the code- don't use curly quotes-
Microsoft Word automatically changes straight quotation marks ( ' or " ) to curly (smart or typographer's) quotes ( or ) as you type.
To turn this feature on or off:
On the Tools menu, click AutoCorrect Options, and then click the AutoFormat As You Type tab.
Under Replace as you type, select or clear the "Straight quotes" with "smart quotes" check box.
 

Case-SeNsEtIvItY –
Hosting on Linux makes folder and file names case sensitive. So if you don't type the image's filename or folder names exactly as they should be, the browser will not be able to locate the image and it won't get seen.
Using lower case for all folder and filenames is probably the best practice.