{"id":34116,"date":"2017-11-04T03:01:03","date_gmt":"2017-11-03T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34116"},"modified":"2017-11-04T12:05:47","modified_gmt":"2017-11-04T02:05:47","slug":"html5-time-tag-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-time-tag-primer-tutorial\/","title":{"rendered":"HTML5 Time Tag Primer Tutorial"},"content":{"rendered":"<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><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","protected":false},"excerpt":{"rendered":"<p>You might be forgiven reading this webpage about the time 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. But you can tailor the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-time-tag-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,37],"tags":[155,210,281,354,2212,576,578,652,2165,997,2128,1200,1209,1319],"class_list":["post-34116","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-body","tag-class","tag-css","tag-dom","tag-head","tag-html","tag-html5","tag-javascript","tag-mark","tag-programming","tag-pseudo-element","tag-stop-press","tag-style","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34116"}],"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=34116"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34116\/revisions"}],"predecessor-version":[{"id":34133,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34116\/revisions\/34133"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}