Polyglottes HTML5

Polyglottes HTML5 ist HTML5, das auch als XML interpretiert werden kann.

Polyglottes HTML5 versucht, die Anforderungen von HTML5 und XML gleichzeitig zu erfüllen.

Der folgende Rahmen ist ein Dokument in polyglottem HTML5. Er akzeptiert CSS -, HTML- und JavaScript -Bestandteile in den entsprechend beschrifteten Zeilen (».CSS { }«, »<h1>HTML</h1>« und »"JavaScript-Quelltexteinheit";«). Das heißt, daß diese Zeilen durch ein Stilblatt, HTML-Quelltext beziehungsweise JavaScript -Quelltext ersetzt werden können.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
.CSS { }
</style></head><body>
<h1>HTML</h1>
<pre><code><script>/*<![CDATA[*/
"JavaScript-Quelltexteinheit";
/*]]>*/</script></code></pre></body></html>

Im Rest des Kurses werden wir von nun an öfter polyglottes HTML5 verwenden.

Sonderzeichen im polyglotten HTML5

Sonderzeichen, wie spitze Klammern, müssen in polyglottem HTML5 – anders als bei Berücksichtigung der Anforderungen von HTML5 alleine – durch &-Sequenzen dargestellt werden.

Teilnehmer an diesem Kurs können diese Regel aber in Übungen einfach ignorieren, da Web-Browser polyglottes HTML5 bei den Übungen in diesem Kurs als normales HTML5 interpretieren.

In diesem Kurs muß kein polyglottes HTML5 geschrieben werden. Der Rahmen verwendet dies nur, um die Möglichkeit für polyglottes HTML5 offen zu lassen, kann aber auch für normales HTML5 verwendet werden.

CSS, HTML und JavaScript getrennt halten

Heute wird es oft als günstig angesehen, CSS -, HTML- und JavaScript -Bestandteile eines Programms getrennt zu halten. Wir haben deswegen im obigen Rahmen verschiedene Blöcke dafür vorgesehen.

Mehr Informationen dazu findet man auch unter den folgenden Begriffen:

graceful degredation (anständiger Abbau),
progressive enhancement (zunehmende Verbesserung) und
unobtrusive JavaScript (unauffälliges JavaScript ).

progressive enhancement :

Zuerst die Webseite so gut wie möglich nur mit HTML (ohne CSS und ohne JavaScript ) gestalten. Sollte in dieser Form schon möglichst übersichtlich aussehen und verwendbar sein.
Nun die Gestaltung mit CSS hinzufügen.
Schließlich alles, was jetzt noch fehlt, weil es nicht mit HTML und CSS alleine geht, mit JavaScript erledigen.

Attributwerte immer in Anführungszeichen

Wir schreiben zukünftig Attributwerte immer in Anführungszeichen, also beispielsweise »id="abc"« an Stelle von »id=abc«.

An Stelle von Anführungszeichen »"« können auch Apostrophe »'« verwendet werden.

XML *

AttValue ::= 
'"' ([^<&"] | Reference)* '"' |
"'" ([^<&'] | Reference)* "'"

HTML 5.2 *

Der Attributwert kann ohne Anführungszeichen geschrieben werden, wenn er keine Leerzeichen und keines der Zeichen »"«, »'«, »`«, »=«, »<« oder »>« enthält. Andernfalls muß er entweder in Apostrophen oder in Anführungszeichen angegeben werden.

Mehr verschiedene Elementtypen

Im weiteren Verlauf des Kurses verwenden wir manchmal bisher noch nicht im Kurs vorgestellte Elementtypen. Kursteilnehmer mit HTML-Vorkenntnissen werden diese kennen. Für Kursteilnehmer ohne HTML-Vorkenntnisse ist die genaue Bedeutung dieser Elementtypen in der Regel nicht wichtig, so daß sie dem Kurs auch folgen können, wenn sie deren genau Bedeutung nicht kennen. Es reicht meist, den Anfang und das Ende eines Elements sowie die Attribute und den Inhalt erkennen zu können.

Erleichterungen für Übungsaufgaben

Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei beginnt eine SIL-Datei mit SIL-Code, dem dann ein Skript-Element folgt, daß JavaScript -Quelltext enthalten kann.

Main.html

<span id="span" onclick="alert( 'ok' )">Text</span>
<script>
</script>

Quellen

„Polyglottes HTML“ heißt auf englisch “polyglot Markup ” oder “polyglot XHTML5 ”.

Mehr dazu findet man beispielsweise unter den folgenden URI-Fragmenten.

URI-Fragmente

www.w3.org/TR/html-polyglot/

www.w3.org/TR/2011/WD-html-polyglot-20110405/

en.wikipedia.org/wiki/Polyglot_markup

dev.w3.org/html5/html-polyglot/html-polyglot.html

en.wikibooks.org/wiki/Polyglot_markup,_how_to

xmlplease.com/xhtml/xhtml5polyglot/

Übungsaufgaben

/ Übungsaufgabe

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
.CSS { }
</style></head><body>
<h1>HTML</h1>
<pre><code><script>/*<![CDATA[*/
"JavaScript-Quelltexteinheit";
/*]]>*/</script></code></pre></body></html>

Setzen Sie HTML-Quelltext in den HTML5 -Rahmen ein, indem Sie »<h1>HTML</h1>« durch eines der früheren SIL-Dokumente ersetzen (ohne ein Script-Element!).

Ein SIL-Dokument

<span>
  <span id="Anton">Anton</span>
  <span id="Berta">Berta</span>
  <span id="Dora">Dora</span>
  </span>

Setzen Sie JavaScript -Quelltext in den HTML5 -Rahmen ein, indem Sie »"JavaScript-Quelltexteinheit";« durch einen JavaScript -Quelltext ersetzen.

Ein JavaScript -Quelltext

window.alert( "abc" );

Das CSS ».CSS { }« kann unverändert gelassen werden.

Nun haben Sie ein HTML5 -Dokument, das sich in einem Browser öffnen läßt.