{"id":22675,"date":"2016-06-12T03:01:04","date_gmt":"2016-06-11T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22675"},"modified":"2016-06-12T18:02:08","modified_gmt":"2016-06-12T08:02:08","slug":"html-a-tag-navigation-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-a-tag-navigation-primer-tutorial\/","title":{"rendered":"HTML a Tag Navigation Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/non_navigation.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML a Tag Navigation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_a_tag_navigation.jpg\" title=\"HTML a Tag Navigation Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML a Tag Navigation Primer Tutorial<\/p><\/div>\n<p>Wonder if you were reading yesterday&#8217;s <a target=_blank title='YouTube API Iframe Synchronicity Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-resizing-tutorial\/'>YouTube API Iframe Synchronicity Resizing Tutorial<\/a> and its PHP code snippet &#8230;<\/p>\n<p><code><br \/>\n<b>&lt;?php<br \/>\n  if (strpos($p1, \".\") !== false) {<br \/>\n     echo \"\\n <\/b>window.open('http:\/\/www.youtube.com\/watch?v=K5StTXQofqs', '_blank', 'top=50,left=50,width=500,height=500');<b> \\n\";<br \/>\n  } else {<br \/>\n     echo \"\\n document.getElementById('myh1').innerHTML=\\\"Enjoy the Videos ... &lt;span id=sw&gt;&lt;a style=color:red; onclick=rew(-1);&gt;-&lt;\/a&gt;Width (100%)&lt;a style=color:green; onclick=rew(1);&gt;+&lt;\/a&gt;&lt;\/span&gt; &lt;span id=sh&gt;&lt;a style=color:red; onclick=reh(-1);&gt;-&lt;\/a&gt;Height (90%)&lt;a style=color:green; onclick=reh(1);&gt;+&lt;\/a&gt;&lt;\/span&gt; ... Thanks &lt;a target=_blank title='YouTube' href='http:\/\/www.youtube.com'&gt;YouTube&lt;\/a&gt;\\\"; \\n\";<br \/>\n  }<br \/>\n?&gt;<\/b><br \/>\n<\/code><\/p>\n<p>?  Did you notice the use of HTML <a target=_blank title='HTML a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'><i>a<\/i><\/a> links with no <a target=_blank title='HTML a tag href property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_a_href.asp'><i>href<\/i><\/a> property?  What happens here?  Well, no navigation happens, and that is what is intended here, and we wish for the user&#8217;s eyes to stay glued to the screen right where they are, without interruption.  It&#8217;s become some usage we&#8217;ve used before.  Do you remember &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Button Ideas Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-button-ideas-primer-tutorial\/'>HTML Button Ideas Primer Tutorial<\/a>&#8216;s <a target=_blank title='button_ideas.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.html_GETME'>button_ideas.html<\/a> with its <a target=_blank title='HTML Button Ideas Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/button_ideas.html'>live run<\/a>.<\/li>\n<li><a target=_blank title='HTML\/Javascript Canvas Fractions Drag and Drop Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-fractions-drag-and-drop-tutorial\/'>HTML\/Javascript Canvas Fractions Drag and Drop Tutorial<\/a>&#8216;s <a target=_blank title='fraction_chalkboard.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html--GETME'>fraction_chalkboard.html<\/a>  with its <a target=_blank title='HTML\/Javascript Canvas Fractions Drag and Drop Tutorial' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/fraction_chalkboard.html'>live run<\/a>.<\/li>\n<\/ul>\n<p>?  Now we&#8217;re pretty sure we got keen on this usage in preference to hashtag <i>href<\/i> entries (like #), on the rare occasions of applicability, because with the hashtag navigations we&#8217;re pretty sure we&#8217;ve seen &#8220;the screen move around&#8221;, but be that as it may, and don&#8217;t want to spoil your &#8220;fun&#8221; experimenting with our web application today, but cannot re-simulate that hashtag navigation movement with our examination of HTML <i>a<\/i> tag navigation issues not involving any <a target=_blank title='HTML a tag href property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_a_target.asp'><i>target<\/i><\/a> property and &#8220;internally&#8221; navigating, or attempting to not navigate at all, trying out the following HTML <i>a<\/i> tag <i>href<\/i> property ideas in our HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/non_navigation.html_GETME\">non_navigation.html<\/a> code today (that you can try for yourself <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/non_navigation.html\" title='Click picture'>here<\/a>) &#8230;<\/p>\n<ul>\n<li>no <i>href<\/i> defined at all<\/li>\n<li><i>href<\/i>=javascript:;<\/li>\n<li><i>href<\/i>=javascript:none;<\/li>\n<li><i>href<\/i>=# &#8230; ie. hashtag navigation eg. #mybod and #atend for top of webpage and bottom of webpage respectively<\/li>\n<li><i>href<\/i>=non_navigation.html;<\/li>\n<\/ul>\n<p> &#8230; many of the ideas for which were inspired by this <a target=_blank title='Inspiring link' href='http:\/\/stackoverflow.com\/questions\/680785\/on-window-location-hash-change'>inspiring link<\/a> &#8230; thanks  &#8230; and looked at the <a target=_blank title='Javascript event information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_events.asp'>Javascript event<\/a> logic concepts of &#8230;<\/p>\n<ol>\n<li>webpage refresh, which does not really have its own Javascript event associated with it<\/li>\n<li><a target=_blank title='Javascript event onbeforeunload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onbeforeunload.asp'>onbeforeunload<\/a> event &#8230; ideas for the application of which we&#8217;d like to thank this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/738546\/javascript-onrefresh-or-onreload'>useful link<\/a><\/li>\n<li><a target=_blank title='Javascript event onunload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onunload.asp'>onunload<\/a> event<\/li>\n<li><a target=_blank title='Javascript event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onload.asp'>onload<\/a> event<\/li>\n<li><a target=_blank title='Javascript event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'>onclick<\/a> event<\/li>\n<li><a target=_blank title='Javascript event onmouseover information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmouseover.asp'>onmouseover<\/a> event<\/li>\n<\/ol>\n<p> &#8230; trapping the first one relating to try to tie down that idea of &#8220;the screen moving around&#8221; to an HTML <i>a<\/i> tag <i>href<\/i> usage &#8230; but we didn&#8217;t discover anything here, exactly, though we know an undefined HTML <i>a<\/i> tag <i>href<\/i> works a treat for &#8220;no movement&#8221; nor distractions.<\/p>\n<p>Now with all this you may be wondering with our experiments, why not just use another type of HTML element, even, perhaps an HTML <a target=_blank title='HTML div tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element?  Yes, you can, but we tend to like to &#8216;Think HTML a tag, <a target=_blank title='Think Think tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/think-think-game-primer-tutorial\/'>Think<\/a> navigation.&#8217;<\/p>\n<p>Another couple of interests with today&#8217;s work is that &#8230;<\/p>\n<ol>\n<li>we use window.location.hash monitoring as a means to trap hashtag movement &#8230; pretty hugely useful concept &#8230; thanks to www contributors &#8230; and &#8230;<\/li>\n<li>we find another fairly practical use for the HTML event property [element].outerHTML as the content of our HTML a tag [element].title properties, added dynamically using Javascript DOM techniques<\/li>\n<\/ol>\n<p>In any case, today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_a_tag_navigation.jpg\">tutorial picture<\/a> summarises our findings quite well, for your perusal, and interest, we hope.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d22675' onclick='var dv=document.getElementById(\"d22675\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22675' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wonder if you were reading yesterday&#8217;s YouTube API Iframe Synchronicity Resizing Tutorial and its PHP code snippet &#8230; &lt;?php if (strpos($p1, &#8220;.&#8221;) !== false) { echo &#8220;\\n window.open(&#8216;http:\/\/www.youtube.com\/watch?v=K5StTXQofqs&#8217;, &#8216;_blank&#8217;, &#8216;top=50,left=50,width=500,height=500&#8217;); \\n&#8221;; } else { echo &#8220;\\n document.getElementById(&#8216;myh1&#8217;).innerHTML=\\&#8221;Enjoy the Videos &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-a-tag-navigation-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[354,400,557,576,652,830,1912,861,870,871,874,1861,997,1911,1319,1418],"class_list":["post-22675","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-dom","tag-event","tag-hashtag","tag-html","tag-javascript","tag-navigation","tag-onbeforeunload","tag-onclick","tag-onload","tag-onmouseover","tag-onunload","tag-outerhtml","tag-programming","tag-refresh","tag-tutorial","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22675"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=22675"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22675\/revisions"}],"predecessor-version":[{"id":22700,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22675\/revisions\/22700"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}