Team:Harvard/ZF Binding Site Finder
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
- | |||
<head> | <head> | ||
- | |||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
- | |||
<title>iGEM 2011 Zinc Finger Binding Site Finder</title> | <title>iGEM 2011 Zinc Finger Binding Site Finder</title> | ||
- | |||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
.graytext | .graytext | ||
- | |||
{ | { | ||
- | |||
color:#999999; | color:#999999; | ||
- | |||
} | } | ||
- | |||
- | |||
.onfocus | .onfocus | ||
- | |||
{ | { | ||
- | |||
color:#000000; | color:#000000; | ||
- | |||
} | } | ||
- | |||
- | |||
#ui | #ui | ||
- | |||
{ | { | ||
- | |||
border-color: #FFFFFF; | border-color: #FFFFFF; | ||
- | |||
border-style: solid; | border-style: solid; | ||
- | |||
border-width: 0 0 1px 1px; | border-width: 0 0 1px 1px; | ||
- | |||
border-spacing: 0; | border-spacing: 0; | ||
- | |||
border-collapse: collapse; | border-collapse: collapse; | ||
- | |||
} | } | ||
- | |||
- | |||
#ui td | #ui td | ||
- | |||
{ | { | ||
- | |||
border-color: #FFFFFF; | border-color: #FFFFFF; | ||
- | |||
border-style: solid; | border-style: solid; | ||
- | |||
margin: 0; | margin: 0; | ||
- | |||
padding: 4px; | padding: 4px; | ||
- | |||
border-width: 1px 1px 0 0; | border-width: 1px 1px 0 0; | ||
- | |||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||
- | |||
text-align: left; | text-align: left; | ||
- | |||
} | } | ||
- | |||
- | |||
table | table | ||
- | |||
{ | { | ||
- | |||
border-color: #999999; | border-color: #999999; | ||
- | |||
border-style: solid; | border-style: solid; | ||
- | |||
border-width: 0 0 1px 1px; | border-width: 0 0 1px 1px; | ||
- | |||
border-spacing: 0; | border-spacing: 0; | ||
- | |||
border-collapse: collapse; | border-collapse: collapse; | ||
- | |||
} | } | ||
- | |||
- | |||
td | td | ||
- | |||
{ | { | ||
- | |||
border-color: #999999; | border-color: #999999; | ||
- | |||
border-style: solid; | border-style: solid; | ||
- | |||
margin: 0; | margin: 0; | ||
- | |||
padding: 4px; | padding: 4px; | ||
- | |||
border-width: 1px 1px 0 0; | border-width: 1px 1px 0 0; | ||
- | |||
background-color: #EEEEEE; | background-color: #EEEEEE; | ||
- | |||
text-align: center; | text-align: center; | ||
- | |||
} | } | ||
- | |||
- | |||
</style> | </style> | ||
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
- | + | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | // begin jQuery | ||
+ | $(document).ready(function(){ | ||
+ | // clearForm function | ||
+ | $(".graytext").click(function() { | ||
- | + | if($(this)[0].defaultValue==$(this).val()) | |
- | + | ||
- | + | ||
- | + | ||
- | if( | + | |
- | + | ||
{ | { | ||
- | + | $(this).val(""); | |
- | + | $(this).removeClass("graytext").addClass("onfocus"); | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | } | + | }); |
- | + | ||
- | + | ||
+ | // reverse complement function | ||
function reverseComplement(sequence) | function reverseComplement(sequence) | ||
- | |||
{ | { | ||
- | |||
var output = ""; | var output = ""; | ||
- | |||
- | |||
for(j=0;j<sequence.length;j++) | for(j=0;j<sequence.length;j++) | ||
- | |||
{ | { | ||
- | |||
if(sequence.charAt(j) == "G") | if(sequence.charAt(j) == "G") | ||
- | |||
output = "C" + output; | output = "C" + output; | ||
- | |||
- | |||
if(sequence.charAt(j) == "C") | if(sequence.charAt(j) == "C") | ||
- | |||
output = "G" + output; | output = "G" + output; | ||
- | |||
- | |||
if(sequence.charAt(j) == "T") | if(sequence.charAt(j) == "T") | ||
- | |||
output = "A" + output; | output = "A" + output; | ||
- | |||
- | |||
if(sequence.charAt(j) == "A") | if(sequence.charAt(j) == "A") | ||
- | |||
output = "T" + output; | output = "T" + output; | ||
- | |||
- | |||
if(sequence.charAt(j) == "N") | if(sequence.charAt(j) == "N") | ||
- | |||
output = "N" + output; | output = "N" + output; | ||
- | |||
} | } | ||
- | |||
- | |||
return output; | return output; | ||
- | |||
- | |||
} | } | ||
- | + | // findCustom function | |
- | + | $("#findcustom").click(function() { | |
- | function | + | |
- | + | ||
- | { | + | |
//get DNA sequence | //get DNA sequence | ||
- | + | var testseq = $("#sequence").val(); | |
- | var testseq = | + | |
- | + | ||
//to uppercase | //to uppercase | ||
- | |||
testseq = testseq.toUpperCase(); | testseq = testseq.toUpperCase(); | ||
- | |||
- | |||
//get zinc finger arrays for searching | //get zinc finger arrays for searching | ||
- | + | var bottomzf = $("#bottom").val(); | |
- | var | + | var topzf = $("#top").val(); |
- | + | ||
- | + | ||
- | + | ||
- | var | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
//to uppercase | //to uppercase | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
bottomzf = bottomzf.toUpperCase(); | bottomzf = bottomzf.toUpperCase(); | ||
- | + | topzf = topzf.toUpperCase(); | |
- | topzf = topzf.toUpperCase(); | + | |
- | + | ||
- | + | ||
var ntpCheck = /[GCTAN]{9}/; | var ntpCheck = /[GCTAN]{9}/; | ||
- | |||
if (!(bottomzf.match(ntpCheck)&& | if (!(bottomzf.match(ntpCheck)&& | ||
- | |||
topzf.match(ntpCheck)&& | topzf.match(ntpCheck)&& | ||
- | |||
(bottomzf.length=="9")&& | (bottomzf.length=="9")&& | ||
- | |||
(topzf.length=="9"))){ | (topzf.length=="9"))){ | ||
- | |||
alert("You must enter a valid sequence of nine nucleotides containing G,T,C,A, or N."); | alert("You must enter a valid sequence of nine nucleotides containing G,T,C,A, or N."); | ||
- | |||
return; | return; | ||
- | |||
} | } | ||
- | |||
- | |||
- | |||
- | |||
//transform bottom zf to reverse complement | //transform bottom zf to reverse complement | ||
- | |||
bottomzf = reverseComplement(bottomzf); | bottomzf = reverseComplement(bottomzf); | ||
- | + | alert(bottomzf); | |
+ | alert(topzf); | ||
- | |||
+ | /* | ||
+ | //start building regular expression from ZF fingers | ||
var siteExp = "(" + bottomzf.replace(/n/gi,"\\w"); | var siteExp = "(" + bottomzf.replace(/n/gi,"\\w"); | ||
- | |||
- | |||
//add in x NTPs between first and second finger | //add in x NTPs between first and second finger | ||
- | |||
var nucgap = document.getElementById("gap").value; | var nucgap = document.getElementById("gap").value; | ||
- | |||
for(i=0;i<nucgap;i++){ | for(i=0;i<nucgap;i++){ | ||
- | |||
siteExp = siteExp + "\\w"; | siteExp = siteExp + "\\w"; | ||
- | |||
} | } | ||
- | |||
- | |||
//finish building regular expression | //finish building regular expression | ||
- | |||
siteExp = siteExp + topzf.replace(/n/gi,"\\w") + "){1}"; | siteExp = siteExp + topzf.replace(/n/gi,"\\w") + "){1}"; | ||
- | |||
- | |||
//construct regular expression and find all instances of desired sequence in the test sequence | //construct regular expression and find all instances of desired sequence in the test sequence | ||
- | |||
var array1 = new RegExp(siteExp, "gi"); | var array1 = new RegExp(siteExp, "gi"); | ||
- | |||
var array2 = testseq.match(array1); | var array2 = testseq.match(array1); | ||
- | |||
- | |||
//error message if no sequences found | //error message if no sequences found | ||
- | |||
if(testseq.search(array1) == -1) | if(testseq.search(array1) == -1) | ||
- | |||
{ | { | ||
- | |||
document.getElementById("results").innerHTML = "No results found."; | document.getElementById("results").innerHTML = "No results found."; | ||
- | |||
//if results are found, build table to display results | //if results are found, build table to display results | ||
- | |||
} else { | } else { | ||
- | |||
- | |||
var revComp = ""; | var revComp = ""; | ||
- | |||
var seqtwo = ""; | var seqtwo = ""; | ||
- | |||
- | |||
table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>"; | table = "<table><tr><td colspan='4'><b>Zinc Finger Binding Site Candidates</b></td></tr><td><b>Location</b></td><td><b>Bottom Sequence</b></td><td><b>Top Sequence</b></td><td><b>Entire Sequence (top strand perspective)</b></td>"; | ||
- | |||
- | |||
for(i=0;i<array2.length;i++) | for(i=0;i<array2.length;i++) | ||
- | |||
{ | { | ||
- | |||
array1.test(testseq); | array1.test(testseq); | ||
- | |||
- | |||
table = table + "<tr>"; | table = table + "<tr>"; | ||
- | |||
//subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site | //subtract 18 nucleotides, nucgap inter-ZF nucleotides, +1 for index correction for location of binding site | ||
- | |||
table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>"; | table = table + "<td>" + (array1.lastIndex - 18 - nucgap) + "</td>"; | ||
- | |||
seqbottom = reverseComplement(array2[i].substring(0,9)); | seqbottom = reverseComplement(array2[i].substring(0,9)); | ||
- | |||
table = table + "<td>" + seqbottom + "</td>"; | table = table + "<td>" + seqbottom + "</td>"; | ||
- | |||
table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>"; | table = table + "<td>" + array2[i].substring(array2[i].length - 9,array2[i].length) + "</td>"; | ||
- | |||
table = table + "<td>" + array2[i] + "</td>"; | table = table + "<td>" + array2[i] + "</td>"; | ||
- | |||
table = table + "</tr>"; | table = table + "</tr>"; | ||
- | |||
} | } | ||
- | |||
- | |||
table = table + "</table><br /><br />" | table = table + "</table><br /><br />" | ||
- | |||
- | |||
document.getElementById("results").innerHTML = table; | document.getElementById("results").innerHTML = table; | ||
- | |||
} | } | ||
+ | */ | ||
+ | }); | ||
- | + | // end jQuery | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</script> | </script> | ||
- | |||
</head> | </head> | ||
- | |||
- | |||
<body> | <body> | ||
- | |||
<h2>iGEM 2011 Zinc Finger Binding Site Finder</h2> | <h2>iGEM 2011 Zinc Finger Binding Site Finder</h2> | ||
- | |||
Justin Chew<br /> | Justin Chew<br /> | ||
- | |||
<br /> | <br /> | ||
- | |||
<form> | <form> | ||
- | |||
<table id="ui"> | <table id="ui"> | ||
- | |||
<tr><td colspan="3"> | <tr><td colspan="3"> | ||
- | |||
<textarea id="sequence" rows="8" cols="80" class="graytext" onClick="clearForm(this);">Insert DNA sequence here</textarea> | <textarea id="sequence" rows="8" cols="80" class="graytext" onClick="clearForm(this);">Insert DNA sequence here</textarea> | ||
- | |||
</td></tr> | </td></tr> | ||
- | |||
<tr> | <tr> | ||
- | |||
<td width="40%"> | <td width="40%"> | ||
- | |||
Bottom Zinc Finger Array:<br /> | Bottom Zinc Finger Array:<br /> | ||
- | |||
<select id="21"> | <select id="21"> | ||
- | |||
<option value="\w\wC">GNN</option> | <option value="\w\wC">GNN</option> | ||
- | |||
<option value="\w\wG">CNN</option> | <option value="\w\wG">CNN</option> | ||
- | |||
<option value="\w\wA">TNN</option> | <option value="\w\wA">TNN</option> | ||
- | |||
<option value="\w\wT">ANN</option> | <option value="\w\wT">ANN</option> | ||
- | |||
<option value="\w\w\w">NNN</option> | <option value="\w\w\w">NNN</option> | ||
- | |||
</select> | </select> | ||
- | |||
<select id="22"> | <select id="22"> | ||
- | |||
<option value="\w\wC">GNN</option> | <option value="\w\wC">GNN</option> | ||
- | |||
<option value="\w\wG">CNN</option> | <option value="\w\wG">CNN</option> | ||
- | |||
<option value="\w\wA">TNN</option> | <option value="\w\wA">TNN</option> | ||
- | |||
<option value="\w\wT">ANN</option> | <option value="\w\wT">ANN</option> | ||
- | |||
<option value="\w\w\w">NNN</option> | <option value="\w\w\w">NNN</option> | ||
- | |||
</select> | </select> | ||
- | |||
<select id="23"> | <select id="23"> | ||
- | |||
<option value="\w\wC">GNN</option> | <option value="\w\wC">GNN</option> | ||
- | |||
<option value="\w\wG">CNN</option> | <option value="\w\wG">CNN</option> | ||
- | |||
<option value="\w\wA">TNN</option> | <option value="\w\wA">TNN</option> | ||
- | |||
<option value="\w\wT">ANN</option> | <option value="\w\wT">ANN</option> | ||
- | |||
<option value="\w\w\w">NNN</option> | <option value="\w\w\w">NNN</option> | ||
- | |||
</select><br /> | </select><br /> | ||
- | |||
<input type="text" id="bottom" value="Input NTPs here" class="graytext" onClick="clearForm(this);" /> | <input type="text" id="bottom" value="Input NTPs here" class="graytext" onClick="clearForm(this);" /> | ||
- | |||
</td> | </td> | ||
- | |||
<td width="40%"> | <td width="40%"> | ||
- | |||
Top Zinc Finger Array:<br /> | Top Zinc Finger Array:<br /> | ||
- | |||
<select id="11"> | <select id="11"> | ||
- | |||
<option value="G\w\w">GNN</option> | <option value="G\w\w">GNN</option> | ||
- | |||
<option value="C\w\w">CNN</option> | <option value="C\w\w">CNN</option> | ||
- | |||
<option value="T\w\w">TNN</option> | <option value="T\w\w">TNN</option> | ||
- | |||
<option value="A\w\w">ANN</option> | <option value="A\w\w">ANN</option> | ||
- | |||
<option value="\w\w\w">NNN</option> | <option value="\w\w\w">NNN</option> | ||
- | |||
</select> | </select> | ||
- | |||
<select id="12"> | <select id="12"> | ||
- | |||
<option value="G\w\w">GNN</option> | <option value="G\w\w">GNN</option> | ||
- | |||
<option value="C\w\w">CNN</option> | <option value="C\w\w">CNN</option> | ||
- | |||
<option value="T\w\w">TNN</option> | <option value="T\w\w">TNN</option> | ||
- | |||
<option value="A\w\w">ANN</option> | <option value="A\w\w">ANN</option> | ||
- | |||
<option value="\w\w\w">NNN</option> | <option value="\w\w\w">NNN</option> | ||
- | |||
</select> | </select> | ||
- | |||
<select id="13"> | <select id="13"> | ||
- | |||
<option value="G\w\w">GNN</option> | <option value="G\w\w">GNN</option> | ||
- | |||
<option value="C\w\w">CNN</option> | <option value="C\w\w">CNN</option> | ||
- | |||
<option value="T\w\w">TNN</option> | <option value="T\w\w">TNN</option> | ||
- | |||
<option value="A\w\w">ANN</option> | <option value="A\w\w">ANN</option> | ||
- | |||
<option value="\w\w\w">NNN</option> | <option value="\w\w\w">NNN</option> | ||
- | |||
</select><br /> | </select><br /> | ||
- | + | <input type="text" id="top" value="Input NTPs here" class="graytext" onClick="clearForm(this);"/> | |
- | <input type="text" id="top" value="Input NTPs here" class="graytext" onClick=" | + | |
- | + | ||
</td> | </td> | ||
- | |||
<td width="20%"> | <td width="20%"> | ||
- | |||
Nucleotide Gap:<br /> | Nucleotide Gap:<br /> | ||
- | |||
<select id="gap"> | <select id="gap"> | ||
- | |||
<option value="5">5</option> | <option value="5">5</option> | ||
- | |||
<option value="6">6</option> | <option value="6">6</option> | ||
- | |||
<option value="7">7</option> | <option value="7">7</option> | ||
- | |||
</select><br /> | </select><br /> | ||
- | |||
</td> | </td> | ||
- | |||
</tr> | </tr> | ||
- | |||
<tr><td colspan="3"> | <tr><td colspan="3"> | ||
- | |||
<input type="button" value="Test (drop down menu)" onClick="findSites();" /> | <input type="button" value="Test (drop down menu)" onClick="findSites();" /> | ||
- | + | <input type="button" id="findcustom" value="Test custom input" onClick="findCustom();" /> | |
- | <input type="button" value="Test custom input" onClick="findCustom();" /> | + | |
- | + | ||
<input type="button" value="Show me ALL binding sites!" onClick="findAllSites();" id="allsites"/> | <input type="button" value="Show me ALL binding sites!" onClick="findAllSites();" id="allsites"/> | ||
- | |||
</td></tr> | </td></tr> | ||
- | |||
</table> | </table> | ||
- | |||
</form> | </form> | ||
- | |||
<br /> | <br /> | ||
- | |||
<div id="results"></div> | <div id="results"></div> | ||
- | |||
</body> | </body> | ||
- | |||
</html> | </html> |
Revision as of 18:47, 8 July 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">