Zusammenfassung
		Name:	MagicHTML
		Aufgabe:	HTML-Grundgerüst, das vorbereitet ist, auf spätere, einfache Erweiterung durch JavaScript-Funktionalität aller Art.
		Benötigt:	-
		Beispiel:	Testseite (einzeln/gefüllt) Testseite (Frameset/leer)
		Download:	magichtm.zip

Hmm, nur ein merkwürdiges Grundgerüst ... für eigene Seiten? Was soll das?
Nun, sinnvolle (und notwendige) Tips & Anleitungen, mit welchen Tags man den Kopf einer HTML-Datei versehen sollte und muß, gibt es im Web reichlich (z.B. in selfHTML). Bei diesem Grundgerüst geht es allerdings um nachträgliche Erweiterbarkeit der HTML-Seiten, Veränderungen, Anpassungen, etc. - und zwar ohne die HTML-Dateien nochmal zu editieren und auf den Server zu laden!
Ein neuer Browser hat eine tolle neue Funktion, die man auf jeder Seite verwenden möchte? Ein Browser hat einen ärgerlichen Fehler, den man umgehen möchte? Alle zukünftigen Änderungen kann man bequem systemweit mit einer externen JavaScript-Datei (magichtm.js) erledigen. Auch wenn man (noch) kein JavaScript beherrscht - oder dies noch nicht sehr gut tut: Mit diesem Gerüst ist man für die Zukunft gewappnet. Für eigene Ideen, und für die von anderen. Und da sich dieses Gerüst an den HTML-Autoren wendet und selbst kein sinnvolles JavaScript enthält (außer einigen notwendigen Definitionen und Start-Punkten), ist es nicht im JavaScript-Bereich gelandet, sondern eröffnet den HTML-Bereich ... ;-)

Zum Gerüst selbst: Nach den üblichen Tags und den Stylesheets für Drucker und Bildschirm kommt der erste Script-Bereich. Er muß im HTML-Head sein, und definiert einige wichtige Variablen. Im einzelnen:

• doc_type definiert den Typ des Dokuments, damit zukünftig gezielt pro Typ andere Funktionen greifen können. Sinnvolle Werte von doc_type wären z.B.
  • Single für eine alleinstehende Seite (mögliche Funktion z.B.: Entfernen eines übergeordneten Framesets von einem fremden Server, der die die Seite als "eigene" tarnen möchte)
  • Frameset für eine eigene Frame-Definition (mögliche Funktion z.B.: Feststellen, ob alle Frames geladen wurden)
  • Content für einen Inhalts-Frame (mögliche Funktion z.B.: Nachladen eines Framesets mit Navigation, falls die Seite von einer Suchmaschine angesteuert wurde; oder das Fokussieren des Inhalts-Frames zum leichteren Ausdrucken)
  • Navigation für einen Navigations-Frame (mögliche Funktion z.B.: Anpassen Navigation an verschiedene Browser)
  Aber der Phantasie sind da natürlich keine Grenzen gesetzt. ;-)
  Die Typbezeichnung findet sich übrigens (meistens) im BODY-Attribut class wieder. Hier dient er als Klassifizierung für CSS, damit für jeden Typ auch spezifische Stylesheets greifen können (z.B. unterschiedliche Behandlung von Hintergrundgrafiken, oder eine Selektion, welche Frames gedruckt werden sollen und welche nicht (eine interaktive Navigation macht halt auf Papier relativ wenig her ;-))
  
• xJS wird auf false gesetzt und im externen JavaScript auf true geändert, um Fehler abzufangen, falls die externe JavaScript-Datei nicht geladen werden kann

Außerdem werden folgende Funktionen im externen JavaScript aufgerufen (um Fehlern wegen eines fehlenden Scripts vorzubeugen, werden alle Funktionen mit if(xJS){ } geklammert):

• magicGO() wird die Scripts beinhalten, die im Kopf des HTML-Dokuments ausgeführt werden müssen oder können, z.B. um neue META-Tags (Überblendeffekte), LINK-Tags (spezielle Style-Sheets) oder weitere externe Scripts nachzuladen, aber auch, um sofort ein Frameset nachzuladen, falls der Inhaltsframe ohne dieses aufgerufen wurde. In der Testseite wird hier die eventuell bereits ermittelte Verbindungsgeschwindigkeit ausgelesen und eine "Start"-Alert-Box gezeigt.
• magicB4() (sprich: "before") ist für die Scripts zuständig, die im BODY des Dokuments, aber vor dem eigentlichen Seiteninhalt ausgeführt werden (logischerweise noch während des Ladens), z.B. um eine kleine Menüzeile auszugeben, einen Sprüche-Ticker (s. Ticker4All), oder sonstigen HTML-Text. In der Testseite werden hier die Größenvariablen ermittelt und eine Textzeile ausgegeben.
• magicL8() (sprich: "late") ist analog für die Scripts nach dem eigentlichen Seiteninhalt zuständig (immer noch während des Ladens), z.B. um dynamisch den HTML-Code zu ändern, eine abschließende Zeile mit dem Datum der Seite anzuzeigen, oder einen Button zum Menü/zur nächsten Seite. In der Testseite werden hier ein Link auf eine JavaScript-Funktion (der wäre, ohne aktiviertes JavaScript, ohnehin unsinnig) und eine Textzeile ausgegeben.
• magicOK() wird nach dem Laden der Seite nebst ihrer Dateien angesprungen, also nachdem die Seite bereits vollständig angezeigt wird, z.B. um via DHTML Seitenbestandteile auszutauschen, oder Grafiken nachzuladen. In der Testseite wird hier die Verbindungsgeschwindigkeit ermittelt (so noch nicht bei einem vorherigen Aufruf geschehen) und eine "Fertig"-Alert-Box gezeigt.
• magicXL() soll bei einer Änderung der Fenstergröße ausgeführt werden (was allerdings erst speziell durch ein Script veranlaßt werden muß), also nachdem die Seite bereits vollständig angezeigt wird, z.B. um Seitenelemente an die veränderte Fenstergröße anzupassen, oder einfach um Darstellungs- oder sonstige Fehler in einigen Browsern zu vermeiden. In der Testseite wird hier eine "Änderungs"-Alert-Box gezeigt - die Seitenaktualisierung selbst wird von der internen Systemvariablen-Funktion winResize() gestartet (jedenfalls wenn die System-Steuervariable do_resize zum Zeitpunkt der Größenänderung den Wert true besitzt), die hier auch dafür sorgt, daß magicXL() überhaupt ausgeführt wird.
• magicKO() schließlich wird beim Verlassen oder Schließen des Dokumentes aufgerufen, z.B. um die Aufenthaltsdauer des Surfers auf der Seite festzustellen, oder, bei personalisierten Seiten, geänderte Einstellungen des Surfers (ggf. nach Rückfrage) zu sichern. In der Testseite wird hier die eventuell neu ermittelte Verbindungsgeschwindigkeit für die neue Seite gesichert, und eine "Ende"-Alert-Box gezeigt.

<html>
<head>
<title>MagicHTML</title>
<link rel="stylesheet" type="text/css" media="print" href="magic-p.css">
<link rel="stylesheet" type="text/css" media="screen" href="magic-s.css">
<script type="text/javascript" language="JavaScript"><!-- // Script-Geruest
 doc_type="Content"; xJS=false;
//--></script><script type="text/javascript" language="JavaScript" src="magichtm.js"></script><script type="text/javascript" language="JavaScript"><!--
 if(xJS){magicGO();} // Header-Scripts --></script>
</head>

<body class="Content" onLoad="if(xJS){magicOK();}" onUnload="if(xJS){magicKO();}">
<script type="text/javascript" language="JavaScript"><!--
 if(xJS){magicB4();} // Scripts vor Seitendarstellung
// --></script>
<!-- Ab hier der normale HTML-Code -->


<p>Hier steht der normale HTML-Code der Seite</p>


<!-- Bis hier der normale HTML-Code -->
<script type="text/javascript" language="JavaScript"><!--
 if(xJS){magicL8();} // Scripts nach Seitendarstellung
//--></script>
</body>
</html>

<html>
<head>
<title>MagicHTML</title>
<link rel="stylesheet" type="text/css" media="print" href="magic-p.css">
<link rel="stylesheet" type="text/css" media="screen" href="magic-s.css">
<script type="text/javascript" language="JavaScript"><!-- // Script-Geruest
 doc_type="Content"; xJS=false;
//--></script><script type="text/javascript" language="JavaScript" src="magichtm.js"></script><script type="text/javascript" language="JavaScript"><!--
 if(xJS){magicGO();} // Header-Scripts --></script>
</head>

<body class="Content" bgcolor="#EEEEEE" style="width:100%; height:100%;" onLoad="if(xJS){magicOK();}" onUnload="if(xJS){magicKO();}">
<table border="0" width="99%" height="99%" style="width:100%; height:100%;" cellspacing="0" cellpadding="0"><tr align="center" valign="top"><td>
<script type="text/javascript" language="JavaScript"><!-- // Scripts vor Seitendarstellung
 if(xJS){magicB4();}
// --></script>
<!-- Ab hier der normale HTML-Code -->

 <p>Hier steht der obere HTML-Code der Seite</p>

</td></tr><tr align="center" valign="middle"><td>

 <p>Hier steht der mittlere HTML-Code der Seite</p>

</td></tr><tr align="center" valign="bottom"><td>

 <p>Hier steht der untere HTML-Code der Seite</p>

<!-- Bis hier der normale HTML-Code -->
<script type="text/javascript" language="JavaScript"><!-- // Scripts nach Seitendarstellung
 if(xJS){magicL8();}
//--></script>
</td></tr></table>
</body>
</html>

<html>
<head>
<title>MagicHTML</title>
<link rel="stylesheet" type="text/css" media="print" href="magic-p.css">
<link rel="stylesheet" type="text/css" media="screen" href="magic-s.css">
<script type="text/javascript" language="JavaScript"><!-- // Script-Geruest
 doc_type="Frameset"; xJS=false;
//--></script><script type="text/javascript" language="JavaScript" src="magichtm.js"></script><script type="text/javascript" language="JavaScript"><!--
 if(xJS){magicGO();} // Header-Scripts --></script>
</head>

<!-- Hier stehen die Frame-Definitionen, z.B. mit 3 Frames:  -->
<!-- Linker Frame (z.B. Hauptmenue) mit 150 Punkten Breite   -->
<!-- Oberer Frame (z.B. Untermenue) mit 50 Punkten Hoehe     -->
<!-- Hauptframe mit vertikal & horizontal zentriertem Inhalt -->

<frameset id="ColsFS" cols="150,*" framespacing="0" frameborder="0" border="0" bordercolor="#000000">
 <frame src="magichtm.htm" name="Mainmenu" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0">
 <frameset id="RowsFS" rows="50,*" framespacing="0" frameborder="0" border="0" bordercolor="#000000" onLoad="if(xJS){magicOK();}" onUnload="if(xJS){magicKO();}">
  <frame src="magichtm.htm" name="Submenu" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
  <frame src="magictab.htm" name="Content" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0">
 </frameset>
</frameset>

<noframes>

<body class="NoFrameset">

<p><b>
Um diese Seite komplett zu sehen, brauchen Sie leider einen framefähigen Browser.<br>
<br>
Zu den einzelnen Frames:<ul>
 <li><a href="magictab.htm">Inhaltsseite</a></li>
 <li><a href="magichtm.htm">Hauptmenü</a></li>
 <li><a href="magichtm.htm">Untermenü</a></li>
 <li><a href="index.htm">Zur Homepage</a></li>
</ul>

</body>

</noframes>

</html>

Achtung: Schön, wenn man alles zentral mit JavaScript erledigen kann. Aber man sollte sich als Web-Autor nie darauf verlassen, daß der Surfer dies auch nutzen kann. Unverzichtbare Bestandteile des Web-Angebotes (dazu gehört auch immer die Navigation) müssen in reinem HTML-Code vorhanden sein - wenigstens als (ggf. einfachere) Alternative (dies betrifft natürlich auch sonstige "Nicht-HTML-Spielereien" wie z.B. Flash oder Java, aber auch Frames). Die Surfer werden es danken, und Sie auch - schon wegen der Suchmaschinen, die sich mit Nicht-HTML stets schwertun. Denn was nützen schon Web-Seiten, auf denen kaum einer surft, weil die Seiten erst gar nicht gefunden werden?