{"id":639,"date":"2015-03-06T11:18:07","date_gmt":"2015-03-06T11:18:07","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/?p=639"},"modified":"2015-03-09T12:28:36","modified_gmt":"2015-03-09T12:28:36","slug":"html-hyperlinks","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/2015\/03\/06\/html-hyperlinks\/","title":{"rendered":"HTML &#8211; Hyperlinks"},"content":{"rendered":"<p>The H in HTML stands for Hyper,but what does that mean?<\/p>\n<p>Hypertext is text which can link to other files, this is called a hyperlink. A hyperlink is composed of two parts, the anchor and the destination.<\/p>\n<p style=\"padding-left: 30px\"><span style=\"color: #00ccff\">&lt;a <\/span><span style=\"color: #99cc00\">href=&#8221;http:\/\/www.google.com&#8221;<\/span><span style=\"color: #00ccff\">&gt;<\/span><span style=\"color: #ffcc00\">Google<\/span><span style=\"color: #00ccff\">&lt;\/a&gt;<\/span><\/p>\n<p>In the example above the<a href=\"http:\/\/www.w3schools.com\/tags\/tag_a.asp\" target=\"_blank\"> anchor tag <span style=\"color: #00ccff\">&lt;a&gt;&lt;\/a&gt;<\/span><\/a> is used to set an object (text or image) as an anchor, in this case <span style=\"color: #ffcc00\">Google<\/span>. The <span style=\"color: #99cc00\">href<\/span> attribute is used to identify the destination of the link, in this case <span style=\"color: #99cc00\">http:\/\/www.google.com<\/span>. This is called an external hyperlink as the destination is on another server. If you were linking to a file on the same server then the internal hyperlink would be.<\/p>\n<p style=\"padding-left: 30px\"><span style=\"color: #00ccff\">&lt;a<\/span> <span style=\"color: #99cc00\">href=&#8221;page1.html&#8221;<\/span><span style=\"color: #00ccff\">&gt;<\/span><span style=\"color: #ff9900\">Page 1<\/span><span style=\"color: #00ccff\">&lt;\/a&gt;<\/span><\/p>\n<p>The anchor tag can be placed around other HTML elements such as images.<\/p>\n<p style=\"padding-left: 30px\">&lt;a href=&#8221;http:\/\/www.google.com&gt;&lt;img src=&#8221;googleLogo.png&#8221;&gt;&lt;\/a&gt;<\/p>\n<p>This would place a border around the image indicating that it is an anchor.<\/p>\n<p>You can specify where to open the linked document using the <a href=\"http:\/\/www.w3schools.com\/tags\/att_a_target.asp\" target=\"_blank\">target attribute<\/a>.<\/p>\n<table class=\"reference notranslate\">\n<tbody>\n<tr>\n<th>Value<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>_blank<\/td>\n<td>Opens the linked document in a new window or tab<\/td>\n<\/tr>\n<tr>\n<td>_self<\/td>\n<td>Opens the linked document in the same frame as it was clicked (this is default)<\/td>\n<\/tr>\n<tr>\n<td>_parent<\/td>\n<td>Opens the linked document in the parent frame<\/td>\n<\/tr>\n<tr>\n<td>_top<\/td>\n<td>Opens the linked document in the full body of the window<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>So if you want the Google link above to open in a new tab you would change it to.<\/p>\n<p style=\"padding-left: 30px\"><span style=\"color: #00ccff\">&lt;a <\/span><span style=\"color: #99cc00\">href=&#8221;http:\/\/www.google.com&#8221; <span style=\"color: #ff0000\">target=&#8221;_blank&#8221;<\/span><\/span><span style=\"color: #00ccff\">&gt;<\/span><span style=\"color: #ffcc00\">Google<\/span><span style=\"color: #00ccff\">&lt;\/a&gt;<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The H in HTML stands for Hyper,but what does that mean? Hypertext is text which can link to other files, this is called a hyperlink. A hyperlink is composed of two parts, the anchor and the destination. &lt;a href=&#8221;http:\/\/www.google.com&#8221;&gt;Google&lt;\/a&gt; In the example above the anchor tag &lt;a&gt;&lt;\/a&gt; is used to set an object (text or &hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17010,73746],"tags":[9201,7754,8786,9207],"class_list":["post-639","post","type-post","status-publish","format-standard","hentry","category-information-systems-development","category-structures-and-links-database","tag-html","tag-hyperlink","tag-image","tag-img"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/comments?post=639"}],"version-history":[{"count":4,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/639\/revisions"}],"predecessor-version":[{"id":648,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/639\/revisions\/648"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/media?parent=639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/categories?post=639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/tags?post=639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}