{"id":22017,"date":"2016-05-18T03:01:47","date_gmt":"2016-05-17T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22017"},"modified":"2016-05-21T07:01:19","modified_gmt":"2016-05-20T21:01:19","slug":"wordpress-show-html-tags-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-show-html-tags-primer-tutorial\/","title":{"rendered":"WordPress Show HTML Tags Primer Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Show HTML Tags Primer Tutorial<\/p><\/div>\n

We’ve got one new concept and one concept revisited today with our work on some WordPress Blog functionality to allow users to show the HTML coding behind some<\/i> of the HTML elements of the RJM Programming Blog webpage of interest. Say some<\/i> because not all HTML elements lend themselves to allowing the functionality we’ve used to display the HTML involved. It is really only those HTML elements where their [element].innerHTML components can be displayable<\/i> text that will show the HTML coding for today’s new functionality … even so, we think this could be a useful learning tool for users wanting to get ideas of what HTML elements go to make up what webpage look<\/i>.<\/p>\n

So today’s new concept, at least in relation to this blog’s postings from the past, is that it hadn’t occurred to us until today that the …<\/p>\n

    \n
  1. WordPress TwentyTen theme’s top menu is constructed in such a way as to allow you to put “intelligence” into the “Add Page” Title that you enter … in other words you can include into the “Add Page” Title an HTML a<\/i> tag, for example, that performs Javascript there and then on the webpage you are currently on, rather than navigating to a new “Add Page” menu page … which is of great interest to us with today’s work, because the user is likely to be reading a webpage of interest, now, that they want to see the internal HTML coding for, compared for them, in a new popup (window.open()) webpage, rather than seeing this for the “Add Page” menu webpage (we consider less interesting, but we’ll still allow in as your functionality usage choice)
    \n<\/img>
    \n … and, as we’ve talked about before, last, at this blog with …<\/li>\n
  2. WordPress Bullet Point CSS Styling Emoji Tutorial<\/a> reminded us of the fabulous CSS functionality involving :before<\/a> and :after<\/a> (selectors) and content:<\/a> (property) usage, which we put to use here … those of you into editing XML and using Epic<\/a> may be “right at home” with these ideas … though what we do here with HTML is nothing as involved as Epic does for XML … we’re just into presenting a readonly guide, for curiosity’s sake<\/li>\n<\/ol>\n

    So what needed to change in good ol’ (TwentyTen theme’s) header.php to do this pretty simple change<\/b> …<\/p>\n


    \n<\/script>
    \n<?php
    \n if (isset($_GET['showtags'])) {
    \n echo \"<link href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/    showtags.css<\/a>' rel='stylesheet' type='text\/css'>\";
    \n }
    \n?><\/b>
    \n<\/head>
    \n<\/code><\/p>\n

    … just asking for the address bar URL to contain a (PHP $_GET[‘showtag’]) showtag=<\/i> part to the webpage call. It’s not the science of green leaved piquancy<\/a> exactly.<\/p>\n

    And so if you want to see what we have here with extra HTML tagging shown, in a new popup window, try this live run<\/a> link, and “chow for now”.<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n