{"id":45850,"date":"2019-08-05T03:01:17","date_gmt":"2019-08-04T17:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45850"},"modified":"2020-04-12T08:34:33","modified_gmt":"2020-04-11T22:34:33","slug":"html5-mark-tag-with-glowing-text-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-with-glowing-text-tutorial\/","title":{"rendered":"HTML5 Mark Tag with Glowing Text Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Mark Tag with Glowing Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit_glow.jpg\" title=\"HTML5 Mark Tag with Glowing Text Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Mark Tag with Glowing Text Tutorial<\/p><\/div>\n<p>To get the background to our attention seeking &#8220;mark&#8221; tag &#8220;glowing text&#8221; application please read &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML5 Mark Tag Div Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-div-contenteditable-tutorial\/'>HTML5 Mark Tag Div Contenteditable Tutorial<\/a> &#8230; along with &#8230;<\/li>\n<li><a title='Glowing Text Validation Primer Tutorial' href='#gtvpt'>Glowing Text Validation Primer Tutorial<\/a>&#8216;s thread of blog postings below inspired by the CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a><\/li>\n<\/ul>\n<p> &#8230; today&#8217;s use quite apt for this &#8220;mark&#8221; tag&#8217;s text highlighting talent.  It&#8217;s default highlighting is a strong yellow background colour, but you can apply this &#8220;glowing text&#8221; CSS class to achieve a more &#8220;in your face result&#8221;, which you can try (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html-GETME\">markit.html<\/a>&#8216;s) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\">live run<\/a> link &#8230; or below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html?x=x\" style=\"width:100%;height:450px;\"><\/iframe><\/p>\n<p> &#8230; yourself, to see what the effect is of &#8220;mark highlighting&#8221; and &#8220;glowing text&#8221;.<\/p>\n<hr>\n<p id='gtvpt'>Previous relevant <a target=_blank title='Glowing Text Validation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/glowing-text-validation-primer-tutorial\/'>Glowing Text Validation Primer 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\/glowing_text_validation.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Glowing Text Validation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/glowing_text_validation.jpg\" title=\"Glowing Text Validation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Glowing Text Validation Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s application of the use of CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a> with <a title='Shooting Star Game Primer Tutorial' href='#ssgpt'>Shooting Star Game Primer Tutorial<\/a> was just one idea regarding the use of glowing text.  What about using it with form validation?<\/p>\n<p>Yes, that&#8217;s &#8220;a goer&#8221; <font size=1>&#8230; see, even the pamplettes are nodding<\/font>.  The reason, of course, is that glowing text is a mechanism whereby you can grab the attention of even the most blas\u00e9 of online users.  And especially if the field you are &#8220;form validating&#8221; is mission critical, this could be a good ploy.<\/p>\n<p>See how we apply this (by making mistakes filling in the forms) with &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html--GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html--GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html\">html5_form_constraint_validation.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html\" title=\"Click picture\">live run<\/a> as featured on <a target=_blank title='HTML5 Form API Validation Revisit Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-form-api-validation-revisit-tutorial\/'>HTML5 Form API Validation Revisit Tutorial<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html-GETME\">oninvalid.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html\" title=\"Click picture\">live run<\/a> as featured on <a target=_blank title='\"HTML Oninvalid Event Form Validation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-primer-tutorial\/'>HTML Oninvalid Event Form Validation Primer Tutorial<\/a><\/li>\n<\/ul>\n<hr>\n<p id='ssgpt'>Previous relevant <a target=_blank title='Shooting Star Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shooting-star-game-primer-tutorial\/'>Shooting Star Game Primer 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\/shooting_star_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shooting Star Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.jpg\" title=\"Shooting Star Game Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Shooting Star Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got one of those pretty simple &#8220;click &#8217;em up&#8221; games for you today, inspired by the CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a>, thanks.<\/p>\n<p>That set us to thinking of Emojis we could apply (in front of the great background ideas derived from this advice) and looked up <a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a> (is good for looking up Emoji names or concepts in words) and onto <a target=_blank title='FileFormation Information website' href='http:\/\/www.fileformat.info'>FileFormat Information<\/a> (is great for HTML Entity determinations for your less complex Emojis) and even <a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> (is great for HTML Entity determinations for Emojis of all complexities) to determine some components to our game, those being &#8230;<\/p>\n<ul>\n<li>&#127775; &#8230; star<\/li>\n<li>&#9732;&#65039; &#8230; comet<\/li>\n<li>&#127765; &#8230; moon<\/li>\n<\/ul>\n<p> &#8230; which, in turn, led to thoughts regarding a game &#8230;<\/p>\n<ul>\n<li>for one player<\/li>\n<li>that rewards fast reflexes &#8230; and &#8230;<\/li>\n<li>scores via onclick event logic on each component<\/li>\n<li>according to levels of difficulty &#8230; and &#8230;<\/li>\n<li>lessens the score for &#8220;blazing away&#8221; clicks (or touches) &#8230; for that, if a player score is (made up of) <i>score\/goes<\/i> then &#8220;goes&#8221; is incremented by any document.body onclick event during the game<\/li>\n<\/ul>\n<p>Levels of difficulty &#8230; pour quoi?  Well, we can change the &#8230;<\/p>\n<ul>\n<li>Emoji font-size &#8230; and\/or &#8230;<\/li>\n<li>Movement potential of emoji (in pixels) in any &#8220;setTimeout(movecomponents, 100);&#8221; <sup>1<\/sup>\/<sub>10<\/sub>th of a second call cycle<\/li>\n<\/ul>\n<p>Have a go of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html_GETME\">shooting_star_game.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html\" title=\"Click picture\">game<\/a> if you like, to see this in action.<\/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='#d45778' onclick='var dv=document.getElementById(\"d45778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45778' 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='#d45813' onclick='var dv=document.getElementById(\"d45813\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/validation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45813' 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='#d45850' onclick='var dv=document.getElementById(\"d45850\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mark\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45850' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>To get the background to our attention seeking &#8220;mark&#8221; tag &#8220;glowing text&#8221; application please read &#8230; HTML5 Mark Tag Div Contenteditable Tutorial &#8230; along with &#8230; Glowing Text Validation Primer Tutorial&#8216;s thread of blog postings below inspired by the CSS &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-with-glowing-text-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":[210,281,3022,2349,576,578,2165,997,1319],"class_list":["post-45850","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-class","tag-css","tag-glowing-text","tag-highlight","tag-html","tag-html5","tag-mark","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45850"}],"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=45850"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45850\/revisions"}],"predecessor-version":[{"id":48564,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45850\/revisions\/48564"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}