<!doctypehtml><meta charset=utf-8><meta content=width=device-width,initial-scale=1.0,maximum-scale=2.0,user-scalable=yes name=viewport><link href=/home/include/master.css media=Screen rel=stylesheet><link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)"href=/home/include/mobile.css rel=stylesheet><script src=/home/include/master.js></script><link rel="shortcut icon"href=/favicon.ico type=image/png><title>
   Hyperlinks
  </title><meta content="How to create hyperlinks, including the target attribute and internal hyperlinks."name=description><script>var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-388844-2']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();</script><body><div id=boundary><div id=header><div id=hlogo><a href=/ target=_top> <img alt height=40 id=home src=/images/ihome/homebtn.png width=100> </a></div><div id=mc_mobilemenu onclick=mc_menu();>MENU</div><div id=nav><ul><li><a href=/video/> Video </a><li><a href=/audio/> Audio </a><li><a href=/lighting/> Lighting </a><li><a href=/photography/> Photography </a><li><a href=/graphics/> Graphics </a><li><a href=/computer/> Computers </a><li><a href=/internet/> Internet </a><li><a href=/glossary/> Glossary </a><li><a href=/equipment/> Equipment </a><li><a href=/downloads/> Downloads </a><li><a href=/misc/> Misc </a><li><a href=/links/> Links </a></ul></div></div><div id=bc><div id=bc1><a href=/> Home </a> : <a href=/internet/> Internet </a> : <a href=./> HTML </a> : Hyperlinks <div id=bc2></div></div></div><div id=content><table align=center border=0 cellpadding=8 cellspacing=8 width=728><tbody><tr bgcolor=#F3F3F3 valign=top><td width=110><b> HTML Tutorial: </b><td><a href=./> Introduction </a> | <a href=html-basics.html> HTML Basics </a> | Hyperlinks | <a href=image-tag.html> Images </a> | <a href=tables.html> Tables </a><tr bgcolor=#F3F3F3 valign=top><td><b> On This Page: </b><td><a href=#basics> Hyperlinks </a> | <a href=#absolute> Absolute Links </a> | <a href=#drel> Document-Relative Links </a> | <a href=#srrel> Root-Relative Links </a> | <a href=#targets> Targets </a> | <a href=#internal> Internal Hyperlinks </a> | <a href=#email> E-Mail Links </a></table><p><i> Important Definitions: </i> <br> Source Page = The page containing the hyperlink. <br> Destination Page = The page being linked to, i.e. you click a hyperlink in the source page to go to the destination page. <br> Directory = Folder (these terms are interchangeable)<hr><a name=basics> </a><h1>Hyperlinks</h1><p>Hyperlinks are created with an "href" tag ( <b> h </b> yperlink <b> ref </b> erence). In it's simplest form the tag looks like this:<p><span class=code2> &LTa href="page1.html"> </span> <span class=code3> Go To Page 1 </span> <span class=code2> &LT/a> </span><p>In this example, the text "Go To Page 1" becomes a hyperlink to a page called "page1.html". The link looks like this: <br> <a href="javascript:alert('This is just a dummy hyperlink.');"> Go To Page 1 </a><p>There are two distinct types of hyperlink: "absolute" and "relative". Absolute links are quite simple, but relative links take a bit of getting used to. Relative links are actually divided into two further categories: "document-relative" and "site-root-relative".<hr><h3><a name=absolute> </a> Absolute Links</h3><p>An absolute link (or "absolute URL link") contains a complete internet address, just the same as if you typed the address into your browser's address bar. It doesn't matter where the source page is in relation to the destination page, the link will always work as long as the destination page exists. Most absolute links begin with "http://" and follow this simple format:<p><span class=code2> &LTa href="http://www.mysite.com/index.html"> </span> <span class=code3> Go To My Site </span> <span class=code2> &LT/a> </span><hr><h3><a name=drel> </a> Document-Relative Links</h3><p>Document-relative links use directions from the source page to the destination page, sort of like saying "Start here then follow this path until you reach the destination".<p><img alt="Directory Tree"align=right height=245 hspace=6 src=../images/tree.gif width=252> There are three ways to do this - the method you use will depend on the location of the source and destination pages in relation to each other. We will use the example on the right and create hyperlinks from the page called <i> sourcepage.html </i> to other pages in the site.<p><b> (1) If the destination page is in the same directory as the source page </b> <br> All you need to specify is the source file name:<p><span class=code2> &LTa href="page1.html"> </span> <span class=code3> Go To Page 1 </span> <span class=code2> &LT/a> </span><p><b> (2) If the destination page is in a folder inside the source page's folder </b> <br> Specify the folder name and then the file name:<p><span class=code2> &LTa href="directory2/page2.html"> </span> <span class=code3> Go To Page 2 </span> <span class=code2> &LT/a> </span><p><b> (3) If the destination page is in a folder outside the source page's folder </b> <br> Use the special instruction <span class=code2> ../ </span> which signifies "one directory higher".<p>The following link means "Go up one directory level, then go to a folder called <i> directory3 </i> , then to a file called <i> page3.html </i> ":<p><span class=code2> &LTa href="../directory3/page3.html"> </span> <span class=code3> Go To Page 3 </span> <span class=code2> &LT/a> </span><p>You can repeat the <span class=code2> ../ </span> to make the link more than one level higher, for example, "Go up two levels, to a file called <i> index.html </i> ":<p><span class=code2> &LTa href="../../index.html"> </span> <span class=code3> Go To The Index Page </span> <span class=code2> &LT/a> </span><p><i> Important Note: </i> For relative links to work, you must keep the file structure intact. For example, if you moved the <i> sourcepage.html </i> file down into the <i> directory2 </i> folder, the relative links would no longer work. In this case you would need to add another <span class=code2> ../ </span> to point the links to the correct level. For example:<p><span class=code2> &LTa href="../../../index.html"> </span> <span class=code3> Go To The Index Page </span> <span class=code2> &LT/a> </span><hr><h3><a name=srrel> </a> Site-Root-Relative Links</h3><p>Site-root-relative links use a single forward-slash <span class=code2> / </span> to signify the instruction: "Start at the document root of the site and go down the directory path from there." The format is:<p><span class=code2> &LTa href="/main-directory/directory4/page4.html"> </span> <span class=code3> Go To Page 4 </span> <span class=code2> &LT/a> </span><p>Despite the cumbersome name, this method is quite simple. The link begins at the same level as your domain and works down from there. The link above is the same as:<p><span class=code2> &LTa href="http://www.mysite.com/main-directory/directory4/page4.html"> </span> <span class=code3> Go To Page 4 </span> <span class=code2> &LT/a> </span><p>This method has the significant advantage of staying intact if you move the source page. The exact same link will work from any page anywhere in the site.<p><i> Notes: </i><ul><li>This method will not work on files on your own hard drive unless you run them through a personal web server. However once you upload the pages to your server they will work.<li>If your site does not have it's own domain name, this method is likely to cause problems. Consult your hosting provider for more information.</ul><hr><h3><a name=targets> </a> Targets</h3><p>You can specify a target window or frame for a hyperlink. This is where the linked page will open. If no target is specified, the link will open in the same window/frame. The format is this (where the target is "self"):<p><span class=code2> &LTa href="page1.html" target="_self"> </span> <span class=code3> Go To Page 1 </span> <span class=code2> &LT/a> </span><p>The target window options are: <br> <span class=code3> _self </span> : Opens in the same window and same frame. <br> <span class=code3> _top </span> : Opens in the same window, taking the full window if there is more than one frame. <br> <span class=code3> _parent </span> : Opens in the parent frame. <br> <span class=code3> _blank </span> : Opens in a new window.<p>If you have a frameset defined, you can set your target as any particular frame. For example, if you have a navigation frame called"nav" and a main frame called "main", set the target of your navigation links like so:<p><span class=code2> &LTa href="page1.html" target="main"> </span> <span class=code3> Go To Page 1 </span> <span class=code2> &LT/a> <br> &LTa href="page2.html" target="main"> </span> <span class=code3> Go To Page 2 </span> <span class=code2> &LT/a> </span> <br> ...etc.<p><i> Note: </i> Instead of specifying a target for each individual link, you can define a "base target" for an entire frame or page. This means that every link on the page will use the base target by default. Place the base target tag in the page's head. Example:<p><span class=code2> &LTbase target="_blank"> </span><hr><h3><a name=internal> </a> Link to a Specific Part of a Page (Internal Hyperlink)</h3><p>An internal hyperlink is a link which points to a particular part of a page. This can be useful in long pages with lots of sub-sections. For example, the links at the top of this page are internal links pointing to each sub-heading.<p>Internal hyperlinks require an anchor tag with the "name" attribute like so:<p><span class=code2> &LTa name="part2"> </span> <span class=code3> Part 2 </span> <span class=code2> &LT/a> </span><p>Create an anchor like this at the place in the page you want to link to. It doesn't matter if there is anything between the open and close tags.<p>Then create a hyperlink which refers to this anchor with a hash (#) like so:<p><span class=code2> &LTa href="#part2"> </span> <span class=code3> Go To Part 2 </span> <span class=code2> &LT/a> </span><p>This assumes that the name anchor is on the same page as the hyperlink. To link to an anchor on a separate destination page, simply create a normal link with the anchor name appended to the file name like so:<p><span class=code2> &LTa href="page1.html#part2"> </span> <span class=code3> Go To Page 1, Part 2 </span> <span class=code2> &LT/a> </span><p><i> Notes: </i><ul><li>Browsers treat internal links exactly the same way as normal links, i.e. as if they were a separate page. This can result in some confusion with back and forward buttons.<li>If an internal hyperlink on the same page doesn't work, try including the page's file name in the hyperlink (as if you were linking to a separate page).<li>Sometimes internal hyperlinks don't work in pages on your hard drive unless you are running a personal web server. They will work when you upload them to your site.</ul><hr><h3><a name=email> </a> E-Mail Links (mailto)</h3><p>E-Mail links, otherwise known as a "mailto" links, use the following format:<p><span class=code2> &LTa href="mailto:myname@mysite.com"> </span> <span class=code3> Click Here to Email Me </span> <span class=code2> &LT/a> </span><p>This type of link is a special case, completely different to those described above. Instead of linking to a place on the internet, clicking this link causes the user's computer to open it's default email program (e.g. Outlook Express, Eudora, etc) and prepare a blank email to the specified address. The user then enters their message and sends the email in the normal way.<p>If you want to be tricky, you can add a "subject" attribute to the link. This will automatically insert the specified subject line into the email:<p><span class=code2> &LTa href="mailto:myname@mysite.com?subject=Inquiry From Website"> </span> <span class=code3> Click Here to Email Me </span> <span class=code2> &LT/a> </span><p><i> Notes: </i><ul><li>The subject attribute doesn't work in all browser/email programs. Those programs which don't support it will probably just ignore it, but there are no guarantees that it won't cause an error. Use at your own risk.<li>Be aware that using mailto links on your website is an open invitation to spam. Malicious programs called "email harvesters" troll the internet looking for these links - when they find yours they will add it to a database for spammers. This is why we recommend using a contact form rather than a mailto link wherever possible.</ul><hr><p>Next Page: <a href=image-tag.html> Image Tag </a></div><div style=clear:both;height:20px;></div><div style="clear:both;min-height:65px;margin-top:20px;padding:0px 0px 20px 0px;"><div id=adsense_footer><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><ins class=adsbygoogle data-ad-client=ca-pub-9498124618136592 data-ad-format=auto data-ad-slot=1373970006 style=display:block> </ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div class=mc_clearboth></div><script>if (typeof mc_page_author!='undefined' && typeof mc_pageinfo!='undefined') {
	mc_pageinfo(mc_page_author,mc_page_published,mc_page_updated);
}</script></div><div id=footer><div id=ft1><a href=/> MediaCollege.com </a> - <a href=/home/> About Us </a> - <a href=/home/contact/> Contact Us </a></div><div id=ft2>All content is Â© Copyright MediaCollege.com except where stated otherwise. Usage is subject to <a href=/home/terms.html> Terms & Conditions </a> .</div></div></div>