HTML Links Examples

Related:
• HTML Links Tutorial
• CSS Hyperlinks
• HTML Examples

This page contains examples of HTML links - examples of hyperlink-specific code that you can use for your own website.

To use the code, copy it straight from the text box and paste it into your own website. Feel free to modify it as required.

Description	Code	Example
Basic Link	<!-- HTML codes by Quackit.com --> <p><a href="http://www.quackit.com/html/tutorial/html_links.cfm">About HTML Links</a></p>	About HTML Links
Open Link in New Window	<!-- HTML codes by Quackit.com --> <p><a href="http://www.quackit.com/html/tutorial/codes" target="_blank">HTML Codes</a></p>	HTML Codes
Open Link in Popup Window (using JavaScript)	<!-- HTML codes by Quackit.com --> <script type="text/javascript"> // Popup window code function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=yes,location=no,directories=no,status=yes') } </script> <p><a href="JavaScript:newPopup('http://www.quackit.com/myspace/codes');">MySpace Codes</a></p> (You can modify the parameters. For example, height, width, menubars etc)	MySpace Codes
Email Link	<!-- HTML codes by Quackit.com --> <p><a href="mailto:homer@example.com?subject=I love your work!">Email Homer!</a></p>	Email Homer!
Named Anchor. This creates a link that "jumps" to a specified place on a page. The code consists of two parts: the actual anchor name (place this anywhere within any HTML document), and the link to the anchor (place this anywhere else you like - even on another web page).	<!-- HTML codes by Quackit.com --> <a name="myNamedAnchor"></a> <p><a href="http://www.quackit.com/html/examples/html_links_examples.cfm#myNamedAnchor">Jump to the named anchor</a></p>	Jump to the named anchor
Change Link Color	<!-- HTML codes by Quackit.com --> <p><a style="color:green;" href="http://www.quackit.com/html/html_color_codes.cfm">HTML Colors Codes...</a></p>	HTML Colors Codes...
Remove Underline	<!-- HTML codes by Quackit.com --> <p><a style="text-decoration:none;" href="http://www.quackit.com/css/properties/css_text-decoration.cfm">Text Decoration</a></p>	Text Decoration
Hover Effects 1	<!-- HTML codes by Quackit.com --> <style type="text/css"> a:link.cool-hover-1 {color:blue;background:transparent;} a:visited.cool-hover-1 {color:orange;background:transparent;} a:active.cool-hover-1 {color:red;background:transparent;} a:hover.cool-hover-1 {text-decoration:none;color:green;font-weight:bold;} </style> <p><a class="cool-hover" href="http://www.quackit.com/css/properties/css_text-decoration.cfm">Text Decoration</a></p>	Text Decoration
Hover Effects 2	<!-- HTML codes by Quackit.com --> <style type="text/css"> a:link.cool-hover-2 {} a:visited.cool-hover-2 {} a:active.cool-hover-2 {} a:hover.cool-hover-2 {background-color:orange;color:white;} </style> <p><a class="cool-hover-2" href="http://www.quackit.com/css/properties/css_text-decoration.cfm">Text Decoration</a></p>	Text Decoration
Hover Effects 3	<!-- HTML codes by Quackit.com --> <style type="text/css"> a:link.cool-hover-3 {text-decoration:none;color:brown;} a:visited.cool-hover-3 {text-decoration:none;color:brown;} a:active.cool-hover-3 {text-decoration:none;color:brown;} a:hover.cool-hover-3 {text-decoration:none;color:brown;border-bottom:1px dashed brown;} </style> <p><a class="cool-hover-3" href="http://www.quackit.com/css/properties/css_text-decoration.cfm">Text Decoration</a></p>	Text Decoration
Linked Image	<!-- HTML codes by Quackit.com --><a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="0" /></a><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p>

HTML

HTML Links Examples

Enjoy this page?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING