... hast du ein Problem:
Der Client (WWW-Browser) interpretiert alles, was zwischen Winkelklammern < > steht, als Display-Anweisung. Er gibt folglich die Tags nicht als (Quell-)Text wieder, sondern versucht, ihnen gemäß das Display der Internetseite zu gestalten (das führt unter Umständen zu Fehlermeldungen).
Problemlösung:
Wenn der Browser einen HTML-Quelltextabschnitt nicht als Display-Anweisung interpretieren, sondern als Text wiedergeben soll, muss die öffnende Winkelklammer < durch den Zeichen-Code < ("littler than") und die schließende Winkelklammer > durch den Zeichen-Code > ("greater than") ersetzt werden. (Das einleitende Und-Zeichen "&" und das abschließende Semikolon ";" sind wichtig!)
Das folgende
Programm erledigt das für dich.
<!DOCtype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">
<meta name="Author" content="Nate Grover">
<meta name="Publisher" content="GDG, gdgreiss.de">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Format HTML For Display
</title>
<meta name="copyright" content="Copyright 2003 by Nate Grover, All Rights Reserved">
</head>
<body>
<form name="CodeText" action="">
<div>
<h1>Wenn du auf deiner Internetseite einen Quelltext in HTML anzeigen willst...
</h1>
<script type="text/javascript">
var copytoclip=1;
function HighlightAll(theField) {
var tempval=eval("document."+theField);
tempval.focus();
tempval.select();
if (document.all && copytoclip==1){
therange=tempval.createTextRange();
therange.execCommand("Copy");
window.status="Contents highlighted and copied to clipboard!";
setTimeout("window.status=''",1800);
};
};
function formatHTMLForDisplay(theHTML){
re1 = new RegExp(">","g");
theHTML = theHTML.replace(re1,">");
re2 = new RegExp("
<","g");
theHTML = theHTML.replace(re2,"\n<");
re3 = new RegExp("\n\n","g");
theHTML = theHTML.replace(re3,"\n");
theHTML = '<pre style="width: 90%; background-color: #ffffea; color: #800000;'
+ 'font-size: 9pt; font-family: monospace;">'
+ theHTML + '\n<\/pre>';
return theHTML;
};
function doFormat(){
var theInput = document.getElementById("HTMLTextArea");
var theSpan = document.getElementById("HTMLDisplaySpan");
var theDisplay = document.getElementById("formattedHTMLTextArea");
theSpan.innerHTML = '<p style="width: 100%; background-color: #ffffff;'
+ 'color: #000000; font-family: serif; font-size: 12pt;">'
+ 'So wird der HTML-Code auf deiner Seite angezeigt: <\/p>'
+ formatHTMLForDisplay(theInput.value)
+ '<p style="width: 100%; background-color: #ffffff; color: #000000;'
+ 'font-family: serif; font-size: 12pt;">'
+ 'Füge den folgenden Quelltext in den Code deiner HTML-Seite ein: <\/p>';
theDisplay.value = formatHTMLForDisplay(theInput.value);
}
</script>
<p style="float: right; width: 70%;">
<textarea style="width: 80%; height: 100px;" id="HTMLTextArea">
</textarea>
<br />
<input type="button" value="FORMAT" onclick="doFormat()">
</p>
<p>Füge deinen HTML-Code hier ein:
<br />Paste your HTML here:</p>
<div id="HTMLDisplaySpan"
style="clear: right; width: 100%; background-color: #ffffea; color: #800000;
font-size: 9pt; font-family: monospace;">
</div>
<textarea id="formattedHTMLTextArea"
style="width: 100%; height: 200px; background-color: #fad8a0;">
</textarea>
<p style="margin-top: 0px;">
<a style="text-align: center; width: 100%; background-color: #F0C060; font-size: 100%;"
href="javascript:HighlightAll('CodeText.formattedHTMLTextArea')">
Diesen Text in den Zwischenspeicher übernehmen
<br>Copy to clipboard
</a>
</p>
</div>
</form>
<hr />
</body>
</html>