{"id":34142,"date":"2017-11-05T03:01:38","date_gmt":"2017-11-04T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34142"},"modified":"2017-11-05T19:00:33","modified_gmt":"2017-11-05T09:00:33","slug":"html5-mark-tag-view-page-source-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-view-page-source-tutorial\/","title":{"rendered":"HTML5 Mark Tag View Page Source Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Match Tag View Page Source Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.jpg\" title=\"HTML5 Match Tag View Page Source Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML5 Mark Tag View Page Source Tutorial<\/p><\/div>\n<p>As we mentioned in the <a title='HTML5 Time Tag Primer Tutorial Stop Press' href='#tsp'>&#8220;Stop Press&#8221;<\/a> of yesterday&#8217;s <a title='HTML5 Time Tag Primer Tutorial' href='#html5ttpt'>HTML5 Time Tag Primer Tutorial<\/a> we want to combine &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML5 mark tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_mark.asp'><i>mark<\/i><\/a> tag (introduced with HTML5) which highlights parts of text &#8230; with &#8230;<\/li>\n<li>the web browser (incarnation of Firefox&#8217;s) View Page Source &#8230; with &#8230;<\/li>\n<li>the &#8220;highlighting&#8221; talents of the HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> tag (that we talked about at <a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a>) nesting that aforesaid mentioned <a target=_blank title='HTML5 mark tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_mark.asp'><i>mark<\/i><\/a> tag &#8230; along with &#8230;<\/li>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=emptive' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques allowing HTML to do things you might think need (a serverside language like) PHP, but don&#8217;t, necessarily<\/li>\n<\/ul>\n<p>This <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html\">live run<\/a> link takes you to how, yesterday, we searched for the string &#8220;iw&#8221; in <a target=_blank title='use_time.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html_GETME'>use_time.html<\/a> and we allow you to run another &#8220;View Page Source&#8221; &#8220;highlighted search&#8221; of your own below (or just rerun that other one) &#8230;<\/p>\n<form style='background-color:yellow;border: 2px solid red;border-radius:40px;padding:15px 15px 15px 15px;' method='GET' target='_blank' action='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html'>\nIn: <input style='width:87%;' type='url' name='in' value='HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html' title='Search in ...'><\/input><br \/>\nFind: <input type='text' name='find' value='iw' title='Search for ...'><\/input><br \/>\n<input type='submit' value='Highlighted View Page Source Search'><\/input><br \/>\n<\/form>\n<p>As you might surmise, you can tweak today&#8217;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html_GETME' title='find_and_highlight.html'>find_and_highlight.html<\/a> for your own purposes to aid with contextual highlighted (View Page Source) HTML content searches on <b>your<\/b> domain.  When this sort of transfer of functionality can happen it is legitimate to think of your web application as a &#8220;tool&#8221;, and we may revisit this in terms of &#8220;tightening it up&#8221; a bit with a view to it being a &#8220;tool&#8221; for us.  Say &#8220;<b>your<\/b>&#8221; because the <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=emptive' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> ideas we use are not likely to work in cross-domain scenarios.<\/p>\n<hr>\n<p id='html5ttpt'>Previous relevant <a target=_blank title='HTML5 Time Tag Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-view-page-source-tutorial\/'>HTML5 Mark Tag View Page Source Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Time Tag Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.jpg\" title=\"HTML5 Time Tag Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML5 Time Tag Primer Tutorial<\/p><\/div>\n<p>You might be forgiven reading this <a target=_blank title='HTML5 tag time information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_time.asp'>webpage<\/a> about the <i>time<\/i> tag introduced with HTML5 that it is not of much use, because it doesn&#8217;t show any distinguishing feature yet, in any of the web browsers.<\/p>\n<p>But you can tailor the use of it yourself, and to show this we took the HTML lacking a &lt;head&gt;&lt;\/head&gt; section and not change this HTML at all, but add our own CSS and Javascript (DOM)  &lt;head&gt;&lt;\/head&gt; section to embellish its functionality considerably.<\/p>\n<p>We use a combination of &#8230;<\/p>\n<ul>\n<li>CSS ::after { content: &#8216;blah blah&#8217;; } <a target=_blank title='CSS pseudo elements' href='https:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp'>pseudo-element<\/a><\/li>\n<li>CSS :hover selector<\/li>\n<li>window.onload = init;   \/\/ Javascript onload functionality<\/li>\n<li>document.body.innerHTML+=styles; \/\/ Javascript where <i>styles<\/i> var<font size=1>iable<\/font> contains dynamically constructed &lt;body&gt;&lt;\/body&gt; section CSS &lt;style&gt;&lt;\/style&gt; (<b>an important thing to remember you can do<\/b> (at a document.body <i>onload<\/i> event Javascript function, for example)) &#8230; and for this we used &#8230;<\/li>\n<li>dynamically <i>class<\/i>ed HTML <i>time<\/i> elements and moving on the <i>onclick<\/i> event (for mobile device use) as per &#8230;<br \/>\n<code><br \/>\n      times[<a target=_blank title='iw findings' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html'>iw<\/a>].onclick = function() { };<br \/>\n      times[iw].className+=' atime' + iw; \/\/ the <i>times<\/i> array which is derived via<br \/>\n<\/code>\n<\/li>\n<li>\n<code><br \/>\n    var times=document.getElementsByTagName('time');<br \/>\n<\/code>\n<\/li>\n<li>to be able to dynamically populate that <i>styles<\/i> var<font size=1>iable<\/font> as per codelines like &#8230;<br \/>\n<code><br \/>\n        styles=styles.replace(\"&lt;\/style&gt;\",\" .atime\" + <a target=_blank title='iw findings' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html'>iw<\/a> + \":hover::after { content: ' is \" + sin(yyyy2,4) + \"\/\" + sin(mm2,2) + \"\/\" + sin(dd2,2) + \" \" + sin(hh2,2) + \":\" + sin(minm2,2) + \":\" + sin(ss2,2) + \"'; } &lt;\/style&gt;\");<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Here is a link to some downloadable HTML programming source code which you may want to rename to <a target=_blank title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html_GETME\">use_time.html<\/a> for this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p id='tsp'><i><b>Stop Press<\/b><\/i><\/p>\n<p>If you were an &#8220;early bird&#8221; reading the early editions of this blog post, sorry, but you will have missed this, perhaps, and then again, maybe I am wasting my time pointing this out, but, since those early editions we&#8217;ve added a couple of <a target=_blank title='iw findings' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html'>iw<\/a> links that harness some new functionality we have in our &#8220;highlighting&#8221; armoury (shall we say) making use of the new HTML5 <i>mark<\/i> tag, which we&#8217;ll be detailing more about in tomorrow&#8217;s blog posting.  Clicking these links effectively does a web browser &#8220;View Page Source&#8221; type of functionality, but also highlights and positions (to first find), in situations like the &#8220;iw&#8221; one, where it is just a counter, but is unexplained, so we leave it up to curious users to find out something about its context.<\/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='#d34116' onclick='var dv=document.getElementById(\"d34116\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34116' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d34142' onclick='var dv=document.getElementById(\"d34142\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34142' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As we mentioned in the &#8220;Stop Press&#8221; of yesterday&#8217;s HTML5 Time Tag Primer Tutorial we want to combine &#8230; mark tag (introduced with HTML5) which highlights parts of text &#8230; with &#8230; the web browser (incarnation of Firefox&#8217;s) View Page &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-view-page-source-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,37],"tags":[2105,342,435,2349,576,578,587,652,2165,997,1110,1319],"class_list":["post-34142","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-context","tag-div","tag-find","tag-highlight","tag-html","tag-html5","tag-iframe","tag-javascript","tag-mark","tag-programming","tag-search","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34142"}],"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=34142"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34142\/revisions"}],"predecessor-version":[{"id":34189,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34142\/revisions\/34189"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}