Web Engineering 1/HTML

Wiki-Quelltext dieser Seite.

__NOTOC__
{{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==
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.
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="520" height="330" src="//jsfiddle.net/pw_we1/678gddu8/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Warum wird der <tt>footer</tt> 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 <tt>style</tt> Attribut und erproben Sie weitere Möglichkeiten der Formatierung''
* ''Ändern Sie die Schriftart der angezeigten Texte''
* ''Welche Auswirkungen hat die Änderung der Schriftart am <tt>body</tt> 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 <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.

''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 [https://www.mathjax.org/ MathJax]''
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="500" height="420" src="//jsfiddle.net/pw_we1/fLad35kv/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Ä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 <tt>svg</tt> 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 <tt>viewbox</tt> Attribut kann der Koordinatenbereich festgelegt werden, der im SVG sichtbar sein soll.

Innerhalb des <tt>svg</tt> 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.
{|
|style="width: 32em;vertical-align:top;"|<html>
<iframe width="700" height="300" src="//jsfiddle.net/pw_we1/sccb5eu6/embedded/html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Ä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 <tt>g</tt> Element und erproben Sie dessen Nutzen zur Reduzierung von Formatierungen''
* ''Lassen Sie den Smiley einen Schatten werfen''
|}

==Projekt und weitere Übungen==
{{Projekt|
Formatieren Sie die Hilfeseite, sodass Sie ansprechender aussieht. Benutzen Sie dazu Farben, verschiedene Schriftarten und Hervorhebungen. Recherchieren Sie die mathematischen Grundlagen von Sudoku und nehmen sie formale Beschreibungen mit in die Hilfeseite auf. Zeichnen Sie eine SVG-Sudoku-Spieloberfläche und formatieren Sie diese so wie sie später einmal aussehen soll. Heben Sie dabei eine Zeile eine Spalte und einen Block farblich hervor.
Beispiellösung <document>WE1-P2.zip</document>}}
# 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.
# Authoring von Dokumenten mit MathML und SVG: Machen Sie sich mit einigen Editoren (auch als Online-Angebote) vertraut: 
#* [https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html svg-edit] von Google, zur Herstellung von SVG-Code
#* [https://www.w3.org/Math/wiki/Tools Tools für MathML-Authoring], darunter vor allem [http://www.firemath.info/ Firemath] und [http://www.wiris.com/editor/demo/de/mathml-latex Wiris]
#* Experimentieren Sie auch mit [https://www.mathjax.org/ MathJax], was Ihnen die Möglichkeit bietet, mathematische Ausdrücke in LaTeX zu schreiben und ohne Vorübersetzung darstellen zu lassen.
# Installieren Sie einen Webserver (z.B. [https://www.apachefriends.org/de/index.html XAMPP]) und lassen Sie Ihre erzeugten Webseiten von diesem bereitstellen