rain13 Posted May 22, 2011 Share Posted May 22, 2011 I am looking for tool that would tidy html, remove overhead tags, add missing tags ( such as <html> and <body> before text) and which would also add doctype info. (just for myself to see how I should modify my php code). I found that Kompozer does it. What do you guys think of this program? Worth using for this purpose or would you recommend me something other??Edit: After saving it with compozer, I still have 10 errors in markup validator, but still better than with original html.This generated html is quite ugly. I just have few questions about it.1)If it's formatted like that, does search engines like google find meta keywords from it and image alt text? or does it only find info such as meta and alt text if it's correctly formatted?2) there are many meta tags (description,name,content-type,).Is there difference when I change they're order? like moving meta tag with name up or down?3) Is this right usage? <meta name="keywords" content="Some,key,words,for,google" > or should this meta tag be rewritten? if yes, how4) Is there any difference if javascript is in a) separate file in header c) in body? Which option would you suggest?*5) is there anything else than meta keywords and image alttext that I should add if I want search engines to index my gallery?Thanks in advance. Welcome, rain! <a href="./login.php?login=logout">Logout</a> <a href="./ucp.php">Account setings</a><HTML> <HEAD> <meta name="description" content="" > <!-- Coma separated tags --> <meta name="keywords" content="Some,key,words,for,google" > <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <link rel="stylesheet" type="text/css" href="./gallery.css" > <title>All on one</title> </HEAD> <BODY> <!-- Search Start --> <table border="0"><form enctype="multipart/form-data" action="index.php" method="POST"> <tbody> <tr><td> <input name="searchword" type="text" /><input type="submit" value="Search" /> </tr><br> </form> </tbody> </table> <!-- Pages list End--> <!-- Pages list Start --> <table border="1" cellpadding="2" cellspacing="0" align="center" class="infotable"> <tbody> <tr> <td><a href="?page=0"><span style="background-color: #8DBAE1;">1</span></a>|<a href="?page=1">2</a>|</td> </tr> </tbody> </table> <!-- Pages list End--> <table align="center" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><table border="0" cellpadding="2" cellspacing="2"><tbody></tbody></table></td> <td style="width: 960px;"><br> <div class="ImageButtons"> <a href="?page=0"><img border="0" src="thumbview.png" title="Page 1" alt=" Page 1" height="16" width="16" /> Thumbnail view</a> <a href="?pic=-1"><img border="0" src="picprev.png" title="Previous" alt="Previous" height="16" width="16" />Previous image</a> <a href="?pic=1"><img border="0" src="picnext.png" title="Next" alt="Next" height="16" width="16" />Next image</a> <a href="?d=0"><img border="0" src="dl3.png" title="Next" alt=*" height="16" width="16" /> Download image</a> </div <!-- IMAGE START --> <br><div Class="ImageTitle"><b>All on one</b></div><br><div class="Date">22 5 2011 Views: 3 Downloads: 0</div><a href="?d=0"> <img id="slide" src="slides/IMGP0025.JPG" class="slideImage" alt="*" height="768" width="1024" /> </a><br> <style type="text/css"> p { font-family:Verdana; font-weight:bold; font-size:11px } img { cursor:pointer; } </style> <script language="javascript" type="text/javascript"> var average = GetAverage(); //var average = "abc" function mouseOverImage(n) { document.getElementById("txt").innerHTML = '<font style="font-size: 12px">Your rating:'+ n + '</font>'; for (i=1;i<=n;i++) { document.getElementById("img"+i).src = "./rate/0.png"; } } function mouseOutImage() { if (average.indexOf("rating") != -1){GetAverage();} document.getElementById("txt").innerHTML = '<font style="font-size: 12px">Average: '+ average + '</font>'; for (i=5;i>=1;i--) { document.getElementById("img"+i).src = "./rate/1.png"; } } function Rate(i){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; //~ <font style="font-size: 12px">Average: 5</font> document.getElementById("txt").innerHTML = '<font style="font-size: 12px">Average: '+ average + '</font>'; } } ajaxRequest.open("GET", "./rate/rate.php?set=IMGP0025.JPG&r="+i, true); ajaxRequest.send(null); } function GetAverage(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; } } ajaxRequest.open("GET", "./rate/rate.php?get=IMGP0025.JPG", true); ajaxRequest.send(null); } </script><table style="text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img id="img1" src="./rate/1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(1)" onmouseout="mouseOutImage(5)" onmousedown="Rate(1)"/><img id="img2" src="./rate/1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(2)" onmouseout="mouseOutImage(4)" onmousedown="Rate(2)"/><img id="img3" src="./rate/1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(3)" onmouseout="mouseOutImage(3)" onmousedown="Rate(3)"/><img id="img4" src="./rate/1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(4)" onmouseout="mouseOutImage(2)" onmousedown="Rate(4)"/><img id="img5" src="./rate/1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(5)" onmouseout="mouseOutImage(1)" onmousedown="Rate(5)"/></td> </tr> <tr> <td id="txt"> <font style="font-size: 12px">Average: 5</font> </td> </tr> </tbody></table> <div class="description"></div> <!-- IMAGE END --> </td> <td><table border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=1"><img src="thumbs/IMGP0016.JPG" title=" IMGP0016.JPG " alt="1" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=2"><img src="thumbs/IMGP0017.JPG" title=" IMGP0017.JPG " alt="2" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=3"><img src="thumbs/IMGP0020.JPG" title=" IMGP0020.JPG " alt="3" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=4"><img src="thumbs/IMGP0024.JPG" title=" IMGP0024.JPG " alt="4" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=5"><img src="thumbs/IMGP0011.JPG" title=" IMGP0011.JPG " alt="5" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=6"><img src="thumbs/IMGP0002.JPG" title=" IMGP0002.JPG " alt="6" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=7"><img src="thumbs/IMGP0014.JPG" title=" IMGP0014.JPG " alt="7" class="mthumb" height="36" width="48" /></a></td></tr><tr><td style="border: 0px none; padding: 4px; text-align: center; height: 50px;"class="thumb"><a href="?pic=8"><img src="thumbs/IMGP0009.JPG" title=" IMGP0009.JPG " alt="8" class="mthumb" height="36" width="48" /></a></td></tr></tbody></table></td> </tr> </tbody> </table> <link rel="stylesheet" type="text/css" href="./post.css" >No comments</div> <!-- closes the div with overflow:auto --><p style="float: none;"><br><script type="text/javascript">var time_variable;function getval(){return "abc";}function getXMLObject() //XML OBJECT{ var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+ } catch (e2) { xmlHttp = false // No Browser accepts the XMLHTTP Object then false } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers } return xmlHttp; // Mandatory Statement returning the ajax object created}var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax objectfunction ajaxFunction() { var getdate = new Date(); //Used to prevent caching during ajax call if(xmlhttp) { var txtname = document.getElementById("Editor"); xmlhttp.open("POST","post.php?a=preview&t=0&f=0",true); //calling testing.php using POST method xmlhttp.onreadystatechange = handleServerResponse; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send("Editor=" + txtname.value); //Posting txtname to PHP File }}function Post() { var getdate = new Date(); //Used to prevent caching during ajax call if(xmlhttp) { var txtname = document.getElementById("Editor"); xmlhttp.open("POST","post.php?a=PostMessage&t=0&f=IMGP0025.JPG",true); //ToServer xmlhttp.onreadystatechange = handleServerResponse; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send("Editor=" + txtname.value); //Posting txtname to PHP File }}function handleServerResponse() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { if(xmlhttp.responseText.indexOf("Topic successfully edited") != -1){window.location = "/d-drawings/?pic=0";} if(xmlhttp.responseText.indexOf("Topic successfully Added") != -1){window.location = "/d-drawings/?pic=0";} document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element } else { alert("Error during AJAX call. Please try again"); } }}function set(style) { var StyleStart = "["+style+"]"; var StyleEnd = "[/"+style+"]"; if (style == "youtube") { var StyleStart = "[video host=youtube.com]"; var StyleEnd = "[/video]"; } if (style == "google") { var StyleStart = "[video host=google.com]"; var StyleEnd = "[/video]"; } var ta = document.getElementById("Editor"); if (document.selection) { str = document.selection.createRange().text document.selection.createRange().text = StyleStart + str + StyleEnd; return true; } else if (ta.selectionStart) { var startPos = ta.selectionStart; var endPos = ta.selectionEnd; var str = ta.value.substring(startPos, endPos); ta.value = ta.value.substring(0, startPos) + StyleStart + str + StyleEnd + ta.value.substring(endPos, ta.value.length); return true; } else { ta.value = StyleStart + ta.value + StyleEnd; return false; }}function DisHex(str){ var r=''; for(var i=0;i<str.length;i+=2) { r+=unescape('%'+str.substr(i,2)); } return r;}</script><div id="message" name="message"></div><br><input type="button" value="bold" onclick="set('b')" /> <input type="button" value="Italic" onclick="set('i')" /> <input type="button" value="Underline" onclick="set('u')" /> <input type="button" value="Image" onclick="set('img')" /> <input type="button" value="Link" onclick="set('lnk')" /> <input type="button" value="Quote" onclick="set('quote')" /> <input type="button" value="Youtube" onclick="set('youtube')" /> <input type="button" value="Google video" onclick="set('google')" /><br /><textarea id="Editor" style="height:300px; width:76%"></textarea><br><script type="text/javascript">var txtArea = document.getElementById('Editor');var ContentStr = DisHex("");replaced = ContentStr.replace(/<br>/g, "\n");txtArea.value = replaced;</script><input type="button" value="Preview" onclick="ajaxFunction()" /><input type="button" value="Post" onclick="Post()" /><p> <!-- Pages Footer --> <table border="1" cellpadding="2" cellspacing="0" align="center" class="footer"> <tbody> <tr> <td>Total views: 9</td> <td>Total images:26</td> <td>Last update: 22 05 2011 21:54</td> <td>Web gallery software and pictures by Rain </td> </tr> </tbody> </table> </BODY></HTML> Link to comment Share on other sites More sharing options...
birbal Posted May 25, 2011 Share Posted May 25, 2011 there is a pretty good helpful addon 'html tidy' for mozilla you may want to try that.2) does not depend on orders4) if you use separate file it will be easy to manage. which means you can make change in one file to change several other pages where it has been used. but everytime you use seprate file it will send a file request header. which may be a overhead.if you use in head tag the requst overhead will not be there but it will be hard to manage for severel page.embdeding in body is messy hard to manage. its best to avoid where it is possible ( i cant see any reason to use it though)one different approach could be done. you can make the javascript page seprately and can serverside include (eg php include) the page in the head. so that there will not be any extra file request overhead and as well as it will be well manageble.search engine can read whatever your browser can read. and that being indexed. Link to comment Share on other sites More sharing options...
rain13 Posted May 25, 2011 Author Share Posted May 25, 2011 I found difficulties including js, since I have variables in it that I replace with PHP's str_replace. If I store js in separate file I would have to write str_replace'ed to server's disk first and then link that generated file htm, but this causes toomuch write operations.Here's code of rate thing. See I have variables such as {AVERAGE} in js but in source above it's replaced by PHP. Is there any nicer way than write generated file to disk to keep such variables (or how to call them correctly) in js and have them replaced by the time script reaches to client. <style type="text/css"> p { font-family:Verdana; font-weight:bold; font-size:11px } img { cursor:pointer; } </style> <script language="javascript" type="text/javascript"> var average = GetAverage(); //var average = "abc" function mouseOverImage(n) { document.getElementById("txt").innerHTML = '<font style="font-size: 12px">Your rating:'+ n + '</font>'; for (i=1;i<=n;i++) { document.getElementById("img"+i).src = "{MOUSE_OVER_IMAGE}"; } } function mouseOutImage() { if (average.indexOf("rating") != -1){GetAverage();} document.getElementById("txt").innerHTML = '<font style="font-size: 12px">Average: '+ average + '</font>'; for (i=5;i>=1;i--) { document.getElementById("img"+i).src = "{MOUSE_OUT_IMAGE}"; } } function Rate(i){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; //~ <font style="font-size: 12px">Average: {AVERAGE}</font> document.getElementById("txt").innerHTML = '<font style="font-size: 12px">Average: '+ average + '</font>'; } } ajaxRequest.open("GET", "{SET_RATE}"+i, true); ajaxRequest.send(null); } function GetAverage(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; } } ajaxRequest.open("GET", "{GET_RATE}", true); ajaxRequest.send(null); } </script><table style="text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img id="img1" src="{MOUSE_OUT_IMAGE}" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(1)" onmouseout="mouseOutImage(5)" onmousedown="Rate(1)"/><img id="img2" src="{MOUSE_OUT_IMAGE}" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(2)" onmouseout="mouseOutImage(4)" onmousedown="Rate(2)"/><img id="img3" src="{MOUSE_OUT_IMAGE}" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(3)" onmouseout="mouseOutImage(3)" onmousedown="Rate(3)"/><img id="img4" src="{MOUSE_OUT_IMAGE}" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(4)" onmouseout="mouseOutImage(2)" onmousedown="Rate(4)"/><img id="img5" src="{MOUSE_OUT_IMAGE}" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(5)" onmouseout="mouseOutImage(1)" onmousedown="Rate(5)"/></td> </tr> <tr> <td id="txt"> <font style="font-size: 12px">Average: {AVERAGE}</font> </td> </tr> </tbody></table> Link to comment Share on other sites More sharing options...
Synook Posted May 26, 2011 Share Posted May 26, 2011 Why are you using string replacement anyway? You can just write the PHP variables in the script directly: <?php //... echo "ajaxRequest.open(\"GET\", \"$get_rate\", true);\n"; //... Also, nothing wrong with having JS files that are PHP scripts - just send the Content-Type: text/javascript header. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.