HTML

Aus ProgrammingWiki

Wissen	Können	Projekt
Unterschied zwischen Strukturierung und Formatierung Abgrenzung von logischer und physischer Formatierung Notwendigkeit der Trennung von Inhalt und Layout Neben HTML gibt es weitere spezialisierte Standards	Beherrschung grundlegender HTML Sprachelemente zur Strukturierung und Formatierung Verwendung von MathML für formale Ausdrücke Verwendung von SVG für vektorbasierte grafische Darstellungen	Formatierung des beschreibenden Texts Hervorhebung von Schlagwörter, externe Links Beschreibung der mathematischen Grundlagen des Spiels Grafische Nachbildung der Sudokuspielfläche und Markierung relevanter Bereiche

Styling

Für Überschriften gibt es die Tags h1 bis h6. Diese Tags sind formatierend (Überschriften werden unterschiedlich dargestellt). Obwohl Überschriften im herkömmlichen Sinne strukturierend sind, haben Sie in HTML keine derartige Funktion.

Strukturierende Elemente gruppieren andere Elemente oder bringen sie anderweitig in einen logischen Zusammenhang. Die Tags header, content und footer haben z.B. keinen formatierenden Einfluss auf die darin enthaltenen Elemente, grenzen sie aber logisch voneinander ab. Ein universelles Abgrenzungselement ist das div-Element. Die Bedeutung der Abgrenzung kann hier durch den Programmierer selbst festgelegt werden. Ein weiterer universeller strukturierender Tag ist span. Im Unterschied zu div und anderen strukturierenden Elementen wird der Inhalt von span nicht in eine neue Zeile verschoben, sondern direkt in den Fluss integriert.

Die verschiedenen möglichen HTML-Tags können mitunter strukturierend und formatierend sein. Mit em z.B. wird der Inhalt logisch als "hervorgehoben" eingestuft ohne explizit eine bestimmte Art der Hervorhebung vorzugeben. Hier bleibt es u.U. den Browsern überlassen, wie diese Hervorhebung grafisch interpretiert wird.

Warum wird der footer nicht am Ende der Seite angezeigt? Bearbeiten Sie das Beispiel JSFiddle Machen Sie sich mit der Funktionsweise von JSFiddle vertraut Vergegenwärtigen Sie sich die Unterschiede von logischer und expliziter Formatierung Recherchieren Sie das style Attribut und erproben Sie weitere Möglichkeiten der Formatierung Ändern Sie die Schriftart der angezeigten Texte Welche Auswirkungen hat die Änderung der Schriftart am body Element? Ermitteln Sie Möglichkeiten zur Änderung der Textausrichtung

MathML

MathML ist Teil des HTML5-Standards. Es reicht somit aus, einen zusammengehörigen formalen Ausdruck durch math Tags abzugrenzen. Auch MathML folgt dem XML-Standard und nutzt Elemente und Attribute. Es werden mit mi Variablen, mit mn Zahlen und mit mo Operatoren ausgezeichnet.

Hoch- und Tiefstellungen von Exponenten und Indizes werden durch msup und msub erreicht. Diese Elemente erwarten jeweils zwei Unterelemente für den Basiswert und den Exponenten bzw. Index. Komplexere zusammengehörige Ausdrücke können mit mrow gruppiert werden.

Klammerungen verschiedener Art können mit mfenced realisiert werden.

Hinweis: Obwohl MathML Teil des HTML5-Standards ist, wird es von den meisten Browsern nicht nativ unterstützt. Abhilfe schaffen hier nur spezielle Browser-Plugins oder das Einbinden von MathJax

Ändern Sie die Formel, so dass die Wurzel und der Betrag als Nenner eines Bruches angezeigt werden Recherchieren Sie, wie verschiedene mathematische Symbole, z.B. boolesche Ausdrücke, eingebunden werden und erproben Sie diese Wie werden mathematische Funktionen wie Logarithmus und Sinus verwendet? Wie werden Summen und Integrale erzeugt? Erzeugen Sie eine 3 x 3 Matrix Binden Sie die erzeugten Formeln in Fließtext ein

SVG

Im HTML5-Standard kann SVG wie jedes andere Element eingebettet werden. Im svg Tag kann die Größe der angezeigten Grafik festgelegt werden. Diese ist vollkommen unabhängig von der Größe der Zeichenobjekte die innerhalb des SVG definiert sind. Mit dem viewbox Attribut kann der Koordinatenbereich festgelegt werden, der im SVG sichtbar sein soll.

Innerhalb des svg Elements werden die einzelnen Zeichenobjekte aufgelistet. Zu beachten ist, dass diese in der Reihenfolge ihrer Definition gezeichnet werden. Später aufgeführte Elemente liegen also über früher definierten.

Die Geometrie der Zeichenobjekte wird immer durch Angabe einzelner Koordinaten, Längen oder Abständen definiert. Jedes Zeichenobjekte hat dabei eine individuelle Art und Weise der Definition. Der Koordinatenraum ist frei wählbar.

Ändern Sie Höhe und Breite des SVG und beobachten Sie was passiert Finden Sie eine Möglichkeit die Grafik zu strecken und zu stauchen Ändern Sie die Reihenfolge der Grafikelemente und beobachten Sie den Effekt Bearbeiten Sie das SVG sodass ein trauriger Smiley entsteht Bearbeiten Sie das SVG sodass ein wütender Smiley entsteht Rotieren Sie den Text, sodass er diagonal über dem Smiley erschein Recherchieren Sie das g Element und erproben Sie dessen Nutzen zur Reduzierung von Formatierungen Lassen Sie den Smiley einen Schatten werfen

Projekt und weitere Übungen

1. Benutzen Sie den CSV-HTML-Compiler vom vorherigen Thema und erweitern Sie diesen. Ein Beispiel: CSV-Paare von Zahlen könnten als Punkte einer Kurve interpretiert und mit SVG dargestellt werden. Außerdem könnte eine Funktion (MathML) angegeben werden, die den eingezeichneten Graph approximiert.
2. Authoring von Dokumenten mit MathML und SVG: Machen Sie sich mit einigen Editoren (auch als Online-Angebote) vertraut:
   • svg-edit von Google, zur Herstellung von SVG-Code
   • Tools für MathML-Authoring, darunter vor allem Firemath und Wiris
   • Experimentieren Sie auch mit MathJax, was Ihnen die Möglichkeit bietet, mathematische Ausdrücke in LaTeX zu schreiben und ohne Vorübersetzung darstellen zu lassen.
3. Installieren Sie einen Webserver (z.B. XAMPP) und lassen Sie Ihre erzeugten Webseiten von diesem bereitstellen