HTML Links 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.

<p><a href="/html/tutorial/html_links.cfm">Basic Link</a></p>

<p><a href="/html/codes/html_open_link_in_new_window.cfm" target="_blank">Open link in new window</a></p>

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>
<p><a href="/javascript/examples/sample_popup.cfm" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">JavaScript Popup Window</a></p>

More Info: JavaScript Popup Windows

<p><a href="mailto:homer@example.com?subject=I love your work!">Email Homer!</a></p>

More Info: Email Links

<p><a href="/html/tutorial/html_links.cfm#link_targets" target="_blank">Jump to a named anchor</a></p>
<p>There are two parts to named anchors. First, you need to set up the named anchor at the place you want the link to jump to. That will look something like this: <code>&lt;a id="myNamedAnchor"&gt;&lt;/a&gt;</code> Once you've done that, you can link to the named anchor using the page URL followed by a hash (#), then the anchor name. For more information, see the following links.</p>

Prior to HTML5, named anchors used the name attribute. However this attribute is obsolete in HTML5 and you should use the id attribute instead (as outlined above).

More Info: HTML Link Code, HTML Links Tutorial, HTML <a> Tag

<p><a style="color:green;" href="/html/html_color_codes.cfm">Green link</a></p>

More Info: HTML Text Color Code, CSS Color

<p><a style="text-decoration:none;" href="/css/properties/css_text-decoration.cfm">Text Decoration</a></p>

More Info: CSS Hyperlinks

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a:link {color:blue;background:transparent;}
a:visited {color:lightblue;background:transparent;}
a:active {color:red;background:transparent;}
a:hover {text-decoration:none;color:orange;font-weight:bold;}
</style>
</head>
<body>
<p><a href="/css/embedded_style_sheets.cfm">Hover over me!</a></p>
</body>
</html>

More Info: Text Decoration, CSS Color

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a:link {}
a:visited {}
a:active {}
a:hover {background-color:orange;color:white;}
</style>
</head>
<body>
<p><a href="/css/embedded_style_sheets.cfm">Hover over me!</a></p>
</body>
</html>

More Info: Text Decoration, CSS Color

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a:link {text-decoration:none;color:brown;}
a:visited {text-decoration:none;color:brown;}
a:active {text-decoration:none;color:brown;}
a:hover {text-decoration:none;color:brown;border-bottom:1px dashed brown;}
</style>
</head>
<body>
<p><a href="/css/embedded_style_sheets.cfm">Hover over me!</a></p>
</body>
</html>

More Info: Text Decoration, CSS Color

<a target="_blank" href="http://www.natural-environment.com/blog/2008/04/22/fiordland-national-park-new-zealand/"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" border="0" /></a>

More Info: Image Link Code, HTML Image Maps

Web.QHMIT.com

HTML Links Examples

Related