Why is this HTML showing up as plain text in browser?
I've been stumped on this for a while. I can't even find a similar scenario online. I have an HTML file from my professor that the browser interprets as plain text. Can someone tell me why?
Browser: Google Chrome Version 61.0.3163.79 (Official Build) (64-bit)
<!-- saved from url=(0062)http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="line-gutter-backdrop"></div>
<table>
<tbody>
<tr>
<td class="line-number" value="1"></td>
<td class="line-content"><span class="html-comment"><!--square.html--></span></td>
</tr>
<tr>
<td class="line-number" value="2"></td>
<td class="line-content"><span class="html-doctype"><!DOCTYPE html></span></td>
</tr>
<tr>
<td class="line-number" value="3"></td>
<td class="line-content"><span class="html-tag"><html></span></td>
</tr>
<tr>
<td class="line-number" value="4"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="5"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="6"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">vertex-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-vertex</span>"></span>
</td>
</tr>
<tr>
<td class="line-number" value="7"></td>
<td class="line-content"> // GLSL vertex shader code</td>
</tr>
<tr>
<td class="line-number" value="8"></td>
<td class="line-content"> attribute vec4 vPosition; </td>
</tr>
<tr>
<td class="line-number" value="9"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="10"></td>
<td class="line-content"> void main()</td>
</tr>
<tr>
<td class="line-number" value="11"></td>
<td class="line-content"> {</td>
</tr>
<tr>
<td class="line-number" value="12"></td>
<td class="line-content"> gl_Position = vPosition; </td>
</tr>
<tr>
<td class="line-number" value="13"></td>
<td class="line-content"> }</td>
</tr>
<tr>
<td class="line-number" value="14"></td>
<td class="line-content"> <span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="15"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="16"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fragment-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-fragment</span>"></span>
</td>
</tr>
<tr>
<td class="line-number" value="17"></td>
<td class="line-content"> // GLSL fragment shader code</td>
</tr>
<tr>
<td class="line-number" value="18"></td>
<td class="line-content"> precision mediump float;</td>
</tr>
<tr>
<td class="line-number" value="19"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="20"></td>
<td class="line-content"> void main()</td>
</tr>
<tr>
<td class="line-number" value="21"></td>
<td class="line-content"> {</td>
</tr>
<tr>
<td class="line-number" value="22"></td>
<td class="line-content"> gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );</td>
</tr>
<tr>
<td class="line-number" value="23"></td>
<td class="line-content"> }</td>
</tr>
<tr>
<td class="line-number" value="24"></td>
<td class="line-content"> <span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="25"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="26"></td>
<td class="line-content"> <span class="html-comment"><!--Include A/S WebGL support libraries--></span></td>
</tr>
<tr>
<td class="line-number" value="27"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-utils.js">../Common/webgl-utils.js</a>"></span><span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="28"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
href="http://csf11.acs.uwosh.edu/371-17/demos/Common/initShaders.js">../Common/initShaders.js</a>"></span><span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="29"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
href="http://csf11.acs.uwosh.edu/371-17/demos/Common/MV.js">../Common/MV.js</a>"></span><span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="30"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-debug.js">../Common/webgl-debug.js</a>"></span><span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="31"></td>
<td class="line-content"> <span class="html-tag"><script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank"
href="http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.js">square.js</a>"></span><span class="html-tag"></script></span></td>
</tr>
<tr>
<td class="line-number" value="32"></td>
<td class="line-content"><br></td>
</tr>
<tr>
<td class="line-number" value="33"></td>
<td class="line-content"> <span class="html-tag"><body></span></td>
</tr>
<tr>
<td class="line-number" value="34"></td>
<td class="line-content"> <span class="html-tag"><canvas <span class="html-attribute-name">id</span>="<span class="html-attribute-value">gl-canvas</span>" <span class="html-attribute-name">width</span>="<span class="html-attribute-value">512</span>" <span class="html-attribute-name">height</span>="
<span
class="html-attribute-value">512</span>"></span>></td>
</tr>
<tr>
<td class="line-number" value="35"></td>
<td class="line-content"> Oops ... your browser doesn't support the HTML5 canvas element</td>
</tr>
<tr>
<td class="line-number" value="36"></td>
<td class="line-content"> <span class="html-tag"></canvas></span></td>
</tr>
<tr>
<td class="line-number" value="37"></td>
<td class="line-content"> <span class="html-tag"></body></span></td>
</tr>
<tr>
<td class="line-number" value="38"></td>
<td class="line-content"><span class="html-tag"></html></span></td>
</tr>
<tr>
<td class="line-number" value="39"></td>
<td class="line-content"><span class="html-end-of-file"></span></td>
</tr>
</tbody>
</table>
</body>
</html>Solution 1:
This HTML isn't being interpreted as plain text: it's being interpreted as HTML.
It's just that the contents of your HTML include markup that has been escaped, such as < and >.
Update
Is this the markup you want?
<!--square.html-->
<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
// GLSL vertex shader code
attribute vec4 vPosition;
void main()
{
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
// GLSL fragment shader code
precision mediump float;
void main()
{
gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}
</script>
<!--Include A/S WebGL support libraries-->
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="../Common/webgl-debug.js"></script>
<script type="text/javascript" src="square.js"></script>
<body>
<canvas id="gl-canvas" width="512" height=" 512">>
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
Solution 2:
Ok this is kind of funny but make sure you edit and save the file with nodepad++ instead of notepad. As you see below i have created 3 files trying to run the html code on localhost, one.html and two.php where created via notepad, however three.html (which was created using notepad++) seem to work.