D
ddailey
The code which follows is something I cobbled together quite hastily
to display to students a way of illustrating HTML source code
(including CSS and JavaScript) alongside a page as rendered. I've done
this a dozen different ways for slightly different purposes and rather
can't remember what the various outcomes of my inquiries have been.
In the following I use <xmp> as a way of displaying source code. It
works in IE, Opera, and FF, but I recall hearing that <xmp> is to be
deprecated and that it provides no functionality that cannot otherwise
be performed without it. Whence the question: how does one do the
following without <xmp>? [aa identical approach using <code> seems to
do utterly zilch]
thanks in advance
dpd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><style>
#left{
position: absolute;
top: 0;
left: 0;
width: 55%;
background: #fe8;
color: #018;
}
#right{
position: absolute;
top: 0;
left: 55%;
}
..text{
margin: 15px;
}
</style>
<script>
var a = document.documentElement.innerHTML
function display(L){
L.innerHTML+="<code>"+a+"<\/code>"
}
</script></head>
<body onload="display(document.getElementById('left'))">
<div id="left">
<div class="text">
<b>Here, in the div with id="left", we see the mechanics of the page.</
b>
</div>
</div>
<div id="right">
<div class="text">
<h2>Two column layout using CSS</h2>
<p>Here in the div with id="right", is where ordinary web stuff goes.</
p>
</div>
</div>
</body>
</html>
to display to students a way of illustrating HTML source code
(including CSS and JavaScript) alongside a page as rendered. I've done
this a dozen different ways for slightly different purposes and rather
can't remember what the various outcomes of my inquiries have been.
In the following I use <xmp> as a way of displaying source code. It
works in IE, Opera, and FF, but I recall hearing that <xmp> is to be
deprecated and that it provides no functionality that cannot otherwise
be performed without it. Whence the question: how does one do the
following without <xmp>? [aa identical approach using <code> seems to
do utterly zilch]
thanks in advance
dpd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><style>
#left{
position: absolute;
top: 0;
left: 0;
width: 55%;
background: #fe8;
color: #018;
}
#right{
position: absolute;
top: 0;
left: 55%;
}
..text{
margin: 15px;
}
</style>
<script>
var a = document.documentElement.innerHTML
function display(L){
L.innerHTML+="<code>"+a+"<\/code>"
}
</script></head>
<body onload="display(document.getElementById('left'))">
<div id="left">
<div class="text">
<b>Here, in the div with id="left", we see the mechanics of the page.</
b>
</div>
</div>
<div id="right">
<div class="text">
<h2>Two column layout using CSS</h2>
<p>Here in the div with id="right", is where ordinary web stuff goes.</
p>
</div>
</div>
</body>
</html>