Your search terms from Google are highlighted using a JavaScript available at http://www.slimeland.com/. It runs as an external script file, called in the head of this document, and is implemented with a routine in the body tag. It also involves establishing a specific class in your Cascading Style Sheet, whether you embed it in a style tag in the head or call it from an external style sheet.
A paragraph below is generated using a script that I once ran in the head, but now have moved to an external script file. It, too, is run from a call in the head and implemented using a document.write in the body, as outlined below. It was obtained from http://javascript.internet.com
I have employed a third script in the body tag which writes to the status bar of your browser window, and the fourth example shows another use of the script and noscript tags. I will present to you how you must construct the syntax so that the XHTML validator will validate your page and your Javascript will also work. You will find that the techniques in HTML 4.01 just don't work in XHTML 1.x.
I will not go into detail on how the Javascripts do their jobs. For that type of information, please see the sites that provided the scripts. What you are about to see is how you must adapt their instructions to fit the XHTML environment.
The paragraph above this one can be programmed to display a different message every day. That paragraph was written and stored in an external Javascript file, and called in the Head of this document, in a JavaScript which serves up a new message every day, based on the visitor's computer's clock calendar. I obtained the script from The JavaScript Source (http://javascript.internet.com), free for the download. It uses the document.write script here in the Body of the document. If you are viewing in a browser that does not support JavaScript, you see the literal paragraph contained within a pair of <noscript> tags instead.
Two advantages exist for external script files: For one, there is not so much overhead in the top of the HTML document, and therefore less clutter for the search engine to sift through when spidering the page; and two, I can change the paragraph simply by uploading a new script file. Likewise, I can call the script from many pages on the site and one upload will change them all.
The source code used to display the Javascript or Noscript paragraph above:
<div id="jav"> <!-- All HTML comments like this must remain outside the script tag. --> <!-- The required syntax for a script tag containing embedded Javascript --> <!-- Must use the Type attribute and specify "text/javascript" --> <!-- First line inside must use html open comment tag. // is Javascript comment. --> <!-- CDATA must be uppercase and those are open brackets on both sides! --> <!-- After the Javascript:--> <!-- First Javascript comment then 2 closing brackets, then html comment. --> <script type="text/javascript"> <!--//<![CDATA[ // This is a comment line. Instead of moving HTML comments // outside of the Javascript area, you can enter them as // Javascript comments like this. /* Or you can create block comments like this using these comment tags in Javascript. */ document.write(dateMsg()); //]]>--> </script> <noscript> <p> This paragraph is contained within a <noscript> tag because some browsers do not see the JavaScript‑generated paragraph which would appear here with today's date. </p> </noscript> </div>
I can place a Script tag inside a paragraph, but cannot place a Noscript tag inside a paragraph and have the page validate as good XHTML. This complicates the issue when you want to insert a JavaScript document.write within a paragraph, and want to insert an equal noscript alternative within the same paragraph for browsers that do not support Javascript.
One alternative is to write an entire paragraph, including the paragraph tags in the script generating the content of the document.write and write another paragraph including the paragraph tags inside the noscript tags. I wrapped both paragraphs in the div tags to apply CSS style, as specified by the style id and the external style sheet, to the paragraph, whether it is the one generated by Javascript or the one specified in the <noscript>.
Here is how you have to wrap your JavaScript to make it work in a page written in XHTML. Outermost is the <script></script> tag pair. From an HTML standpoint, there must be a set of comment tags, <!‑‑ ‑‑> just inside the script tags. There must be a <![CDATA[ opening tag and ]]> closing tag to encase the JavaScript. And from the JavaScript point of view, there must be JavaScript comments, "//" one after the HTML opening comment and before the CDATA, and one at the beginning of the line after the JavaScript before the HTML closing comment tag.
One word of caution: Do not place any HTML comment tags in the JavaScript space. If the Web site that provides the JavaScript has placed comment tags indicating the origin of the script or has commented the beginning and end of the JavaScript code, remove them all to the outside of the script tag. Alternatively, you can place the comments within the Javascript space, but preface each line of comments with the Javascript comments tag (//) in the left margin.
The Javascript that produces the output for the document.write is placed either in the head, within the script tags as outlined above, or is called from the head from an external file. There are two script files being called in this page, one for the daily message, and the other in connection with the search terms highlight. These are called using the following syntax in the head of the document. I am showing one of them here:
<!-- This is the way one calls an external Javascript file in XHTML. -->
<script src="/wb7crk/dailymessage.js" type="text/javascript">
</script>
<!--
The absolute path was specified here, but that is not necessary
if the script resides on the same directory as the page calling it.
-->
Use the same script syntax for JavaScript in the Head and the Body of the document, wherever you want to place code, or want to call an external script file.
You also need to place a JavaScript command that is going to write text into an HTML document in a place in the document where the text is legal. If you replace the document.write with literal text,and the page validates, then the document.write text will be legal. If you wrote out HTML tags in the document.write, be sure to duplicate them in your literal text To clarify this point: I needed to place the daily message text in a paragraph; because of the noscript issue, I had to create the HTML paragraph tags in my Javascript. I therefore need to place a text within paragraph tags where I want to place the script‑generated paragraph for validation test purposes.
I was working on a page on another site, and added a link to the MapQuest site, with information I copied from my browser address bar and pasted into an <a href="">linktext</a>.
The page I linked to was called, "map.adp." I am not familiar with the programming language that uses this extension, but that's no matter. Simply placing a link to another site with a URL compatible with that site's needs was all I was intent on doing.
No big deal, until I tried to validate my page, and the validator complained about the content of the URL! How to go about hiding this code from the validator?
I finally came to the conclusion that I might be able to hide the URL by using a document.write to write it out, and the offensive code would be hidden from the validator inside a script tag. I figured I would be able to insert my JavaScript directly in the place of the <a href>. For browsers that don't see the JavaScript I had planned to stick a <noscript> tag right after the <script> tag, and display the same plain text in place of the linktext given by the JavaScript.
Then I planned to place a simpler link inside another <noscript> tag.
When I tried that, however, the noscript tag would not validate inside a paragraph. Below is what I wound up with, and below that is the code sample.
This discussion concerns my page at http://www.qsl.net/wb7tjd/Superstition/Hamfest/.
---------
Coming eastbound, I was not exactly certain how the Dobson exit is affected by the merger of Loop 101 traffic entering the Superstition Freeway. I looked at MapQuest and got a close look at the situation and was able to follow the details of the various interchanges, though they appear to have misplaced the exit 177 eastbound marker on U.S. 60 just west of where it belongs. This map shows the Superstition Freeway, between Loop 101 and Dobson Road.
---------
<p>
Coming eastbound, I was not exactly certain how the Dobson exit is
affected by the merger of Loop 101 traffic entering the Superstition
Freeway. I looked at MapQuest and got a close look at the situation
<script type="text/javascript">
<!--//<![CDATA[
document.write("<a href=http://www.mapquest.com/maps/map.adp
?latlongtype=degrees&latdeg=33&latmin=23&latsec=10
&longdeg=-111&longmin=53&longsec=01>(in this link to MapQuest)</a>");
//]]>-->
</script>
and was able to follow the details of the various interchanges, though
they appear to have misplaced the exit 177 eastbound marker on U.S. 60
just west of where it belongs. This map shows the Superstition
Freeway, between Loop 101 and Dobson Road.
</p>
<noscript>
<p>
<a href="http://www.mapquest.com/maps/map.adp">Visit MapQuest</a>
and enter these values for Latitude 33 degrees, 23 minutes and 10 seconds;
and Longitude −111 degrees, 53 minutes and 01 second to see my
map. Then zoom in to the second closest position. You see
both Dobson Road and Loop 101 in your view.
</p>
</noscript>
The above rendered paragraph would appear in a nonJavaScript browser without the linktext. Then below is the additional paragraph rendered in the nonJavaScript browser, but not seen in the script‑capable view:
----------
Visit MapQuest and enter these values for Latitude 33 degrees, 23 minutes and 10 seconds; and Longitude -111 degrees, 53 minutes and 01 second to see my map. Then zoom in to the second closest position. You see both Dobson Road and Loop 101 in your view.
----------
Wouldn't it be something if the noscript tag could handle the original fancy link without invalidating the page? I don't know the answer to that one, but I just thought of the possibility. I doubt if it would work, but sometime when I have nothing better to do, I will just test it out.
I may have failed to hide my offensive link from the validator before resorting to this JavaScript solution because I used %HH hexadecimal values to replace the equals signs instead of using the &#nn; format of conveying ascii codes. I found it once again necessary to hide the offensive code writing this document when I tried to display the source inside <pre> tags. It might be worthwhile to rewrite the link code, replacing the equal sign with its &# counterpart, and see if the link still works and the page still validates.
There is yet another, simpler solution that has since come to my mind: You can visit www.tinyurl.com and make a short, clean Web address for that convoluted MapQuest link, and include the tinyurl in your page instead. As of this writing, you go to their site, copy the long URL from your address bar at the site that needs a shorter URL, paste it into the form on Tinyurl, hit the create button and paste the resulting URL straight into your work! Their script puts the newly created address on your clipboard ready for pasting.
I am running another JavaScript command, OnLoad, on this page. It is placed in the opening Body tag. But I had to make OnLoad all lowercase. XHTML tags and attributes are all in lowercase. HTML tags can be either case, but you are wise to start writing them all in lowercase. I only had to reduce the word OnLoad to lowercase in order for the page to validate. The remainder of the script was unchanged. There are two functions placed in this OnLoad command. The CheckSearchTerms function is separated with a semicolon from the window.defaultStatus function. The first works with the search highlights and the second displays the welcome message you see in the status bar of your browser. If your browser's status bar is available and not turned off, you see my message there. (The Status bar usually has the word "Done" in the lower left corner of your browser window frame.)
<body onload="CheckSearchTerms(); window.defaultStatus="Thank you for visiting
www.oocities.org/wb7crk XHTML 1.0 Strict!';">
I have wrapped the text onto a second line in the example. It is actually on one long line. And in order to get the wide space between the Web address and "XHTML," I entered several spacebar characters. In the past I had used for nonbreaking spaces. I have found no ill effects using plain space characters in the Mozilla or IE browsers I have.
You need to download the external Javascript found at the author's site, http://www.slimeland.com/. , which is an external script file. Place that file on your site, and link to it in the head of your page as I have described above, if you are writing in XHTML. Add the CheckSearchTerms function to your body tag with an onload command as I have outlined here. Instructions are found in the comments in the external file. Tou also need add a class to your cascading style sheet as described on the author's site and in the Havascript file. You specify what color and other font styles you want associated with the highlighted terms.
I had to look around a long time before I found the right way to put JavaScript into an XHTML page. Even the suggestion posted on www.w3.org provided invalid JavaScript functioning. And that is probably due to my use of a buggy browser — almost everyone has one! Their posting neglected the HTML comment tags from the mixture I outlined above. And then I found the solution from Juicy Studio — Adding JavaScript to Your Page by Simon Carlisle.
What I was shopping the Web for was a working example of JavaScript in XHTML, and upon finding the solution, I decided to post a page with just such an example, on a validated XHTML 1.0 Strict standards page.
Because my Web server needs to serve advertising on my site, it adds commented code below the closing HTML tag, and that violates the XHTML standard — and blows my validation all to pieces. However, I validated it before I sent it up with the W3C Markup Validation Service — Upload file.
This page is using no HTML style attributes to define font color, size, face, or page color, other than <strong>, <em>, and <tt>. There is no layout structure using a <table> tag anywhere. Instead, all style attributes are defined in a Cascading Style Sheet. This is my first time using style sheets, so it is nothing extra fancy.
You can write the author, Larry Kuck through the Guestbook.