PageBuilder Noscript Method Advanced Editor

INTRODUCTION

This is a demo for using the <noscript> tag instead of HTML comment tags to create WebTV PageBuilder Advanced Editor webpages. Here I use the <noscript> ... </noscript> tags to block-out the PageBuilder built-in body tag so a new body tag can be added. I also position the noscript tags to block out the PageBuilder built-in closing </head> tag so I can extend the head section of the webpage for the addition of meta tags, <style> ... </style>, and <script> ... </script> code. Use the Thunderstone© Source Code Viewer at the bottom of this webpage to see the structure of the noscript tags used in this procedure. The <noscript> ... </noscript> tags I use in this method are used exactly the same way as the comment tags and other editor tags are used in other PB AE methods - to block the PageBuilder built-in body tag so a new custom body tag, meta tags, styles, and scripts can be correctly, HTML syntax wise, added to the head tag of a PageBuilder Advanced Editor document!

It works great by blocking the PageBuilder JavaScript functions that transfer the user selected built-in backgrounds to the Basic Editor Screen and webpage table template on the webservers. It apparently works because the PageBuilder program JavaScript prevents any JavaScript webpage content transfers into target areas in the webserver PageBuilder table template structure that are inside the noscript tags.

This method works because javascript-enabled browsers just ignore any content between the noscript tags. Another reason may be that the noscript tag is illegal inside the head tag of a document, therefore, our browsers are programmed to deliberately ignore the tag and it's contents within the head tag!

Browsers with javascript disabled, and WebTV terminals with the JS Bug, will only see the PB built-in body tag and will ignore the new AE body tag; which will cause problems displaying the webpage content, because the webpage author's intended webpage formatting style in the new body tag may not be appropriate for the initially selected background choice in the blocked-out body tag style!

This will not occur with MSN-TV browser viewers who cannot disable javascript, unless the infamous, sometimes persistent, and frustrating MSN-TV javascript bug strikes! So I just added a JS Bug warning message inside <noframes> tags, and a warning to computer users inside <noscript> tags that computer users must have javascript-enabled to view this website.

Note: See step (6) below for my suggested MSN-TV JS bug alert and noscript warning to computer users.

A warning that you may get from validators about the tags used in this method is that: "body tags should not be used inside the noscript tags." This is correct - it is illegal to use noscript tags around a body tag! Another warning may be about the noscript tag being used in the head tag of a document; which is correct - according to the HTML DTD, the noscript tag is only legal inside the body tag of a document! But, these minor HTML syntax errors do not matter, because the unwanted built-in body tag is purposely being disabled by being enclosed within the noscript tags; which is both ignored by javascript-enabled browsers. and also ignored by the browser's HTML DTD because the noscript tag is not rcognized in the head tag of a document; which makes this method a very effective Advanced Editor procedure!

THE PROCEDURE
The procedure is as follows:

     (1) Go to your PageBuilder Index and choose "Create" on the sidebar. Choose a "Background style" that you would like to work with in the Basic Editor screen. Many PageBuilders select the "Grey" background to open the Basic Editor screen and edit their webpage with.

     (2) Put an appropriate short title, like four to six characters that identifies your website subject, and that you want to apear in your webpage URL, in the "Add title" text box and click "Publish". You will get the first 20 characters of a long webpage title if you do not enter a short title and publish it first. Later you can edit the title to add a title up to 35-characters long to fit in our status bars. Check my tutorial for customizing PageBuilder URL's.

     (3) Complete your webpage Description and "Uncheck" (or leave as is) the option to have the title appear on your webpage – the advanced editor noscript tags block out the paragraph and heading tags that the title box entry is placed in on your webpage. This applies to the comment methods also – when using the PB AE methods you must put the appropriate webpage title that you want to appear on your webpage in a text box at the top of your document where your body tag markup content begins – this webpage title can be formated text, images, banners, or other suitable webpage title content. Then "Publish" the webpage again after you complete the description. Click "Done" and return to the Basic Editor screen with your "Back" key.

     (4) Now click "Edit title" and enter, in the title text box, your regular, long webpage title that you want to appear in our WebTV status bars at the bottom of the TV screen. This title box entry will also properly appear in computer window title bars at the top of windows. Then enter the closing </title> tag, followed by the beginning <noscript> tag in the title text box. Click "Done," then click "Add an item," and then click "Add text" to begin step (5) below.

Note: If your webpage title is longer than 35-characters, you will get elipisis in the status bar for the excess title length. However, if your title and AE editor tags is too long for the title text box, you can close off the title text box with a closing title tag followed by a beginning noscript tag, like this:

</title> <noscript>

Then you can place a relocated title tag anywhere within the extended head tag this method allows, like this:

<title>YourLongWebsiteTitleHere</title>

We have had the option to relocate the title anywhre within an extended head tag since the December 1999 PageBuilder upgrade.

     (5) Then "Add a text box" with your closing </noscript> tag, scripts, styles, closing head tag , and new body with your new bgcolor or background image code. Always leave this text box as "Item #1" on your webpage. This Advanced Editor layout sequence described above allows the Basic Editor screen to always remain open so the user can access all the text boxes. I repeat: put your closing </noscript> tag first, ten add your scripts, styles, closing head tag, and new body tag in that order at the beginning of this first text box at the top of your document so you can easily access it and change styles, scripts, and body tag attributes if desired.

     (6) Now here you need to publish your webpage and view the source code to verify the beginning paragraph and table tags used by the PageBuilder webpage table template that are blocked out by the noscript tags and replace them in the exact sequence to match the closing tags at the end of the first text box. With the Grey background color, you must add: <p> <table> <tr> <td> to provide the missing tags. If you used an "Add heading" text box at the top of your document you need to replace only a paragraph and h2 tag, like this: <p> <h2> for the beginning tags required for the heading text box.

You should always view the source code of an advanced editor webpage to verify that any table template formatting tag that have been altered by the PB AE editor tags are properly matched, replaced, and nested as the case may be. The latest browsers, especially Netscape, have trouble correctly displaying PageBuilder webpages with HTML table tag syntax errors. Don't let anyone tell you it's OK to avoid replacing blocked-out table tags in your PB AE documents! It may be permissible with some "loose DTD" browsers; but, it's bad practice!

Note: When you view the source code of this webpage, you will see the PageBuilder built-in tags are in capital letters, and my replacement, matching tags are in small letters in the source code.

Here's the basic editing code used in the title text box; which consists of: the website title in the title text box which is displayed in our status bars; an ending </title> tag; and a beginning PB editor <noscript> tag, like this:

PageBuilder Noscript Advanced Editor</title> <noscript>

Here's the basic editing code in the first text box at the top of the document; which includes: the ending noscript tag; added meta tags; added script and style code; the ending extended head tag; the new added custom body tag; the bgsound embed tag; the JS bug warning and the noscript warning; the title (h2 heading) at the top of the webpage; and the replaced table template tags:

</noscript> <meta name="author" content="JaxRed@webtv.net"> <meta name="creation_date" content="Sun, 10 Dec, 2000 21:30:00 GMT"> <style>  </style> <script language="javascript"> function helloMsg() {alert("Welcome to my webpage, folks! I will appreciate any comments you have about this method! Please test it anyway you like. Let me know about any problems you find. -JaxRed-"); window.setTimeout('window.status="WELCOME to my webpage, folks! -JaxRed-"', 5000); window.setTimeout('window.status="PageBuilder Noscript Method Advanced Editor"', 10000);} function goodBye() {alert("Thanks for visiting my website, folks! I hope you enjoyed your visit! Did you print the source code for this webpage? -JaxRed-");} </script> </head> <body text="#ffffff" link="#ffd700" vlink="#999999" transition="spinoutin" onLoad="helloMsg()" onUnload="goodBye()"> <embed src="http://www.transload.net/~jaxred/music/midi/BubBob.mid" hidden="true" autostart="true" loop="-1"> <div align="center"> <noframes> <limittext value="WARNING: MSN-TV JavaScript Bug Alert - Please Reload (Cmd-R)!"> </noframes> <noscript>WARNING: Computer Users Must Have SCRIPT-ENABLED To View This Webpage!</noscript> </div> <br> <h1 align="center"> <font color="#ffd700"> <i>PageBuilder Noscript Method Advanced Editor</i> </font> </h1> <p> <table> <tr> <td> </plaintext> </font><br> <br> Note: The above basic code template shows all the available options this PB AE method provides. The code is all-inclusive as a demo for all the options. I listed all the options in one location to save from typing them separaely. Admittedly, it's somwhat complex for beginning PageBuilders; but, all you have to do is omit any of the options you do not want to use. I provide a simpler code template below for beginners who do not want to add meta tags, scripts and style code to their PB AE pages to start.<br> <br>      (7) The above six steps completes the AE procedure. The rest of the webpage is completed by adding additional photos, text boxes, headings, lists, links, HTML markup, scripts, inline style, and other webpage content as you desire to complete your webpage. It may be best to add each separate item or subject as separate entry boxes, so each individual small item loads much faster than one large webpage when editing; and you will have more flexibility in rearranging items, moving them up and down, if you limit the size of individual items.<br> <h3 align="left"><font color="#ffd700"><i><u>ADDITIONAL NOTES</u></i></font></h3><br> If you want a simple noscript PB AE document, without Bug Warnings, JavaScript, meta tag, CSS Style code, a relocated title, and extended head tag, you can just use the noscript tags only to block-out the built-in body tag, so you can add a custom body tag! Just put a short 35-character, or less, webpage title for MSN-TV status bars in the title text box followed by a closing </title> tag, a closing <head> tag, and then your opening <noscript> tag, like this:<br> <br> Title text box entry: <font color="#ffd700">Your 35-character or less website title here</title> </head> <noscript></font><br> <br> And then "Add (a) text" box at the top of your document, which you place as Item #1 at the top of your document. You must place your ending </noscript> tag first in this text box, followed by your new <body> tag with your bgcolor, background image, transitions, font and link colors. Then add the webpage title you want on the top of your webpage as HTML coded headings (h1-h6), formatted text, or fancy graphic titles. You can add any additional webpage content you want in this top text box, but I suggest you stop it here and add other webpage content in additional added boxes. Always remember: the blocked-out built-in beginning paragraph and table tags I have referred to above, must be replaced at the bottom of this #1, top text box!<br> <br> Here's a suggested format for the first "Add text" box at the top of a simple PB AE noscript document:<br> <br> <font color="#ffd700"> <plaintext> </noscript> <body text="#ffffff" link="#ffd700" vlink="#999999"> <br> <h1 align="center"> <font color="#ffd700">PageBuilder Noscript Method Advanced Editor</font> </h1> <p> <table> <tr> <td> </plaintext> </font><br> <br> This simple version represents just about the bare minimum that begining PageBuilders need to use to get a PB AE noscript webpage up-and-running. Later, when they are familiar with the method, they can add the options shown in the more complex code above. <br> <br> Remember: The title that apears in the title text box noted above is the title that appears in our MSN-TV status bars and is limited to 35-characters or less - so, always use the best title you can devise with a maximum of 35 characters! Also, since the title text box holds a maximum of 64 characters, you just barely have enough space to type the ending title tag, ending head tag, and beginning noscript tag in the title text box, as I show above for this simplified method.<br> <br> Note: Even with this simple structure, you can still add JavaScript Warnings immediately following your new body tag if you so desire! As an example, add this WTV JS Bug Warning code after your new body tag, and before your webpage title, for the Bug Warning to show at the top of the page above the title. If you want the warning after the webpage title, put the code after your title!<br> <br> Here's a simple warning script for MSN-TV browsers and computers. Customize the wording as you desire:<br> <br> <font color="#ffd700"><div align="center"> <font color="red"> <noframes> <limittext value="WARNING: MSN-TV JAVASCRIPT BUG ALERT - PLEASE RELOAD (Cmd-R)!"> </noframes> <noscript>Attention PC Users: You must have JAVASCRIPT ENABLED to view this webpage!</noscript> </font> </div></font><br> <br> In the script above; the noframes tags are used to detect the MSN-TV JS bug, and only the MSN-TV browser can read the message in the limittext tag; while only non-javascript computers can read the message between the noscript tags! Also, I'm sure that you recognize that Webbers can use the MSN-TV proprietary limittext tag, without the noframes tag, to write messages to their webpages that only our browsers can read and display – just put your message in the limittext tag's value attribute, as I did in the script above.<br> <br> As an example, the following code using the limittext tag:<br> <br> <font color="#ffd700"><limittext value="Welcome fellow MSN-TV subscriber! Thanks for visiting my PageBuilder webpage! Please return soon for my latest updates to this website! -JaxRed-"></font><br> <br> Will produce the following message that only MSN-TV browsers can display:<br> <br> <font color="#ffd700"> <limittext value="Welcome fellow MSN-TV subscriber! Thanks for visiting my PageBuilder webpage! Please return soon for my latest updates to this website! -JaxRed-"> </font> <br> <br> This PageBuilder Advanced Editor method is very flexible. All you must do exactly as I demonstate in this tutorial is properly use the noscript tags to surround and block-out the PageBuilder built-in body tag. Beyond that you can extend the head tag to add scripts, meta tags, and CSS style code. I added these advanced features in this tutorial webpage only to demonstrate these options. You can selectively choose which advanced option features you desire in your document, after you thoroughly understand this procedure!<br> <br> To use all the advanced features I demonstrate in this tutorial, you must be proficient at advanced webpage construction, including advanced HTML and scripting. Do your homework, folks! Study webpage source codes; learn how PageBuilder Advanced Editor procedures work, and practice to learn. That's the purpose of this tutorial – to guide you in your own learning process by demonstrating the basic procedure! You must study and practice to grasp the basic fundamental advanced methods to be able to apply your own preferences for your webpage design!<br> <br> One of the best ways to learn HTML code and webpage design is to use an online webpage validator or source code viewer. The webpage source code viewer gives you the plain, pure HTML code; while a webpage validator will provide a critique of the website and provide a webpage evaluation report listing all errors and omissions within the webpage's code.<br> <br> If you have problems you suspect are HTML syntax problems in large, complex website code, you may want to use a validator with a "parse tree" option. A parse tree view or printout of a webpage's HTML code will show a hierarchical list of all the webpage's HTML tags exactly in the order they are coded into the webpage; which will make it easy to spot incorrect, missing, or improperly nested HTML tags in complex documents. The <a href="http://validator.w3.org/">http://validator.w3.org/</a> website has a parse tree option which is very popular!<br> <br> No tutorial can tell you absolutely everything you need to know, with little or no effort on your part - you can only learn by practice, testing, and more practice! So get going PageBuilders; make that Advanced Editor webpage beginning today! Don't sweat the tough problems you have in your study and practice – post all your problems in the PageBuilder NG's for others to see and be helped by also! Let all the "been-there-done-that" experts help you better understand solutions to your problems!<br> <br> If you build PageBuilder multipage documents with pagebreaks, just remember that you must have an ending noscript tag and new body tag for each page. Just follow the instructions in the procedure above for each page in your document; ie: you need only one (1) beginning <noscript> tag in your title text box at the beginning of the webpage; and, each page immediately following a pagebreak must have an "Add text" box with an ending </noscript> tag and new custom <body> tag!<br> <br> Always be careful when rearranging items on your webpage between pagebreaks. Always make sure that your scripts, styles, and new body tag is in a text box at the top of each page, and that each page's content was designed for that particular page scripts and styles! It's easy to get multipage contents and pagebreaks mixed up bad if you don't be careful shuffling items up and down! </TD></TR></TABLE> </P> <P> <TABLE> <TR><TD> <H3 ALIGN=left> <font color="#ffd700"><i><u>SUMMARY</u></i></font> </H3> <P ALIGN=left> To demonstrate the functionality of this PB AE method, I put scripts and style code in the extended head tag of this document. My webpage body tag loading and unloading alert scripts, and status bar welcome message are functions defined in the extended head tag ahead of the new body tag. The new body tag has a blue bgcolor and the head section style tag loads a body tag background gif image from my images website<br> <br> This is a very simple open-editor method, that beginning PageBuilders should be able to understand and use effectively! Try it, folks. It works OK without having the problem of disabling H17's beginning comment tag to open the Basic Editor screen.<br> <br> Although this method is different from H17's original PB AE comment method, I still insist that the full credit for developing the basic premise of the PageBuilder Advanced Editor belongs only to Uncle Huey, aka <a href="mailto:H17@webtv.net">H17@webtv.net</a>, who I believe is no longer with us, or has his email turned-off. No matter what variations of Advanced Editor we subsequently discover, including this method that does not use the editor tags any of the other methods use; credit for the "original premise" of disabling the PageBuilder built-in body tag so we could add our own background code belongs only to H17, and no one else! Don't ever forget that folks, and don't let anyone else try to tell you anything different!<br> <br> Thanks to all my friends who tested this method and offered their comments! A special thanks goes to my friend Angela Olson, aka <a href="mailto:Angelaruth49@webtv.net">Angelaruth49@webtv.net</a>, who tested this method with many backgrounds and multiple alignment techniques for photos and text! Angela, also wrote a <a href="http://community-2.webtv.net/Angelaruth49/AdvancedEditor/">tutorial</a> using this method for beginners that is far easier to understand and use than this tutorial!<br> <br> And finally, I must emphatically state that my efforts to bring this method to PageBuilders is most definitely not any better of an accomplishment than all the helpful posts and great webpage tutorials of the many thousands of gracious PageBuilder experts and helpers we meet every single day in the NG's! All PageBuilders have always learned from each other and taught each other, to the best of our abilities in the PageBuilder NG's. Folks, we are all together in this great PageBuilder adventure. We all learn from, and help each other to the full extent of our skills and special interests our Creator has blessed us with! All our knowledge is not about any group of persons; but, is the sum total of all our efforts in this great PageBuilder family. Surely folks, our Lord is pleased with our works!<br> <hr><br> <p align="center">My original PageBuilder Advanced Editor tutorial is at:<br> <br> <a href="http://community-2.webtv.net/jaxred/PBMeta/">http://community-2.webtv.net/jaxred/PBMeta/</a><br> <br> And, the webpage with the source code for my original Advanced Editor webpage with many more additional comments about PageBuilder Advanced Editor structure, is at:<br> <br> <a href="http://community-2.webtv.net/jaxred/Source/">http://community-2.webtv.net/jaxred/Source/</a><br> <br> I recently wrote a tutorial for another WebTV PageBuilder Advanced Editor method using the script tag and javascript multiline comment tags, at:<br> <br> <a href="http://community-2.webtv.net/jaxred/script/">http://community-2.webtv.net/jaxred/script/</a><br> <br> I also published two PageBuilder Advanced Editor Multipage document turorials. The first PB AE Multipage document tutorial uses the comment tags method and is at:<br> <br> <a href="http://community-2.webtv.net/jaxred/Test/">http://community-2.webtv.net/jaxred/Test/</a><br> <br> The second PB AE Multipage document tutorial uses the noscript method and is a more thoroughly explained procedure that beginning PageBuilders can easily understand, at:<br> <br> <a href="http://community-2.webtv.net/jaxred/NSMulPge/">http://community-2.webtv.net/jaxred/NSMulPge/</a><br> <br> I also recently published seven (7) new PB AE methods, at:<br> <br> <a href="http://community-2.webtv.net/jaxred/misc_ae/">http://community-2.webtv.net/jaxred/misc_ae/</a><br> <br> And, I also published a new PB AE method that uses a CSS style sheet to format the webpage instead of body tag attributes, at:<br> <br> <a href="http://community-2.webtv.net/jaxred/style1/">http://community-2.webtv.net/jaxred/style1/</a><br> <br> Webbers, <a href="mailto:SolarBunny@webtv.net">SolarBunny@webtv.net</a> and <a href="mailto:ctpaso@webtv.net">ctpaso@webtv.net</a>, collaborated on a simple PB AE that works on all MSN-TV browsers, except upgrade versions 2.6 - 2.6.1, at:<br> <br> <a href="http://community-2.webtv.net/jaxred/SimPBAE/">http://community-2.webtv.net/jaxred/SimPBAE/</a></p> <br> <hr> </TD></TR></TABLE> </P> <P> <TABLE> <TR><TD> <P ALIGN=left> <div align="center">Thanks for visiting my website, folks! Have a nice day! My best wishes to all PageBuilders, their families, friends, and neighbors!<br> <br> <a href="mailto:jaxred@webtv.net?subject=PB%20Noscript%20AE%20"> <font size="6">Jax</font> <font color="red" size="6">Red</font> </a> <hr align="center" width="22%"> <br> <center> <form method="post" action="http://www.thunderstone.com/texis/demos/dox?demo=http://community-2.webtv.net/jaxred/noscript/">View the <font color="#ffffff"> <input type="submit" name="demo" value="Source Code" onClick="form.submit()" usestyle borderimage="file://ROM/Borders/ButtonBorder3.bif"> </font> of this webpage with the Thunderstone© WebTV™ Source Code Viewer. Put a "Source Code" <a href="http://community-2.webtv.net/jaxred/Viewers/">Viewer</a> on your webpages.</form> </center> <br> <br> <center> <a href="http://www.wunderground.com/US/FL/Jacksonville.html"><img src="http://banners.wunderground.com/banner/gizmotimetempbig/US/FL/Jacksonville.gif" alt="Click for Jacksonville, Florida Forecast" height="40" width="426"> </a> <br> <a href="http://www.wunderground.com/about/faq/weathersticker.asp"> <font size="3" color="#ffd700">© 2000 The Weather Underground, Inc.</font> </a> </center> <center> <table width="80%"> <tr> <td align="center" valign="middle"> <FONT SIZE="3" COLOR="#ffd700"><b>Site<br>Visitors</b> </FONT> </td> <td align="center">  <A HREF="http://www.beseen.com/hc-index.html"> <IMG SRC="http://pluto.beseen.com/hit.counter?account=556146&font=BlackOnWhite&base=0" BORDER="0"> </A>  </td> <td align="center" valign="middle"> <FONT SIZE="3" COLOR="#ffd700"> <b>Since<br>12/20/00</b> </td> </tr> </table> </center> <HR> <BR> <center> <FONT SIZE="4" COLOR="#ffd700"> <b>Thanks For Visiting My Site, Folks!</b> </FONT> </center> <br> <br> <HR WIDTH="70%" ALIGN="CENTER"> </div> </TD></TR></TABLE> </P> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> <td height=0> <spacer type=block width=30% height=0> </tr> <tr> <td colspan="3"> <hr> </td> </tr> <tr> <td valign=middle width=30%> <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"> <b> </b></font></td> <td valign=middle width=30%> <center> <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size=-2><I> <a href="http://www.msntv.com">Powered by MSN TV</a> </I></font></center> </td> <td align=right valign=middle width=30%> <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"> <b> </b></font></td> </td> </tr> <tr> <td colspan="3"> <hr> </td> </tr> </table> </BODY> </HTML>