Jump to content

Is there any tool to clean/tidy html file?


rain13
 Share

Recommended Posts

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>

Edited by SoItBegins
Link to comment
Share on other sites

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.

Edited by birbal
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...