Web Engineering 1/HTML

Wiki-Quelltext dieser Seite.

{{Ziele|
* 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==
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="100%" height="330" src="//jsfiddle.net/pw_we1/678gddu8/1/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
Für Überschriften gibt es die Tags <tt>h1</tt> bis <tt>h6</tt>. 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 <tt>header</tt>, <tt>content</tt> und <tt>footer</tt> haben z.B. keinen formatierenden Einfluss auf die darin enthaltenen Elemente, grenzen sie aber logisch voneinander ab. Ein universelles Abgrenzungselement ist das <tt>div</tt>-Element. Die Bedeutung der Abgrenzung kann hier durch den Programmierer selbst festgelegt werden. Ein weiterer universeller strukturierender Tag ist <tt>span</tt>. Im Unterschied zu <tt>div</tt> und anderen strukturierenden Elementen wird der Inhalt von <tt>span</tt> 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 <tt>em</tt> 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.
|}
==MathML==
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="100%" height="420" src="//jsfiddle.net/dotrxrpw/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
MathML ist Teil des HTML5-Standards. Es reicht somit aus, einen zusammengehörigen formalen Ausdruck durch <tt>math</tt> Tags abzugrenzen. Auch MathML folgt dem XML-Standard und nutzt Elemente und Attribute. Es werden mit <tt>mi</tt> Variablen, mit <tt>mn</tt> Zahlen und mit <tt>mo</tt> Operatoren ausgezeichnet.

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

Klammerungen verschiedener Art können mit <tt>mfenced</tt> realisiert werden.
|}

==SVG==
TODO: Fiddle "SVG"
{{Projekt|Beispiellösung <document>WE1-P2.zip</document>}}