HTML Links

 

Links, also known as hyperlinks, are defined by using the <a> tag, which refers to the word anchor. To create a hyperlink use the <a> tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL of the location where the link is pointing to. There are various types of links:

 

External Links

Internal Links

Email Links

Named Anchor Links

 

 

External Links

 

External links are links with a destination that is outside of your website. Basically external links go to another website.

 

NOTE: you must include http://

 

HTML Example:   Visit <a href="http://www.yahoo.com">Yahoo website</a>

Results:                 Visit Yahoo website

 

Link Targets

You can nominate whether to open the URL in a new window or the current window. You do this with the target attribute. For example, target="_blank" opens the URL in a new window. The target attribute can have the following possible values:

 

Attribute

                                              Purpose

_blank

Opens the URL in a new browser window

_self

Loads the URL in the current browser window

_parent

Loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.

_top

Loads the URL in the current browser window, but canceling out any frames. Therefore, if frames were being used, they aren't any longer.

 

 

HTML Example:

Visit <a href="http://www.yahoo.com" target="_blank">Yahoo website</a>

 

Result: (If you click on Yahoo website link, the Yahoo site opens in a new page)

Visit Yahoo website

 

 

 

Internal Links

 

Internal links are links with a destination that is inside of your website. In other word if internal links go to another page within your website.

 

HTML Example:  

Click <a href="index.html">here </a>to go to the home page.

 

Results:                

Click here to go to the home page.

 

 

 

Email Links

 

You can create a hyperlink to an email address. To do this we add mailto: to our href attribute in the anchor tag.

 

HTML Example:

Click here to email <a href="mailto:info@gmail.com"> Customer Service </a>

 

Result:

Click here to email Customer Service

If you click this link, your default email client will open and the email address you have typed in front of mailto: will be inserted into the "from" section.

 

 

Named Anchors


You can make your links "jump" to other sections within the same page. You do this with named anchors. To use named anchors you need to create two pieces of code; one for the hyperlink (this is what the user will click on) and one for the named anchor (this is where they will end up to).

 

HTML Example:

Open a web page html source that has a lot of text in it (maybe two pages) then Insert the following line right after <body> tag:

 

<a name="top">Here’s the top of the page</a>

 

Then create the hyperlink (what the user will click on). This is done by linking to the name of the named anchor. You need to precede the name with (#) symbol.

Insert the following line at the end of your page right before </body> tag:

 

<a href="#top">go to top</a>

 

To see the result,save the changes and open the page in a browser. Scroll down to the end of the page where it says “go to top”. If you click on it, browser will jump to the top of the page where it says “Here’s the top of the page”.

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>