Inhaltsverzeichnis

Inhaltsverzeichnis

Vorwort zum Lehrbrief ...... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1 HTML...... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.1 Grundau�au des Webs ..... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2 Elemente und Tags, Inhalt und Attribute ...... . . . . . . . . . . . . . . . 6

1.3 Erstes Beispiel .... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.4 Pfade und Hyperlinks...... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

1.5 Tabellen...... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

1.6 Formulare ...... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.7 Zusammenfassung ..... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

1.8 Übungsaufgaben ..... ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2 Cascading Stylesheets (CSS) ..... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2.1 Einbindung ...... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2.2 Verknüpfung der HTML-Elemente und der CSS-Regeln .... 27

2.3 Die Kaskadierung geschachtelter Regeln ...... . . . . . . . . . . . . . . . 28

2.4 Media Queries...... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.5 Weitere Informationen und Quellen..... .. . . . . . . . . . . . . . . . . . . . 30

2.6 Übungsaufgaben ...... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

3 Formate zum Datenaustausch ...... . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.1 XML ....... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.2 JSON........ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

3.3 Binäre Austauschformate...... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

3.4 Textbasierte versus binäre Austauschformate..... .. . . . . . . . . 46

3.5 Übungsaufgaben ....... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

1

Inhaltsverzeichnis

4 Lösungen der Aufgaben ...... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Literatur ....... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Abbildungsverzeichnis..... .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

2

Inhaltsverzeichnis

Vorwort zum Lehrbrief

Dieser Lehrbrief behandelt die dem Internet, vor allem jedoch demWorld Wide Web zugrunde liegenden Techniken und Konzepte. Im Eng-lischen hat sich für dieses Wissensgebiet vornehmlich der Begriff webtechnologies durchgesetzt. Und obwohl die Bedeutung des englischenWortes technology derjenigen des deutschen Technik entspricht,1 wirdauch im Deutschen oft der Begriff „Internettechnologien“ verwendet.Diese „Lehre von den Internettechniken” umfasst einerseits die in-formatische Ebene des Internets, also die Behandlung sowohl seinertechnischen Infrastruktur mit den verschiedenen Schichten und Proto-kollen, als auch seiner Programmiersprachen, Algorithmen und Spei-chermechanismen. Das Internet entwickelte sich zur technischen In-frastruktur einer weltumfassenden informationellen Revolution, derenKeim bereits mit Alan Turings Konzept einer Rechenmaschine 1936entstand [5] und nun mit Social Media, dem „Internet der Dinge“ undmobilen Techniken zur bedeutendsten wirtschafts- und kulturhisto-rischen Umwälzung seit der Industriellen Revolution führte und de-ren psychologische, politische und gesellschaftliche Auswirkungen bis-lang allenfalls visionäre Kulturwissenschaftler wie Marshall McLuhanerahnt haben. So verstanden gehört die Webtechnologie also zu einemder Kerngebiete der Wirtschaftsinformatik.Im vorliegenden Skript werden zunächst kurz die Grundlagen desWebs, also HTML, CSS und die Datenaustauschformate XML und JSONvorgestellt. Darauf aufbauend werden Datenbankanbindungen überdas Internet mit PHP als serverseitiger Technik behandelt, sowie JavaS-cript als zentrale clientseitige Internettechnik. Beide Techniken spieleneine ökonomisch wichtige Rolle, nicht nur zur Intensivierung von Kun-denanbindungen oder als Erweiterungspotenzial für Vertriebskanäle,sondern auch für unternehmensinterne Prozesse im Rahmen eines In-tranets.Warum PHP und JavaScript als Beispiele für Internettechniken? Mit-te der 1990er Jahre entstanden, sind beide Sprachen immerhin mitt-lerweile in die Jahre gekommene und zudem nicht unumstritteneSprachen. Allerdings hat sich PHP wegen seiner relativ einfachenHandhabbarkeit und dem Rückgriff auf frei verfügbare Open-Source-Produkte, vor allem in Kombination mit der Datenbank MySQL, zu ei-nem De-Facto-Standard der Internettechniken entwickelt. JavaScriptauf der anderen Seite läuft auf allen modernen Browsern und ist ei-

1 Das Wort Technologie leitet sich vom griechischen τ εχνη techně „Kunst, Hand-werk“ und λóγoς logos „Wort, Lehre Wissenschaft“ ab und kann daher treffend mit„Lehre von den Techniken“ übersetzt werden. Genau so definierte der Philosoph Chris-tian Wolff den Begriff 1740: „Est itaque Technologia scientia artium & operum artis.“Etwa: „So ist Technologie die Wissenschaft von den Handwerken und den Handwerk-serzeugnissen.“ [https://books.google.com/books?id=9mYOAAAAQAAJ&pg=PA33] Im Gegen-satz zum englischen Wort technology mit seiner etwas anderen Bedeutung kann es imDeutschen also streng genommen keine Pluralform von Technologie geben.

3

Inhaltsverzeichnis

ne der Säulen moderner Webanwendungen, vor allem Google triebden weltweiten Einsatz von JavaScript seit den 2000er Jahren mas-siv voran. Auch Facebook bietet auf seiner Entwicklerseite https:

//developers.facebook.com/ Programmierumgebungen (SDK’s) für Ja-vaScript und PHP an, neben weiteren für die Programmierung mobilerApps der gängigen Smartphonesysteme und für die Spiel-Engine Unity.Den Stellenwert der beiden Programmiersprachen für die Entwicklungvon Webanwendungen kann man also kaum überschätzen. Zudem sindnach W3Techs (http://w3techs.com/) beide Sprachen die im Web amweitesten verbreiteten, PHP mit über 80 % als serverseitige Spracheund JavaScript mit über 90 % als clientseitige Sprache.Daher liegt es nahe, Studierenden der Informatik und der Wirtschafts-informatik die Themen PHP, Webdatenbanken und JavaScript zu ver-mitteln. Insbesondere, da alternative Techniken wie Ruby on Rails, JavaEE oder ASP ähnlich funktionieren und daher eine Einarbeitung darinmit vorhandenen Kenntnissen von PHP leichtfällt.

Literaturverweise und Internetquellen

In diesem Lehrbrief werden Literaturverweise und übergeordnete In-ternetquellen im laufenden Text mit eckigen Klammern „[...]“ angege-ben und am Ende jeder Lerneinheit aufgelistet. Spezifische und vonspeziellen Textstellen aus verwiesene Internetdokumente werden da-gegen an den Verweisstellen im Fließtext oder in den Fußnoten direktaufgelistet.

Vorbemerkungen zur Lehreinheit

In der vorliegenden ersten Lehreinheit werden die Grundlagen derWebprogrammierung eingeführt, also die Darstellung von Inhalten imInternet mit HTML, deren Formatierung mit CSS und die Datenaus-tauschformate XML und JSON.

Danksagungen.Am Ende möchte ich denjenigen danken, die zur Entste-hung und Vollendung dieses Skripts beigetragen haben. Insbesonderewäre es ohne meinen langjährigen Freund und Mitarbeiter Ingo Schrö-der und seine wichtigen Anregungen, Ideen und Initiativen nicht in die-ser Form entstanden. Mein Dank gilt zudem Robert Schweda, der als indem Bereich der Webentwicklung professionell Tätiger nicht nur wich-tige Impulse gegeben, sondern auch die Inhalte des Kapitels über CSSbeigesteuert hat.

Hagen,im Dezember 2016 Andreas de Vries

4

1 HTML

1.1 Grundau�au des Webs

1.1.1 Client-Server-Architektur

Das Internet basiert auf TCP/IP und ist ein Rechnernetz mit Client-Server-Architektur: Jede Anwendung ist ein Dienst (Service), den be-stimmte Rechner (Server) im Netz bereitstellen und den jeder Rech-ner im Netz als Client anfordern kann. Es gibt eine ganze Reihe von

Abb. 1.1: Das Internet basiert auf einer Client-Server-Architektur. Der Server ist hierbeiein Webserver, z.B. Apache, der Client üblicherweise ein Browser.

Diensten, die ein Rechner anbieten kann, beispielsweise als Datenbank-Server, Druck-Server, FTP-Server, WWW-Server, ... . Im Grunde ist einServer nichts weiter als ein permanent laufender Rechnerprozess, derauf Anforderungen horcht und auf sie antwortet. Genaugenommenkommunizieren also Prozesse miteinander, nicht Rechner. Im Internetist der Browser ein Client, und ein Webserver wie z.B. Apache ein Ser-ver.

1.1.2 Request-Response

Was passiert nun eigentlich, wenn der Browser eine Webadresse auf-ruft? Hinter jeder (gültigen) Webadresse verbirgt sich stets eine Dateiauf dem Web-Server. Der Browser fordert diese Datei an (request). DerWebserver, der als eifriger Dienstleister permanent auf solche Requestshorcht, antwortet auf sie mit einer Response (Antwort). Sie besteht imFalle einer Webseite oder einer anderen Datei (es sei denn, es ist einPHP- oder sonstiges „serverseitiges“ Programm, s.u.) lediglich darin, ih-ren Inhalt an den Browser zu schicken.Die ganze Kommunikation im Internet basiert auf diesem primitivenund sehr einseitigen Frage-Antwort-Spiel. Stets fordert ein Browser ei-ne Datei an und bekommt sie (meistens ...). Hat der Name der angefor-derten Datei die Endung .hmtl oder .htm, so versucht der Browser denInhalt als HTML zu interpretieren und stellt ihn in seinem Fenster dar.Es ist dieses einfache Request-Response-Muster, das einerseits für dendurchschlagenden Erfolg des Internets als Informationsmedium ver-antwortlich ist, das andererseits aber für eine gewisse Starrheit sorgt:

5

1 HTML

Informationen vom Client zum Server sind nämlich gar nicht vorgese-hen. Diesen Mangel zu beheben ist nicht einfach, eine der möglichenAntworten darauf ist PHP. Doch bevor wir uns dieser Webtechnik zu-wenden, wollen wir erst HTML kennen lernen.

1.2 Elemente und Tags, Inhalt und Attribute

HTML ist eine einfache formale Sprache, die aus vordefinierten For-matierungsanweisungen besteht und von einem Interpreterprogramm,dem Browser, übersetzt und auf dem Bildschirm dargestellt wird.„HTML“ steht dabei als Abkürzung für Hypertext Markup Language, al-so etwa „Hypertext Markierungssprache“ oder „Hypertext Auszeich-nungssprache“, wobei der Begriff markup ursprünglich aus dem Ver-lagswesen stammt und jene handschriftlichen Markierungen („Text-auszeichnungen“) bezeichnet, die ein Layouter als Anmerkungen fürden Setzer in ein Manuskript einfügt und die im fertigen Endausdrucknatürlich nicht sichtbar sind.Entsprechend bestehen HTML-Dokumente aus rein ASCII-textbasierten Anweisungen, den sogenannten Elementen. Es gibteine bestimmte Menge von Elementen, die in einem HTML-Dokumentvon sogenannten Tags umschlossen sind. Tags tauchen also fast im-mer paarweise auf (Ausnahmen sind die leeren Elemente, s.u.). Manschreibt dabei das Anfangs-Tag, indem man den Namen des Elementsin spitzen Klammern schreibt, <name>, und das Ende-Tag zusätzlichmit einem Schrägstrich (slash) </name> versieht, also z.B.

<name> . . .</name>

Der Inhalt „. . . “ des Elements steht innerhalb dieser Tags und kann wie-derum Elemente enthalten. Wichtig ist dabei die Regel, dass ein inne-res Element erst geschlossen sein muss, bevor ein äußeres geschlossenwerden kann, also z.B.

<html>

<head>

<title>

Seitenname

</title>

</head>

<body>

Inhalt

</body>

</html>

Auf diese Weise entsteht eine logische Baumstruktur ineinander ge-schachtelter Elemente (Abb. 1.2). Sie stellt in diesem Fall ein HTML-Dokument dar, das ein head- und ein body-Element als Kinder enthält,und head enthält wiederum als Kind das Element title. Die Elementetitle und body enthalten als Inhalt Mein Seitenname und Inhalt.

6

1.3 Erstes Beispiel

Abb. 1.2: Die logische Baumstruktur eines HTML-Dokuments.

Falls ein Element kein Kind und keinen Inhalt besitzt, heißt es leer undkann geschrieben werden als <name/>, d.h.

<name> </name> = <name/>.

Ein Element kann mehrere Attribute enthalten. Ein Attribut ist eine be-stimmte Eigenschaft des Elements und kann einen Wert aus einer vor-gegebenen Menge annehmen. Es wird in das Start-Tag des Elements ge-schrieben und sein Wert nach einem Gleichheitszeichen dahinter in An-führungszeichen:

<name attribut="wert"> . . . </name>

In XML, dem allgemeinen „Dokumentenstandard“ des Web (siehe Ab-schnitt 3.1 ab Seite 34) spielt die Groß- und Kleinschreibung von Tagsund Attributen eine Rolle, meist werden Elementnamen klein geschrie-ben.

1.2.1 Dateiendung .html und Kommentare

Als weitere allgemeine Information zu HTML-Dokumenten muss manwissen, dass sie eine ASCII-Textdatei sind, erstellbar mit jedem einfa-chen Editor, und die Endung .html oder .htmhaben müssen. Ferner kön-nen Kommentare an beliebiger Stelle nach dem Vorspann (s.u.) in einHTML-Dokument eingefügt werden. Sie haben die Syntax

<!-- ... -->

Ein Kommentar ist also ein einzelner Tag, allerdings kein Element; eskann und darf daher nicht geschlossen werden. Kommentare werdenvom HTML-Interpreter des Browsers ignoriert und also im Browser-fenster nicht dargestellt. Das gleiche Schicksal ereilt auch jedes Leer-raumzeichen (Whitespace), also Leerzeichen, Tabulator, Zeilenumbruchusw., das auf ein Leerraumzeichen folgt.

1.3 Erstes Beispiel

Das folgende Beispiel gibt ein vollständiges HTML-Dokument wiederund verwendet einige derjenigen Elemente, die wir im Folgenden benö-tigen werden. Es ist eine reine Textdatei und muss als Endung .htmloder

7

1 HTML

.htmhaben, um vom Browser bzw. vom Webserver als HTML-Dokumenterkannt zu werden. Das Dokument wird dann wie in Abb. 1.3 darge-stellt.

Listing 1: Einfaches HTML-Dokument zur Begrüßung

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <title>Meine erste Seite</title>

5 </head>

6

7 <body>

8 <h1>Hallo Welt!</h1>

9 <p>

10 Dies ist ein vollständiger Absatz.

11 </p>

12 Hier befindet sich nur Text, der hier

13 <br/>

14 umgebrochen wird,

15 </body>

16 </html>

Abb. 1.3: Die Ausgabe von Listing 1.

1.3.1 Der Vorspann, Zeichensatzkodierung

Die erste Zeile des HTML-Dokuments ist der Vorspann, der die genaueHTML-Version des Dokument bestimmt. Die derzeit übliche ist HTML5.Wie in jeder der gängigen Programmiersprachen ist die standardgemä-ße Textcodierung für HTML der ASCII-Code, kennt also keine Sonder-zeichen wie z.B. ä, ß, ç, usw. Möchte man Sonderzeichen darstellen, sogibt es zwei Möglichkeiten. Einerseits gibt es dafür in HTML Sonderbe-fehle, z.B.:

8

1.3 Erstes Beispiel

Zeichen HTML-Befehl Erläuterungä, Ä &auml; &Auml; „a Umlaut“, „A Umlaut“

ß &szlig; „sz Ligatur“e &euro;

ϕ &#966; = &#x3C6; 966 = 0x3C6 ist der Unicode von ϕ

(Achtung: das Semikolon gehört zu den Anweisungen!) Eine vollstän-dige Liste aller in HTML darstellbaren Zeichen finden Sie unter

https://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz

Eine andere (und bequemere) Möglichkeit ist es, innerhalb des <meta>-Tags im <head>-Tag das Attribut charset auf die Kodierung einzustellen,also

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

...

Üblich sind die beiden Werte "UTF-8" für Unicode und "ISO-8859-1"

für den erweiterten ASCII-Zeichensatz. Die mächtigere von beiden Ko-dierungen ist natürlich UTF-8, mit dem alle international gebräuch-lichen Schriftsätze dargestellt werden können, wie die InternetseiteWikipedia.org eindrucksvoll zeigt.Sie können Ihr HTML-Dokument auf Gültigkeit überprüfen lassen, in-dem Sie den HTML-Validator des W3-Consortiums (W3C) verwenden,http://validator.w3.org/

Bis auf die Angabe des Dokumententyps hat der Vorspann keinen Ein-fluss auf die Darstellung des HTML-Dokuments, also der „Webseite“.Das Dokument selber besteht aus einem einzigen <html>-Element. Hiermuss der Inhalt des Dokuments festgelegt werden.

1.3.2 <head> und <body>

Die beiden Kindelemente eines <html>-Elements sind <head>und <body>.Das <head>-Element kann Zusatzinformationen („Metainformationen“)enthalten sowie im Element <title> den Namen des Dokuments, derin der Titelzeile des angezeigten Fensters erscheint. Der Fensterinhaltwird im <body>-Element festgelegt. Jeder hier erstellte Text wird imFenster dargestellt, es sei denn er ist in einem Tag.

1.3.3 Überschriften, Absätze und Zeilenumbrüche

Der im <body>-Element erstellte Text kann mit Tag-Formatierungen nungestaltet werden. Eine Überschrift kann mit dem <h1>-Element erstelllt

9

1 HTML

werden, wobei ,h‘ für header steht und die 1 für die Ebene; es gibt wei-tere Elemente <h2> . . .<h6>, die jeweils verschiedene Unterüberschriftenerstellen. Der Inhalt der Überschrift ist dann ganz einfach der Text in-nerhalb der beiden Tags <h1> . . .</h1>.Ein Absatz wird in HTML durch das <p>-Element markiert, der Brow-ser stellt seinen Inhalt passend im Fenster dar und bricht abhängig vonder Fensterbreite automatisch um. Standardmäßig wird der Text links-bündig dargestellt. Andere Formatierungen kann man mit dem Attributstyle erreichen:

HTML-Anweisung Wirkung<p style="text-align:justify"> . . . </p> Absatz in Blocksatz<p style="text-align:center"> . . . </p> Absatz zentriert<p style="text-align:right"> . . . </p> Absatz rechtsbündig

Beachten Sie die Anweisung als Attribut-Wert-Paar. Der Wert ist hierübrigens eine CSS-Anweisung. (Auf CSS werden wir weiter untennoch etwas genauer eingehen.) Früher wurde zur Zentrierung oft das<center>-Element verwendet; es gilt heute jedoch als deprecated („ab-gelehnt“) und sollte unbedingt vermieden werden. Eine Auflistung vonveralteten HTML-Anweisungen finden Sie unter:

http://wiki.selfhtml.org/wiki/HTML/deprecated

Möchte man einen Zeilenumbruch im laufenden Text erzwingen, sokann man es mit dem <br>-Element (für break) erreichen. Da es ein lee-res Element ist, sollte man es XML-konform als <br/> verwenden.

1.3.4 Physische Auszeichnungen

Man kann einzelne Worte oder auch Wortgruppen im laufenden Texthervor heben, beispielsweise fett oder kursiv erscheinen lassen. Es gibtdafür eine ganze Reihe von Elementen, <b> (bold) für Fettdruck oder <i>(italic) für Kursivdruck. Entsprechende Anweisungen könnten also wiefolgt aussehen:

<p>

Ein besonders wichtiger Begriff sollte <b>fett</b>

erscheinen,

mindestens aber <i>kursiv</i>.

</p>

Man kann mit CSS einzelne Worte auch in anderen Textfarben erschei-nen lassen,

<p style="background:yellow">

Ein Abschnitt mit <span style="color:red">roten</span>

und <span style="color:darkgreen">grünen</span> Worten

auf gelbem Hintergrund.

</p>

10

1.4 Pfade und Hyperlinks

Will man den gesamten Fensterhintergrund farbig gestalten, so kannman dies mit dem style-Attribut im <body>-Tag bewirken:

<body style="background:yellow">

Näheres dazu, speziell Farbnamen, siehe http:

//de.selfhtml.org/navigation/css.htm – dem Spieltrieb und derPhantasie sind kaum Grenzen gesetzt!

1.4 Pfade und Hyperlinks

Das ,H’ in HTML geht auf Hypertext zurück, eine Eigenschaft, die maß-geblich zum Erfolg des Webs beigetragen hat: Man kann nämlich anbeliebiger Stelle im Text einen Hyperlink, oder kurz Link, setzen, al-so einen Verweis auf irgendeine Webadresse im Internet, auf die mandurch Anklicken gelangen kann.Verantwortlich dafür ist das <a>-Element (für anchor – Anker), das wirim folgenden Beispiel kennen lernen. Da wir dazu das Konzept der Pfa-de im Internet benötigen, das man auch zur Darstellung von Bilderneinsetzen muss, ist gleich auch noch eine Grafik eingebaut.

Listing 2: Hyperlinks

1 <!DOCTYPE html>

2 <html>

3 <head><title>Links</title></head>

4 <body>

5 Hier geht es zur <a href="http://www.fh-swf.de">FH Sü

dwestfalen</a>

6 mit einem absoluten Pfad,

7 deren Logo so aussieht:

8 <img src="http://www3.fh-swf.de/bilder/logo.gif" width="100

"

9 border="0" alt="Logo"/>.

10 <br/>

11 Hier geht es zu einem

12 <a href="../programme/auszeichnungen.html">HTML-Dokument</a

>

13 mit einem relativen Pfad zum Nachbarverzeichnis <tt>/

programme</tt>.

14 </body>

15 </html>

Im Browser ergibt sich damit die Darstellung in Abb. 1.4.

1.4.1 Absolute und relative Pfade

HTML-Dateien bestehen nur aus Text. Dennoch enthalten vieleWeb-Seiten Grafiken, Hintergrundgrafiken, Multimedia-Elemente, Java-

11

1 HTML

Abb. 1.4: Die Ausgabe von Listing 2.

Applets, Flash-Animationen und dergleichen. Solche Elemente werdenin HTML in Form einer Referenz auf eine entsprechende Datenquellenotiert. Auch ein ausführbarer Verweis zu einer anderen eigenen oderfremden Web-Seite ist nur ausführbar, wenn er sein Verweisziel kor-rekt und genau benennt. Für all diese Zwecke wird das Referenzierenmit Pfaden in HTML benötigt.Jede Datei im Internet hat eine weltweit eindeutige Adresse, den URI(Uniform Resource Identifier). Das ist eine vollständige Webadresse wie

http://www.fh-swf.de/bilder/logo.gif

Ähnlich wie bei einer Postadresse ein Haus über die Straße in einer PLZadressiert wird, wird in einem URI ein Rechner www in der „Domäne“fh-swf im Land de angesprochen. Auf dem Rechner gibt es ein Verzeich-nis /bilder, in dem sich die Datei logo.gif befindet. Das ist ein absolu-ter Pfad. Ein Pfad ist üblicherweise schreibungssensitiv (case sensitive),/Pfad verweist also auf etwas anderes als /pfad. Das Ende einer Hierar-chiestufe – sei es der Rechner oder ein Verzeichnis – wird stets mit ei-nem Slash / gekennzeichnet. (Beachten Sie: die DOS-Notation mit demBackslash \ funktioniert nicht im Internet!).Im Gegensatz dazu gibt es relative Pfade, die den Ort einer Datei relativzum aktuellen Dokument angeben. Hierbei gibt es die beiden Notatio-nen

./Verzeichnispfad oder ../Verzeichnispfad

Ein einzelner Punkt vor dem Verzeichnispfad (der zu einer Datei –manchmal auch nur zu einem Unterverzeichnis – führt) besagt, dassder Startpunkt sich im Verzeichnis des aktuellen Dokuments befindet.Zwei Punkte bedeuten, dass man zum Startpunkt des Verzeichnispfa-des vom aktuellen Dokument eine Verzeichnisstufe höher und von dortden angegebenen Verzeichnispfad entlang gehen muss.Im Beispiel 2 sind die beiden Adressen

http://www.fh-swf.de und http://www3.fh-swf.de/bilder/logo.gif

12

1.4 Pfade und Hyperlinks

als zwei absolute Pfade angegeben. Der erste zeigt nur auf das Haupt-verzeichnis des Rechners www.fh-swf.de, der zweite auf die Dateilogo.gif im Verzeichnis /bilder im Hauptverzeichnis. Das Hauptver-zeichnis eines Rechners ist üblicherweise das Verzeichnis htdocs.Demgegenüber ist ../programme/auszeichnungen.html ein relativer Pfad,der auf die Datei auszeichnungen.html verweist, die sich neben dem Ver-zeichnis des aktuellen Dokuments befindet. Würde sich die Datei imgleichen Verzeichnis befinden, würde man schreiben ./auszeichnun-

gen.html.

1.4.2 Hyperlinks

Hyperlinks, also anklickbare Verweise auf andere Dateien, werden inHTML mit dem <a>-Element (anchor = Anker) erstellt. Der Start-Tagmuss zwingend das Attribut href besitzen, das den Pfad zu der verlink-ten Datei als Wert erhält. Innerhalb der beiden Tags <a> und </a> befin-det sich der Text (oder auch das Bild), der markiert erscheint und denman anklicken kann, um den Link auszuführen. Der Pfad als Wert deshref-Attributs kann absolut oder relativ zum aktuellen Dokument sein,wie im Beispiel:

<a href="http://www.fh-swf.de">FH Südwestfalen</a>

oder

<a href="../programme/auszeichnungen.html">HTML-Dokument</a>

Bei dem ersten Link ist noch anzumerken, dass der Pfad ja gar nicht aufeine Datei verweist, sondern nur auf das Hauptverzeichnis. Wieso wirddann trotzdem eine Webseite angezeigt? Allgemein gibt der Webserverden Inhalt der Datei index.html an den Browser. Falls sich keine Dateimit diesem Namen in dem verlinkten Verzeichnis befindet, wird auchtatsächlich keine Webseite angezeigt! (Je nach Einstellung des Webser-vers sieht man dann tatsächlich nichts oder eine Liste aller Dateien desVerzeichnisses, die man dann einzeln anklicken kann.) Wenn sich eineDatei namens index.html in dem Verzeichnis befindet, sind daher diedrei folgenden Pfade äquivalent:

http://www.fh-swf.de = http://www.fh-swf.de/ =http://www.fh-swf.de/index.html

1.4.3 Bilder

Ein weiterer Grund für den bemerkenswerten Erfolg des Internets warneben Hyperlinks die Möglichkeit, Informationen grafisch darzustellen.Grundprinzip ist hierbei, dass ein Bild von dem Browser exakt wie einWort eines Textes verarbeitet wird. Man kann Bilder also in einen lau-fenden Fließtext setzen (auch wenn das selten so verwendet wird). Je-

13

1 HTML

des einzelne Bild wird dabei im Browser durch einen eigenen Prozessgeladen, d.h. mehrere Bilder werden parallel geladen.

Benötigt wird dazu im HTML-Code das <img>-Element, das zwingenddas Attribut src (source = Quelle)2 enthalten muss, dessen Wert derPfad zu dem gewünschten Bild ist, genau wie für das href-Attribut beimHyperlink. Ähnlich wie der Zeilenumbruch <br/> ist auch das <img>-Element leer, besteht also aus nur einem Tag.

Gemäß XML ist ebenso das Attribut alt erforderlich, dass das anzuzei-gende Bild kurz beschreibt. Dieser Text wird angezeigt, wenn das Bildnicht dargestellt werden kann. Ein „minimales“ <img>-Tag hat also diefolgende Gestalt,

<img src="http://www.fh-swf.de/bilder/logo.png" alt="Logo FH"/>

Optional sind die Attribute widthund height für die Breite und Höhe desBildes in Pixel, sowie border für die Dicke des Rahmens. Legt man nureines der beiden Attribute width oder height fest, so wird die andereGröße proportional errechnet; werden beide weg gelassen, so wird dasBild in Originalgröße angezeigt. Legt man beide fest, so wird das Bildentsprechend verzerrt.

Man sollte bei Bildern ein webfähiges Bildformat verwenden, das vonallen Browsern dargestellt werden kann. Je nach Bildart3 sind dies dieFormate JPG, GIF und PNG. Verwenden Sie insbesondere keine BMP-Dateien.

1.5 Tabellen

Tabellen erlauben eine sehr übersichtliche Darstellung von Datenoder Information. Sie spielen daher insbesondere für die Präsen-tation von Daten aus Datenbanken eine wichtige Rolle. Da es inHTML möglich ist, Tabellen ohne Gitterlinien („blinde Tabellen“) zuerstellen, haben sich Tabellen auch als Gestaltungsmittel für Web-seiten etabliert. Aus Gründen der Barrierefreiheit, also der Anforde-rung an Internetauftritte, die Information auch für behinderte Men-schen, insbesondere Blinde, Sehbehinderte oder Farbenblinde, zugäng-lich zu halten, ist dies jedoch mit Bedacht zu tun. Empfehlungen zurBarrierefreiheit (Web Content Accessability) finden Sie unter http:

//www.w3.org/TR/WAI-WEBCONTENT-TECHS/.

2 Interessanterweise ist ein häufig gemachter Fehler, dass man das Attribut scr

nennt, was die unangenehme Folge hat, dass der Browser das Bild nicht anzeigt (undnatürlich auch sonst keine Fehlermeldung ausgibt); für diesen Fehler scheint es einer-seits die Erklärung zu geben, dass man zu schnell tippt und den Dreher reinbekommt,oder dass man intuitiv bei Bildern an Screen denkt und so auf ,scr’ kommt. Daher: Esheißt src, von Source, Source, Source!

3 Grob gesagt eignet sich JPG für Fotos oder Bilder mit vielen Farb- oder auch Grau-tönen, während PNG und GIF eher für Bilder mit wenigen Farbtönen, z.B. Logos, ver-wendet werden sollten.

14

1.5 Tabellen

1.5.1 Grundproblematik der Darstellung einer Tabelle imBrowser

Eine Tabelle hat eine zweidimensionale Struktur, besitzt also zwei Rich-tungen. Bei Tabellen spricht man üblicherweise von Zeilen (in der Waa-gerechten) und Spalten (in der Senkrechten). Ein einzelner Eintrag, bei-spielsweise die zweite Zeile in der dritten Spalte, heißt Zelle.Wir Menschen lesen Tabellen kontextabhängig. Zunächst überprüfenwir, wofür jede Zeile und Spalte steht, und gehen dann je nach Inter-esse spalten- oder zeilenweise durch die Zellen. So haben wir relativschnell die Information aus einer Tabelle gewonnen.Ein Browser kann solch ein bedeutungsabhängiges Verhalten natürlichnicht durchführen, er versteht sein Handeln ja nicht. Man muss sich al-so auf ein automatisches Vorgehen einigen, mit dem alle Browser eineTabelle interpretieren: er geht zeilenweise durch die Tabelle (Abb. 1.5).Im Umkehrschluss bedeutet das, dass wir in HTML eine Tabelle zeilen-

Abb. 1.5: Eines Browser interpretiert eine Tabelle zeilenweise

weise aufschreiben müssen, unabhängig von der Bedeutung der Zeilenund Spalten.

1.5.2 Struktur einer Tabelle in HTML

Eine Tabelle wird mit dem <table>-Element erzeugt. Das <table>-Element enthält mindestens ein Kindelement <tr> (table row – Tabel-lenzeile), das <tr>-Element wiederum beinhaltet mindestens ein Kin-delement <th> (table head – Tabellenkopf) oder <td> (table data – Ta-bellendaten, Zelle). <th> und <td>-Elemente sind gleichberechtigt, sieunterscheiden sich nur darin, dass <th>-Elemente den Text zentriertund fett darstellen, <td>-Elemente dagegen linksbündig und normal.Der Grundaufbau eines <table>-Elements ist also stets:

<table>

<tr>

<th> ... </th>

...

</tr>

<tr>

<td> ... </td>

...

</tr>

</table>

15

1 HTML

Diese Verschachtelung muss unbedingt eingehalten werden. Die Anzahlder Zeilen ergeben sich aus der Anzahl der <tr>-Elemente, währenddie Spaltenanzahl sich aus der maximalen Anzahl von <td> und <th>-Elementen je Zeile ergibt. Die folgende Beispieltabelle hat also 3 Zeilenmit jeweils 2 Spalten, im Browser wird sie wie in Abb. 1.6 dargestellt.

Listing 3: Tabelle in HTML

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="UTF-8"/>

5 <title>Tabelle</title>

6 </head>

7 <body>

8 <table style="margin:auto; width:500px" border="1">

9 <tr>

10 <th>Nummer</th>

11 <th>Tipp</th>

12 </tr>

13 <tr>

14 <td style="width:200px">Blumentip 1</td>

15 <td>

16 Vergessen Sie nie Ihre Blumen zu gießen!

17 </td>

18 </tr>

19 <tr style="background:#FFC200">

20 <td style="height:50pt">Blumentip 2</td>

21 <td>Nachtschattengewächse im Dunkeln lagern</td>

22 </tr>

23 </table>

24 </body>

25 </html>

Abb. 1.6: Die Ausgabe von Beispiel 3.

Innerhalb des <table>-Tags können verschiedene Attribute zur Forma-tierung gesetzt werden. Drei häufig verwendete Attribute des <table>

16

1.5 Tabellen

wurden im Quellcode bereits angewendet.

• style="width:500px" : Die Tabellenbreite wird fest auf 500 Pixelgesetzt

• border="1" : Die Gitterlinien der Tabelle werden mit 1 Pixel Dickedargestellt. Mit der Anweisung border="0" erhält man somit eineblinde Tabelle, also eine ohne sichtbare Gitterlinien.

Die Standardvorgaben für die Tabelleneinträge sehen wie folgt aus:

• Die Breite der Spalten richtet sich nach der breitesten Tabellen-zelle innerhalb dieser Spalte.

• Die Höhe richtet sich nach der höchsten Tabellenzelle innerhalbdieser Reihe.

• Die Ausrichtung des Zelleninhaltes ist linksbündig und vertikalzellenzentriert.

Entsprechend kann man – allerdings mit gewissen Beschränkungen –auch einzelne Zeilen oder Zellen formatieren, beispielsweise Breite, Hö-he oder Hintergrundfarbe festlegen. Für die Darstellung von Zahlen-spalten wird oft eine rechtsbündige Formatierung benötigt, die man mitCSS wie folgt erreicht:

<td style="text-align:right"> 21,99 &euro;</td>

Weitere Hinweise zur Formatierung von Tabellen mit Hilfe von CSS sie-he

https://css-tricks.com/complete-guide-table-element/

1.5.3 Spaltenformatierung mit colgroup

Mit dem <colgroup>-Element colgroupkönnen die Spalten einer Tabel-le einheitlich formatiert werden. Das Element kann in dem <table>-Element vor dem ersten <tr>-Tag erscheinen und legt mit <col>-Tags

die Formatierungen für die einzelnen Spalten fest.

<table>

<colgroup>

<col style="background-color:red;">

<col style="background-color:yellow;">

...

</colgroup>

<tr>

...

</tr>

</table>

17

1 HTML

Dabei kann mit dem Attribut span die Anzahl der betroffenen aufein-anderfolgenden Spalten angegeben werden, wenn diese gleich zu for-matieren sind. Beispielsweise werden in folgendem Beispiel die zweiteund dritte Spalte gelb gefärbt, die erste rot:

<table>

<colgroup>

<col style="background-color:red">

<col span="2" style="background-color:yellow">

</colgroup>

<tr>

<th>ISBN</th>

<th>Titel</th>

<th>Preis</th>

</tr>

<tr>

<td>987-3-4768-96</td>

<td>My first HTML Table</td>

<td>$53,--</td>

</tr>

</table>

Weitere Informationen siehe http://w3schools.com/tags/tag_

colgroup.asp.

1.6 Formulare

In HTML gibt als Benutzerschnittstelle zur Eingabe von Daten durchden Anwender die so genannten Formulare, das <form>-Element. Umein Eingabeformular wie in Abbildung 1.7 anzeigen zu lassen, mussman in HTML den Quelltext 4 programmieren.

Listing 4: Ein Formular mit den wichtigsten Eingabeelementen

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="UTF-8"/>

5 <title>Formular</title>

6 </head>

7 <body>

8 <h1>Eingabeformular</h1>

9 <form action="http://haegar.fh-swf.de/spiegel.php" method="

GET">

10 <label for="an">Anmeldename:

11 <input type="text" name="anmeldename" id="an" required

placeholder="Name"/>

12 </label>

13 <br/>

18

1.6 Formulare

14 <label for="pwd">Passwort:

15 <input type="password" name="passwort" id="pwd" />

16 </label>

17 <br/>

18 Tel: <input type="tel" id="phone" pattern="[-0-9]+"/>

19 <p>

20 <label><input type="checkbox" name="blume[]" value="Rose"/>

Rose</label>

21 <label>

22 <input type="checkbox" name="blume[]" value="Tulpe"

checked/>Tulpe

23 </label>

24 <label><input type="checkbox" name="blume[]" value="Gerbera

"/>Gerbera</label>

25 <label><input type="checkbox" name="blume[]" value="Lilie"/

> Lilie</label>

26 </p>

27 <p>

28 Farbe:

29 <select name="farbe" size="1">

30 <option value="rot"> rot </option>

31 <option value="gelb" selected> gelb </option>

32 <option value="blau"> blau </option>

33 </select>

34 </p>

35 <fieldset>

36 <legend> Größe </legend>

37 <label><input type="radio" name="groesse" value="k"/>

klein</label>

38 <label><input type="radio" name="groesse" value="m"/>

mittel</label>

39 <label><input type="radio" name="groesse" value="g"

checked/>groß</label>

40 </fieldset>

41 <p>

42 Frist: <input type="date" name="datum"/>

43 Uhrzeit: <input type="time" name="zeit" step="900" value="

12:00"/>

44 </p>

45 Beitrag: <br/>

46 <textarea name="beitrag" rows="9" cols="45">

47 Da steh ich nun, ich armer Tor!

48 und bin so klug als wie zuvor;

49 heiße Magister, heiße Doktor gar,

50 und ziehe schon an die zehen Jahr

51 herauf, herab und quer und krumm,

19

1 HTML

52 meine Schüler an der Nase herum -

53 und sehe, dass wir nichts wissen können!

54 Das will mir schier das Herz verbrennen!

55 </textarea>

56 <hr/>

57 <input type="submit" value="Abschicken"/>

58 <input type="reset" value="zurücksetzen"/>

59 </form>

60 </body>

61 </html>

Die meisten Eingabeelemente werden durch das Element <input> im-plementiert, dessen Attribut type über die Darstellung entscheidet. All-gemein sollte jedes Eingabeelement mit dem Attribut name einen Na-men erhalten, der in dem Formular eindeutig ist. Für die Darstellung

Abb. 1.7: Die Ausgabe des HTML-Formulars aus Beispiel 4.

ist dieser Name zwar nicht wichtig, jedoch werden wir später sehen,dass dieses Attribut für die serverseitige Verarbeitung der Eingabeda-ten notwendig ist.

Der Standardtyp ist type="text" und zeigt ein Textfeld an.

<input type="text" name="abc" value="Vorgabetext"/>

20

1.6 Formulare

Mit dem optionalen Attribut value kann hierbei ein Standardtext alsVorgabe angezeigt werden. Statt eines Wertes kann es auch einen Platz-haltertext beinhalten:

<input type="text" name="abc" placeholder="Platzhaltertext"/>

Er wird in dem Textfeld abgeschwächt angezeigt und verschwindet beider ersten Eingabe. Er wird oft statt eines Textes vor dem Eingabefeldals Eingabehilfe verwendet.Weitere Eingabeelemente sind durch die Typen "checkbox" und "radio"

gegeben, die anklickbare Checkboxen bzw. Radiobuttons darstellen. Zu-sammengehörige Auswahloptionen gehören hierbei zu einer Gruppeund werden mit demselben Namen bezeichnet, erhalten jedoch mitdem Attribut value verschiedene Werte, die nicht mit den zu der jeweili-gen Checkbox bzw. dem Radiobutton angezeigten Text übereinstimmenmüssen. Der Unterschied der beiden Eingabeelemente ist, dass aus ei-ner Gruppe von Radiobuttons nur höchstens ein Button angeklickt wer-den kann, während eine Checkbox eine Mehrfachauswahl ermöglicht.Um bei einer Mehrfachauswahl die korrekte Übertragung (und vor al-lem spätere Verarbeitung) zu ermöglichen, sollte der Name mit einemPaar eckiger Klammern enden:

<input type="checkbox" name="blume[]"/>

So werden die Daten in einem Array, also einer Art Datencontainer,übertragen und können vom Server „durchnummeriert“ werden (Ar-rays werden wir später im Zusammenhang mit PHP behandeln).Um die Bedienerfreundlichkeit zu erhöhen ist übrigens empfohlen, ins-besondere Checkboxen und Radiobuttons jeweils in label-Elementemit dem Attribut for zu umschließen, also beispielsweise:

<label for="klein">

<input type="radio" name="groesse" value="k" id="klein"/>

klein

</label>

Hierbei bezieht sich der Wert des for-Attributs auf die id des umschlos-senen Buttons, hier id="klein". Die Wirkung des <label>-Elements ist,dass der Anwender zur Auswahl nicht unbedingt den Button bzw. dieCheckbox anklicken muss, sondern auch den in dem Element enthalte-nen Text. Man kann das for- und das id-Attribut auch weglassen, dieWirkung bleibt dieselbe.Entsprechend kann man die Bedienbarkeit durch eine Strukturierungder Engabelemente mittels des <fieldset>-Elements erhöhen, die einenRahmen um sie bildet. Mit dem Element legend kann man diesem Rah-men auch einen Namen geben, der in der Umrandung angezeigt wird.Neben den <input>-Tags gibt es noch die Auswahlbox

1 <select name="farbe">

2 <option value="rot">rot</option>

21

1 HTML

3 ...

4 </select>

die mit dem optionalen Attribut size die Anzahl der in dem Sichtfensterangezeigten Optionen vorgibt. Eine Option kann standardmäßig vor-ausgewählt angezeigt werden durch das Attribut selected. Ein länge-rer Text schließlich kann mitttels <textarea> eingegeben werden, des-sen Höhe und Breite durch die Anzahl der Zeilen rows bzw. Spalten cols

festgelegt.Jedes <input>-Element kann als Attribut required erhalten. Damit wirdbewirkt, dass der Browser das Formular nicht abschickt in dem Fall,dass das Eingabeelement nicht ausgefüllt bzw. ausgewählt wurde.

Das action-Attribut und der submit-Button

Wesentlich für die Übertragung der einegegebenen Daten zum Serversind das Attribut action im Formular und der Submit-Button

<input type="submit"/>

Die Inhalte aller sonstigen <input>- und weiteren Eingabeelementemit Namen (!) werden nach Anklicken des submit-Buttons an denURL im action-Attribut abgeschickt. Hier ist dies ein PHP-Programmspiegel.php auf dem Haegar-Server, dass einfach die empfangenen Da-ten in einer Tabelle wieder an den Browser zuücksendet.

1.6.1 Datenübertragung mit GET und POST

Wenn ein Browser eine Seite von einem Server anfordert, so wirddie Kommunikation zwischen Browser und Server über das HTTP-Protokoll abgewickelt. Als Teil der Anfrage und damit auch des Proto-kolls überträgt der Browser eine „Methode“, mit der festgelegt wird, wiedem Server eventuelle Inhalte von Formularfeldern übermittelt wer-den. Standardmäßig ist diese Methode GET, also beispielsweise auch beieinem normalen Aufruf einer HTML-Seite nach einem Klick einen Hy-perlink oder Eingabe eines URI Man kann in mit Hilfe der GET-Methodebeliebige Daten als Attribut-Werte-Paare übermitteln, indem zunächstein Fragezeichen an den URI gehängt wird und die Attribut-Werte-Paare (ohne Leer- und Anführungszeichen) und durch ein Kaufmanns-Und voneinander getrennt werden, beispielsweise:

http://haegar.fh-swf.de/spiegel.php?x=5&y=10.5&art=koordinate

Probieren Sie es aus!Bei der HTML-Programmierung von Formularen legen wir über dasmethod-Attribut des <form>-Tags fest, welche Methode beim Abschickendes Formulars genutzt werden soll. Hier gibt es zwei Möglichkeiten: GETund POST. Bei POST werden die Daten gewissermaßen dem Request an-

22

1.7 Zusammenfassung

gehängt und erscheinen nicht in der URI. Dementsprechend können perPOST übermittelte Daten auch Binärdaten wie z.B. Dateien sein.

1.7 Zusammenfassung

In den zurückliegenden Seiten wurde ein Schnelleinstieg in HTML ge-liefert. Er soll dazu dienen, kurz diejenigen HTML-Elemente vorzustel-len, die wir im Folgenden benötigen werden. Er kann keinen Anspruchauf Vollständigkeit stellen. Insbesondere das schwierige Thema der Ge-staltung von Webseiten, vor allem unter dem Aspekt der Barrierefrei-heit (Fußnote S. ??), kann im Rahmen dieses Skripts nicht vertieft wer-den. Auch können rechtliche Aspekte nicht angesprochen werden, diebei einem Webauftritt, insbesondere mit kommerziellen Absichten, zubeachten sind. Zur Vertiefung sei auf die selfhtml http://de.sefhtml.orgempfohlen.

1.8 Übungsaufgaben

Aufgabe 1.1 (Einrichten eines Webauftritts) Erstellen Sie einen eige-nen Internetauftritt. Verwenden Sie dabei folgende Verzeichnis- undDateistruktur in dem Root-Verzeichnis Ihres Webservers (htdocs beidem frei verfügbaren und weit verbreiteten Serversystem XAMPP,Library/Webserver/Documents bei MacOS X und /var/www/html bei Ubun-tu). In dem Verzeichnis programme können Sie Ihre Programme der kom-menden Übungsaufgaben speichern. Achten Sie bei der NamensgebungIhrer Verzeichnisse und Dateien darauf, dass Sie möglichst nur Klein-buchstaben und – bis auf den Unterstrich (_) – keine Sonderzeichen (ä,ü, é, ß, ...) oder das Leerzeichen verwenden.

+---+

| +---------+

| Ihr Name |

+-------------+

|

| +---+

| | +---------+ +----------+

|----------| grafiken |-----| logo.jpg |

| +-------------+ +----------+

|

| +---+

| | +---------+ +-----------+

|----------| programme |-----| info.html |

| +-------------+ +-----------+

|

| +------------+

+----------| index.html |

+------------+

(a) Nennen Sie Ihre Startseite index.html und erstellen Sie sie als einHTML-Dokument mit kurzem ansprechendem Text.

23

1 HTML

(b) Binden Sie eine beliebige Grafik ein, die Sie in Ihr Verzeichnisgrafiken gespeichert haben (hier: logo.jpg).

(c) Erstellen Sie ein weiteres HTML-Dokument (info.html), in dem kurzdarüber informieren, dass in dem Verzeichnis Ihre künftigen Program-me abrufbar sind. Setzen Sie von der Startseite aus einen Hyperlink aufdiese Datei.

(d) Ergänzen Sie die Datei index.html mit Hilfe der Referenzde.selfhtml.org um folgende Elemente:

• strukturierten Text (mit <br/>, <p>, <h1>, <h2>, . . . );

• einer Liste (<ul>, <li>).

(e) Validieren Sie Ihre HTML-Seiten mit http://validator.w3.org.

Aufgabe 1.2 (Aufgabe: Tabellen) Erstellen Sie die folgenden Tabellen inHTML.

Verwenden Sie dabei das Attribut borderder Tabellenelemente mit demWert 1.

Aufgabe 1.3 (Grundlegendes zu HTML-Formularen) (a) Erstellen Sie einFormular gemäß folgender Abbildung, das nach dem Absenden die Ein-gaben per GET an das PHP-Skript

http://haegar.fh-swf.de/spiegel.php

verschickt.

24

1.8 Übungsaufgaben

(b) Welches Problem ergibt sich bei einer Mehrfachauswahl der Check-boxen?

25

2 Cascading Stylesheets (CSS)

2 Cascading Stylesheets (CSS)

Cascading Stylesheets (deutsch: „geschachtelte Formatvorlagen“) die-nen dazu, das Design und das Layout von HTML-Seiten getrennt vondem eigentlichen Inhalt zu programmieren. Das Design legt hierbei dieÄsthetik einer Seite fest und ist häufig für einen vollständigen Webauf-tritt gültig, also „global“. Typischerweise bestimmt das Design die Farb-gebung von Haupttext, Überschriften und Hintergrund. Das Layout ei-ner Seite bezieht sich auf die Anordnung von Elementen, bestimmt alsobeispielsweise den Ort der Navigation.Dazu werden in CSS sogenannte CSS-Regeln (CSS rules) verwendet, dieAttribut-Wert-Paare sind und gemäß der Syntax

eigenschaft1: wert1;

eigenschaft2: wert2;

aufgebaut sind. Die Formateigenschaften sind hierbei vorgegeben, einegute Übersicht findet man im Wiki von selfhtml.org:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften

oder auf css-tricks:

https://css-tricks.com/almanac/

Die genaue Verknüpfung von CSS-Regeln mit den Inhalten eines HTML-Dokuments hängt von der Art ihrer Einbindung ab, von denen es dreigibt.

2.1 Einbindung

CSS-Anweisungen müssen in ein HTML-Dokument eingebunden wer-den. Man unterscheidet drei Formen der Einbindung von CSS-Quelltextin ein HTML-Dokument:

• Inline: Bestehende HTML-Elemente werden um ein Attribut na-mens style erweitert, das CSS-Regeln für dieses Element ent-hält. Die Inline-Einbindung eignet sich für individuelle Adhoc-Formatierungen.

• Embedded: CSS-Regeln werden im <head>-Bereich eines HTML-Dokuments definiert. Diese Einbindungsart eignet sich für gene-relle CSS-Regeln, die sich auf das gesamte Dokument beziehen.

• Extern: CSS-Regeln werden in einer externen Datei definiert undim <head>-Element als Link verknüpft. Diese Form der Einbin-dung eignet sich für generelle CSS-Regeln, die sich auf alle Doku-mete des gesamten Webauftritts beziehen sollen.

Beispiel 2.1 Beispiele für die Arten der Einbindung von CSS-Anweisungen in ein HTML-Dokument.(a) Inline

26

2.2 Verknüpfung der HTML-Elemente und der CSS-Regeln

<h1 style="color:red;">FH SWF</h1>

Das Style-Attribut betrifft nur das Element, in dem es definiert wird.(b) Eingebettet

<head>

<title>A title</title>

<style>

h1 {

color: red;

}

</style>

</head>

<body>

...

</body>

Die CSS-Anweisungen gelten dann für das gesamte Dokument. Mankann das <style>-Element auch um das Attribut type="text/css" ergän-zen, es ist jedoch für HTML5 (<!DOCTYPE html>) nicht mehr notwendig.(c) Externe Datei, z.B.:

<head>

<title>A title</title>

<link rel="stylesheet" href="./fhswf.css">

</head>

mit der Datei fhswf.css im selben Verzeichnis:

h1 {

color:red;

}

Die CSS-Anweisungen können dann in mehreren verschiedenen HTML-Dokumenten verwendet werden. �

2.2 Verknüpfung der HTML-Elemente und der CSS-Regeln

Wie erfolgt nun genau die Verknüpfung zwischen den zu formatie-renden HTML-Elementen und den definierten CSS-Regeln? Bei Inline-Styles ist nur das HTML-Element verknüpft, dessen <style>-Attribut esbelegt. Eingebettete und externe Definitionen müssen mit Selektorenarbeiten. Ein Selektor (oder einer Liste mehrerer durch Kommas ge-trennter Selektoren) bildet hierbei die Auswahlbedingung für diejeni-gen Elemente des HTMl-Dokuments, für das die in geschweiften Klam-mern eingeschlossenen CSS-Regeln gelten sollen:

/* Kommentare wie in C, Java, PHP, ...*/

selektor1, selektor2 {

eigenschaftA: wertA;

eigenschaftB: wertB;

27

2 Cascading Stylesheets (CSS)

}

Kommentare werden hierbei von /*...*/umschlossen. Das letzte Semi-kolon vor der schließenden geschweiften Klammer kann weggelassenwerden.Genaugenommen wird über Selektoren eine Menge von Elementen an-hand von Mustern identifiziert. Wichtige Selektoren sind die folgenden:

• Ein Typselektor: wählt Elemente abhängig von einem angegebe-nen HTML-Elementtyp aus, also z.B. <p> (allerdings ohne die spit-zen Klammern!).

• Ein Klassenselektor beginnt mit einem Punkt und seinem Na-men dahinter (.meineKlasse) und wählt diejenigen Elemente desHTML-Dokuments aus, deren Attribut class diesen spezifiziertenWert haben, also beispielsweise

<p class="meineKlasse"> ... </p>

• Ein ID-Selektor beginnt mit einem Doppelkreuz und wählt das(eindeutige) Element eines Dokuments aus, das den Wert des ID-Attributes hat.

Abb. 2.8: Funktionsweise eines Klassenselektors und der Begrenzungsregeln in CSS.

2.3 Die Kaskadierung geschachtelter Regeln

Aufgrund der verschiedenen Einbindungsmöglichkeiten und der Ver-schachtelungen von formatierten HTML-Elementen können mehrereCSS-Regeln zur selben Formateigenschaft in einem bestimmten HTML-Element vorhanden sein. CSS verspricht durch das „C“ in seinem Na-men eine Kaskadierung von Formatanweisungen. Wie genau sieht dieseKaskadierung der Regeln aus? Welcher Stil wird denn nun angewendetbzw. welche Farbe hat der Text in der Darstellung? Die Kaskadierung in

28

2.4 Media Queries

CSS richtet sich hauptsächlich nach der direkten Verarbeitungsreihen-folge des Browsers, also nach den folgenden Prioritäten:

1. Die CSS-Regel des innersten formatierten HTML-Elements hat diehöchste Priorität.

2. Die Priorität hängt dann ab von der Einbindungsart der CSS-Regel,

inline > embedded > extern.

(Also „inline“ gewinnt immer!)

3. Die Priorität hängt bei eingebetteten oder der externen Einbin-dung ab vom Selektor, gemäß

ID-Selektor > Klassenselektor > Typselektor.

Abb. 2.9: Selektoren in CSS. Welche Farbe hat der Text jeweils?

Diese Prioritätenregeln („Spezifitäten“) können explizit außer Kraft ge-setzt werden, und zwar mit den !important-Anweisungen, siehe http:

//www.w3.org/TR/CSS2/cascade.html#specifity.

2.4 Media Queries

Webseiten müssen auf mobile Endgeräte reagieren („responsive web-design“). In der Version 3 bietet CSS hierfür die sogenannten Media Que-ries an,

http://www.w3.org/TR/#tr_CSS.

Sie ermöglichen die Erkennung verschiedenere Geräte und Geräteklas-sen anhand von deren Auflösung und Orientierung.

29

2 Cascading Stylesheets (CSS)

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <style type="text/css">

5 @media (max-width: 480px) {

6 table {

7 display:none;

8 }

9 }

10 </style>

11 </head>

12 <body>

13 <table>

14 <tr>

15 <td>1</td>

16 <td>2</td>

17 </tr>

18 </table>

19 </body>

20 </html>

Hierbei leitet @media ein Media Query ein, das in Alltagssprache ausfor-muliert etwa lauten würde: „Blende auf Geräten mit einer maximalenAuflösung von 480 Pixeln alle Elemente vom Typ table aus!“

2.5 Weitere Informationen und Quellen

• http://www.w3.org/standards/techs/css#w3c_all – Die aktuellenStandards, formal und trocken; wenig Beispiele

• http://wiki.selfhtml.org/wiki/CSS – deutschsprachige Erklä-rungen und gute Beispiele

• https://developer.mozilla.org/en-US/docs/Web/CSS – englisch-sprachige Beispiele und Tutorien (teilweise auf Deutsch über-setzt)

• https://css-tricks.com/snippets/css/ – viele Beispiele, auchausgefallene

2.6 Übungsaufgaben

Aufgabe 2.1 (CSS-Regeln) (a) Schreiben Sie eine CSS-Regel, die alle h1-Attribute auf einer HTML-Seite unterstreicht. Welche Art der CSS-Einbindung (inline, embedded, extern) bietet sich hierfür an? WelcheArt der Einbindung eignet sich hierfür besonders schlecht?

(b) Schreiben Sie eine CSS-Regel, die alle Bilder auf einer Webseite auf

30

2.6 Übungsaufgaben

eine einheitliche Größe bringt und mit einer Umrandung verziert. Ver-wenden Sie eine eingebettete (embedded) Definition.

Aufgabe 2.2 (Formatierte Liste) Sie wollen eine Auflistung mit Pros undContras darstellen. Listenelemente, die als „Pro“ gekennzeichnet sind,sollen grün dargestellt werden, „Contra“-Einträge rot. ImplementierenSie das geforderte Verhalten möglichst effizient mit CSS. Definieren siedie CSS-Regeln in einer externen Datei.

Aufgabe 2.3 (Formatierung einzelner HTML-Elemente) Ihr Vorgesetzterkommt mit der Bitte auf Sie zu, die Homepage des Unternehmens umdas unten angezeigte Element zu ergänzen. Das Element kommt genauein einziges Mal auf der Webseite vor.

Wie kann eine entsprechende CSS-Regel lauten?

Aufgabe 2.4 (Media Queries) Erstellen Sie eine Webseite, deren Hinter-grundfarbe auf Geräten mit einer Auflösung, die kleiner als 800px inder Breite ist, wechselt. Nutzen Sie hierzu Media Queries.

Aufgabe 2.5 (Syntax) Gegeben ist folgende externe CSS-Datei:

1 body {

2 color:yellow;

3 }

4 #test_id {

5 color:green;

6 }

7 p {

8 color:red;

9 }

10 .test_class {

11 color:blue;

12 }

und folgender HTML-Quellcode

<p class="test_class">1. inline styles</p>

<p style="color:purple;">2. id selectors</p>

3. pseudo classes

<p>4. attribute selectors</p>

<p id="test_id">5. class selectors</p>

<p class="test_class" id="test_id" style="color:purple;">6.

type selectors</p>

31

2 Cascading Stylesheets (CSS)

a) In welchen Farben werden die einzelnen Textzeilen angezeigt? Ver-suchen Sie die Lösung zunächst ohne Zuhilfenahme des Computers zuermitteln.

b) Was passiert, wenn Sie die HTML-Datei um folgenden eingebettetenCSS-Code ergänzen?

<style>

p {

color:DarkOrange;

font-weight: bold;

}

</style>

Aufgabe 2.6 (Formatierte Tabellen, Version 2.0) Erstellen Sie die folgen-den Tabellen in HTML, so dass die Warnmeldungen nach Aufruf vonhttp://validator.w3.org Ihrer Lösung der Aufgabe 1.2 nicht mehr er-scheinen.

Weitere Hinweise: http://stackoverflow.com/questions/9402856/.

Aufgabe 2.7 (Steckbrief als Tabelle) Erstellen Sie eine HTML-Datei wieunten dargestellt.

32

2.6 Übungsaufgaben

Vergößern Sie dabei das Bild so, dass jede der links anliegenden Ta-bellenzellen mehr als eine Zeilenhöhe hoch sind. Formatieren Sie al-les über CSS, also Tabellenbegrenzungen, Textausrichtungen, Schrift-größen, . . .

33

3 Formate zum Datenaustausch

3 Formate zum Datenaustausch

Das World Wide Web Consortium [W3C] ist ein 1994 gegründetes Gre-mium zur Standardisierung von Web-Techniken. Ein solcher durch dasW3C festgelegter Standard zur Definition und zum allgemeinen Daten-austausch ist XML. Es ist gewissermaßen eine Obermenge zu HTML,oder anders ausgedrückt: HTML ist eine spezielle Instanz von XML. Ob-wohl XML seit den 2000er Jahren sich in seiner Allgemeingültigkeitzu einem weitverbreitetem Format zum textbasierten Datenaustauschentwickelt hat, gibt es andere Formate, die sich erfolgreich etablierenkonnten. Die wichtigsten darunter sind JSON als ein weiteres textba-siertes Format, aber auch binäre Formate wie BSON oder CBOR.

3.1 XML

XML ist ein Akronym für eXtensible Markup Language, also eine er-weiterbare Auszeichnungssprache.4 XML ist eine Metasprache, d.h. eslassen sich mit XML wiederum Sprachen für bestimmte spezielle Zwe-cke definieren [1, S. 9], beispielsweise XHTML (eine „strenge Variante“von HTML). Obwohl XML in 1998 zunächst nur für elektronische Ver-öffentlichungen von Dokumenten konzipiert war, etablierte es sich zu-nehmend auch als allgemeines Datenaustauschformat. Die Sprachspe-zifikationen werden vom World Wide Web Consortium [W3C] festge-legt.

3.1.1 Die Idee

Bevor wir auf die Spezifikationen genauer eingehen, ist es hilfreich, sichdie grundlegende Idee von XML zu verdeutlichen. Da XML mit dem An-spruch entwickelt wurde, eine Rahmensprache zur Speicherung undVeröffentlichung von Dokumenten zu sein, muss zunächst einmal dieFrage beantwortet werden: Woraus besteht eigentlich ein Dokument?Was muss demnach alles gespeichert werden?Ein allgemeines Dokument kann beispielsweise ein Formular, ein Ver-trag, ein Brief, eine Zeitung oder ein Buch sein. Ein Dokument besitztimmer einen Inhalt, beispielsweise als Text oder als Bilder, eine innereStruktur, wie Fließtexte, Paragraphen, Kapitel, und eine konkrete Formder Darstellung, z.B. Formatierungen, Wahl des Mediums wie Papieroder Karton. Diese drei Strukturbausteine sind in Abb. 3.10 links illus-triert. Entsprechend trennt XML als Technologie prinzipiell den Inhalt,die Form und die Struktur eines Dokuments. Hierbei wird das konkre-te Dokument mit seinem Inhalt als ein XML-Dokument gespeichert, die

4 Eine Auszeichnungssprache ist eine formale Sprache, die Teile eines Textes (meistASCII oder Unicode) durch Markierungen beschreibt, so dass sie auf bestimmte Weisedargestellt werden können. Beispiele für Auszeichnungssprachen sind HTML, LaTeXoder Wikitext (der bei Wikipedia verwendet wird).

34

3.1 XML

Abb. 3.10: Die logischen Bestandteile eines Dokuments und das Prinzip von XML.

Struktur in einer XML-Schema-Datei (XSD, früher oft auch in einer DTD)und die Art der Darstellung in einem XSL-Programm, das die Formatie-rungen konkret darstellt (z.B. ein Browser, der XHTML-Dokumente imFenster anzeigt), oder ein XSLT-Programm, das das XML-Dokument inein spezielles Format (z.B. PDF) umformt.

Beispiel 3.1 Ein Beispiel für eine XML-Sprache ist XHTML, eine Art„strenges HTML“, nämlich HTML gemäß den noch zu nennenendenXML-Regeln. (Historisch entstand HTML vor XML.) Die Struktur XHTMList in einer DTD-Datei, d.h. einer Strukturdatei, festgelegt. Mit die-ser Struktur ist definiert, welche Tags überhaupt und in welchen Ver-schachtelungen erlaubt sind. �

3.1.2 Elemente und Tags, Inhalt und Attribute

Allgemein besteht ein XML-Dokument aus Unicode-Text. Die einzigenallgemein in XML reservierten Zeichen mit bestimmter Bedeutung sinddie spitzen Klammern, das Kaufmanns-Und (ampersand), das Semiko-lon, das Gleichheitszeichen, die Anführungszeichen oben und der Apo-stroph:

Zeichen < > & ; = " ’

Unicode &#x3C; &#x3E; &#x26; &#x3B; &#x3D; &#x22; &#x27;XML-Entität &lt; &gt; &amp; &#x3B; &#x3D; &quot; &apos;

(3.1)

Allerdings haben diese Zeichen nur in bestimmten Kombinationen ei-ne Bedeutung, beispielsweise hat das Semikolon nur nach einem Kauf-manns-Und Auswirkungen, oder das Gleichheitszeichen und die An-führungszeichen nur innerhalb von spitzen Klammern. Die ausführli-chen Syntaxregeln für die Grundbausteine finden Sie zum Beispiel in[4, S. 12].Die Bausteine von XML-Dokumenten sind Elemente. Sie werden vonTags (Auszeichnungen) umschlossen. Tags tauchen also stets paarwei-se auf, nämlich als Start-Tag und als Ende-Tag. Man schreibt dabei dasStart-Tag, indem man den Namen des Elements in spitzen Klammernschreibt, und das Ende-Tag zusätzlich mit einem Schrägstrich (slash)versieht, also etwa

35

3 Formate zum Datenaustausch

<name> . . .</name>

Das Innere „. . . “ des Elements zwischen den Tags kann einen beliebigenUnicode-Text, den Inhalt des Elements, oder wiederum Elemente ent-halten.Falls ein Element kein Kindelement und keinen Inhalt besitzt, heißt esleer und kann kurz geschrieben werden als <name/>, d.h.

<name/> = <name></name>.

Ein Element kann mehrere Attribute enthalten. Ein Attribut ist eine be-stimmte Eigenschaft des Elements und kann einen Wert aus einer vor-gegebenen Menge annehmen. Es wird in das Start-Tag des Elements ge-schrieben und sein Wert nach einem Gleichheitszeichen dahinter in An-führungszeichen:

<name attribut="wert"> . . . </name>

Eine Prozessinstruktion (processing instruction, PI) oder Verarbeitungs-anweisung ist in XML ein spezielles Tag, das mit einem Fragezeichenbeginnt und direkt dahinter einen Namen aufweist,

<?name . . . ?>

siehe [4, S. 28]. Beispielsweise ist <?php ... ?> eine solche Prozessin-struktion, die wir im Zusammenhang mit PHP noch kennen lernen wer-den. Zu Beginn eines XML-Dokuments muss eine spezielle Prozessin-truktion stehen, die XML-Deklaration:

<?xml version="1.0"?>

Sie gibt an, welche XML-Version verwendet wird. Aktuell gibt es nurdie zwei Versionen 1.0 und 1.1, allerdings verstehen die meisten Brow-ser verlässlich nur Version 1.0.5 Daneben kann es ein Attribut encodinggeben, das die Textkodierung festlegt, sowie ein Attribut standalone,das anzeigt, ob das vorliegende Dokument keine externe Strukturdatei(XML Schema, DTD, . . . ) benötigt,

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

Das Attribut für die Version ist obligatorisch, die anderen beiden sindoptional. Sind sie jedoch vorhanden, so ist die Reihenfolge version→encoding→ standalone vorgeschrieben.Ferner können Kommentare an beliebiger Stelle nach dem Vorspann(s.u.) in ein XML-Dokument eingefügt werden, und zwar wie in HTMLmit der Syntax

<!- ... ->

Ein Kommentar ist also genau wie eine Prozessinstruktion nur ein ein-zelner Tag, kein Element. Beides kann und darf daher nicht wie eineleeres Element geschlossen werden.

5 https://www.w3.org/XML/Core/. Der wesentliche Unterschied zwischen den Versio-nen 1.0 und 1.1 ist dass 1.1 stets automatisch die aktuellste Version des Unicode er-laubt.

36

3.1 XML

3.1.3 Wohlgeformte XML-Dokumente

Ein wohlgeformtes (well-formed) XML-Dokument hat folgende Kriterienzu erfüllen:

• Es enthält genau ein Wurzelelement, das Dokumentelement, des-sen Start- und Ende-Tag das gesamte Dokument (bis auf die Pro-zessinstruktion am Anfang) umschließt.

• Jedes Element muss geschlossen werden, auch wenn es leerist. In HTML übliche Konstrukte wie <p> bla <p> blubb ,bla <br> blubb , <input ...> oder <img ...> sind damit kein

wohlgeformtes XML.

• Elemente dürfen nur streng ineinander verschachtelt werden.Das impliziert, dass ein inneres Element erst geschlossen seinmuss, bevor ein äußeres geschlossen werden kann. Auf diese

Abb. 3.11: Die logische Baumstruktur eines XML-Dokuments.

Weise entsteht eine streng logische Baumstruktur ineinander ge-schachtelter Elemente wie in Abb. 3.11.

• Groß- und Kleinschreibung für Element- und Attributnamenmuss streng beachtet werden. <p> ... </P> ist also nicht wohl-geformtes XML.

• Attributwerte müssen in Anführungszeichen stehen.<img border=0/> ist also nicht wohlgeformt.

• Ein Attributname darf nur einmal im Start-Tag vorkommen.

• Die in (3.1) aufgelisteten Sonderzeichen dürfen nicht innerhalbvon Element- oder Attributnamen auftauchen, die Zeichen <, "und & nicht einmal in Attributwerten. Auch in Elementinhaltendarf < gar nicht und & nur in definierten Fällen in Kombinationmit einem Semikolon (also Begrenzer von „Entitäten“) erschei-nen. Man kann beliebige Zeichenfolgen (außer ]]>) in CDATA-Sektionen schreiben (CDATA steht für Character Data):

<![CDATA[ <hier kann <alles & stehen>!]]> (3.2)

37

3 Formate zum Datenaustausch

als Elementinhalt wäre also wohlgeformtes XML. Alternativ kön-nen die Zeichen mit den aus HTML bekannten Entitäten &lt;,&gt;und &amp;dargestellt werden oder durch ihre Unicode-Werte&#x3C;, &#x3E; und &#x26; gemäß Tabelle (3.1).

Die Wohlgeformtheit eines XML-Dokuments können schon Browserwie Firefox und Internet Explorer überprüfen. (Probieren Sie es malaus!) Das XML-Dokument in Beispiel 5 ist wohlgeformtes XML.

Listing 5: Das XML-Dokument Buch.xml

1 <?xml version="1.0" encoding="UTF-8"?>

2 <buch>

3 XML in zwei Schritten.

4 <kapitel>

5 Der erste Schritt

6 <abschnitt ausrichtung="Blocksatz">

7 Am Anfang gab es nur Worte, erst später

8 kam die Struktur.

9 </abschnitt>

10 <abschnitt>

11 Die meisten entspannen bei Musik, nur wenige auch bei

mathematischen

12 Ungleichungen der Form x + 1 &#x3C; x*x.

13 </abschnitt>

14 </kapitel>

15 </buch>

Abb. 3.12: Die Ausgabe von Beispiel 5 im Firefox.

Generell können Element- oder Attributnamen in XML jedes Zei-chen des spezifizierten Zeichensatzes enthalten, bis auf die Sonder-zeichen von (3.1). Wohlgeformt gemäß XML wären also die Elemente<tele.fon nummer="0123"/> oder <e-mail>xyz@abc.de</e-mail> .

38

3.1 XML

3.1.4 Gültige XML-Dokumente

Oft ist ein XML-Dokument schon einsetzbar, wenn es wohlgeformtist, beispielsweise für den Datenaustausch zwischen Datenbanken. DieWohlgeformtheit sagt jedoch noch nichts über die Frage aus: WelcheElemente und Attribute sind überhaupt möglich, und in welcher Kom-bination? Ein XML-Dokument heißt gültig (valid), wenn seine Elementeder in einer (meist separat gespeicherten) Strukturdatei festgelegtenElementenstruktur entsprechen. In einer Strukturdatei wird genau be-schrieben, welche Elemente in der XML-Sprache überhaupt existieren,welche Attribute sie haben können oder müssen, und wie die Elementeverschachtelt sein dürfen.

Für XML gibt es mehrere Struktursprachen. Die älteste ist die DTD Do-cument Type Definition), sie ist die Struktursprache für XHTML. Da DTDselbst allerdings keine XML-Sprache ist, entwickelte das W3C als Alter-native XML Schema. In einer DTD sind die beiden grundlegenden Da-tentypen Strings (in DTD-Syntax: #PCDATA, für parsed character data)und Notationen (<!NOTATION ...>), die nicht verarbeitet (geparst) wer-den sollen und als Referenz auf externe Dateien dienen. Eine detaillier-te Beschreibung von DTD und ihrer Syntax findet man in z.B. [1, S. 30ff]oder [4, S. 38ff].

Namensräume

Das Konzept der Namensräume (name spaces) gibt es in vielen Pro-grammiersprachen. In Java ist es beispielsweise über Pakete implemen-tiert. Generell ist der Sinn von Namensräumen, Datei- oder Objektna-men eindeutig referenzierbar zu halten bei gleichzeitig größtmöglicherFreiheit bei der Namensvergabe eigen erstellter Dateien oder Objekte.So gibt es beipielsweise in Java zwei Klassen Date, die allerdings in ver-schiedenen Paketen liegen (java.util bzw. java.sql).

Ohne Namensräume müsste ein Programmierer also jedesmal über-prüfen, ob der Name, den er vergeben möchte, bereits belegt ist, umgegebenenfalls einen anderen Namen wählen zu müssen. Damit würdenatürlich ein wichtiger Aspekt der Namensvergabe, nämlich „sprechen-de Namen“ zu verwenden, insbesondere für große Systeme erheblichausgehöhlt. Innerhalb eines Namensraums müssen die Namen selbst-verständlich unterschiedlich sein.

Auch in XML gibt es Namensräume. Ein Namensraum in XML ist (meist)ein allgemeiner URI.6 Das spezielle Attribut xmlns spezifiziert eine

6 URI (Uniform Resource Identifier): ein nach dem PrinzipSchema: schemaspezifischer Teil aufgebauter Identifikator einer abstrakten

oder physischen Ressource wie Webseiten, Dateien, Webservices, E-Mail-Empfängern.[RFC3986] Beispielsweise ist http://haegar.fh-swf.de ein URI, oderdoi:10.1002/piuz.200401040. Spezielle URIs sind URL (Unified Resource Locators), alsoInternetquellen. Allerdings wird die Bezeichnung URL von dem W3C als deprecated

39

3 Formate zum Datenaustausch

Namensraum-Deklaration in XML. Es gibt zwei Möglichkeiten, in XMLNamensräume zu definieren: Entweder mit der Standardnamensraum-Deklaration

1 <unternehmen id="4711" xmlns="http://example.org/">

2 <name>XYZ GmbH</name>

3 <telefon>

4 <anlage>Siemens</anlage>

5 <technologie>Voice Over IP</technologie>

6 </telefon>

7 </unternehmen>

für die der Namensraum in allen Unterelementen gilt, oder mit der qua-lifizierten Namensraum-Deklaration,

1 <it:unternehmen id="4711" xmlns:it="http://example.org/">

2 <it:name>XYZ GmbH</it:name>

3 <it:telefon>

4 <it:anlage>Siemens</it:anlage>

5 <it:technologie>Voice Over IP</it:technologie>

6 </it:telefon>

7 </it:unternehmen>

mit einem Präfix (hier: it), durch das in jedem Unterelement gezieltein Namensraum ausgewählt werden kann. Qualifizierte Namensräu-me werden insbesondere dann unabdingbar, wenn in einem XML-Dokument mehrere Namensräume benötigt werden.

XML Schema

XML Schema, oft auch als XSD bezeichnet, stammt ursprünglich von Mi-crosoft und wurde 2001 zum W3C-Standard [XSD]. Im Unterschied zuDTD basiert XML-Schema komplett auf XML und hat wesentlich mehrDatentypen als DTD. Allerdings sind komplexe Strukturen in einer DTDerheblich kürzer beschreibbar.

Beispiel 3.2 Das XML Schema Buch.xsd:

1 <?xml version="1.0" encoding="UTF-8"?>

2 <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

3 targetNamespace="http://example.org/Buch" xmlns="http://

example.org/Buch" >

4

5 <xs:element name="buch" type="buchTyp" />

6

7 <xs:complexType name="buchTyp" mixed="true">

8 <xs:sequence>

9 <xs:element name="kapitel" type="kapitelTyp"

eingestuft [RFC3305, §2.2].

40

3.1 XML

10 minOccurs="0" maxOccurs="unbounded" />

11 </xs:sequence>

12 </xs:complexType>

13

14 <xs:complexType name="kapitelTyp" mixed="true">

15 <xs:sequence>

16 <xs:element name="abschnitt" type="abschnittTyp"

17 minOccurs="0" maxOccurs="unbounded" />

18 </xs:sequence>

19 </xs:complexType>

20

21 <xs:complexType name="abschnittTyp" mixed="true">

22 <xs:attribute name="ausrichtung">

23 <xs:simpleType>

24 <xs:restriction base="xs:string">

25 <xs:enumeration value="Blocksatz"/>

26 <xs:enumeration value="linksbündig"/>

27 <xs:enumeration value="zentriert"/>

28 </xs:restriction>

29 </xs:simpleType>

30 </xs:attribute>

31 </xs:complexType>

32

33 </xs:schema>

und ein entsprechendes XML-Dokument:

1 <?xml version="1.0" encoding="UTF-8"?>

2 <p:buch xmlns:p="http://www.example.org/Buch"

3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

4 xsi:schemaLocation="http://www.example.org/Buch Buch.xsd ">

5 XML in zwei Schritten.

6 <kapitel>

7 Der erste Schritt

8 <abschnitt ausrichtung="Blocksatz">

9 Anfang gab es nur Worte, erst später

10 kam die Struktur.

11 </abschnitt>

12 <abschnitt>

13 Die meisten entspannen bei Musik, nur wenige auch bei

mathematischen

14 Ungleichungen der Form x + 1 &#x3C; x*x.

15 </abschnitt>

16 </kapitel>

17 </p:buch>

Die Verschachtelung der Elemente des XML-Dokuments ist in demXML-Schema vordefiniert. �

41

3 Formate zum Datenaustausch

Ein XML-Schema besteht aus einem schema-Element als Wurzel, mit ei-nem fest vorgegebenem Namensraum (im Beispiel mit xs bezeichnet).Es enthält im Wesentlichen die Elemente element, die wiederum alsobligatorisches Attribut name besitzen. Mit diesen Elementen definiertman genau die Elemente, die in einem XML-Dokument erlaubt sind.Jedes Element muss von einem angegebenen Datentyp sein. Diesen Da-tentyp kann man anonym direkt anlegen, indem man einfach die bein-halteten Elemente als Kindelemente einbaut, oder aber, indem man dieDatentypen als Elemente definiert. Es gibt eine ganze Reihe elementa-rer Datentypen in XML-Schema, die wichtigsten sind:

• boolean mit den mögliche Werten "true" (oder "1"), und "false"

(oder "0");

• double gemäß IEEE 754;

• hexBinary für binäre Daten mit Wörtern aus den Zeichen 0–9, A–F,a–f;

• int für Ganzzahlwerte mit 4 Byte;

• integer für beliebige ganze Zahlen (ohne Speicherbegrenzung);

• string für alle Unicode-Wörter ohne die Zeichen <, > und &.

Eine vollständige Liste aller in XML-Schema vorgesehenen Datentypenbefindet sich in [4, S. 91ff].Daneben kann man mit XML-Schema komplexe Datentypen definieren,nämlich durch das Element complexType. Es beinhaltet weitere Elemen-te, allerdings benötigt es als direktes Kindelement (u.a.) choice (für einebeliebige Reihenfolge der umschlossenen Elemente) oder sequence (füreine durch die Reihenfolge ihres Auftretens festgelegte Reihenfolge derumschlossenen Elemente). Ein komplexer Typ, der neben inneren Ele-menten auch Text als Inhalt enthalten kann, muss das Attribut mixedmit dem Wert "true" besitzen. Jedes so definierte Element muss genaueinmal im XML-Dokument auftauchen, es sei denn, die beiden AttributeminOccurs and maxOccurs sind mit Werten "0", "1", . . . oder "unbounded"angegeben (voreingestellter Wert jeweils: "1"). Natürlich muss minOc-curs5maxOccurs gelten.Ferner werden die möglichen Attribute eines Elements definiert durchdas Element attribute, und zwar innerhalb des betreffenden Elementsals Kindelemente. Es enthält als Attribute zwingend name und optionaluse, das vorbelegt den Wert "false" hat und bei "required" als Attribut imXML-Dolument auftauchen muss. Soll ein Attribut nur bestimmte Werteannehmen, so kann man das durch das Kindelement simpleType, dannrestriction und schließlich enumeration erreichen:

1 <xs:simpleType>

2 <xs:restriction base="xs:string">

3 <xs:enumeration value="Blocksatz"/>

42

3.2 JSON

4 <xs:enumeration value="linksbündig"/>

5 <xs:enumeration value="zentriert"/>

6 </xs:restriction>

7 </xs:simpleType>

Hierbei legt das Attribut base im restriction-Element den Datentyp derGrundmenge fest, und das Attribut value in enumeration definiert je-weils einen Wert der Grundmenge.

Namensräume in XSD.

Der Umgang mit Namensräumen in XSD kann beliebig kompliziert wer-den, insbesondere wenn man nichtqualifizierte Elemente und gleich-zeitig qualifizierte Attribute verwendet. Eine Grundregel, die sich er-fahrungsgemäß bewährt hat, lautet:

Merkregel 1. Arbeitet man mit Namensräumen in einem XML-Schema,so sollte man die Elemente qualifizieren, nicht aber die Attribute.

Einbindung von XSD in ein XML-Dokument

Eine XML-Schema-Datei wird als Instanz in das Wurzelelement einesXML-Dokuments eingebunden.

Validierung eines XML-Schema-Dokuments

Die meisten XML-Editoren haben eingebaute Validierungsmöglichkei-ten, um ein XML-Dokument gegen ein XML-Schema oder eine DTD zuvalidieren. Daneben gibt es jedoch auch einen Online-Validator vomW3C, http://www.w3c.org/2001/03/webdata/xsv/

3.2 JSON

JSON, kurz für JavaScript Object Notation und gesprochen wie der engli-sche Name Jason, ist ein schlankes textbasiertes Format zum Datenaus-tausch zwischen Software-Anwendungen und zum RPC (Remote Proce-dure Call, d.h. Aufruf von Methoden auf anderen Rechnern). Wie XMLverwendet JSON Unicode.Das JSON-Format ist spezifiziert in RFC71597, der offizielle Inter-net Media Type (früher „MIME“) für JSON ist application/json. JSONkennt als Attributnamen Strings (in Anführungszeichen!) und als WerteStrings (in Anführungszeichen), Zahlen und die Konstanten null, trueund false. Diese Elemente können auf zwei Arten als Datenstruktur zu-sammengefasst werden, einerseits als (numerisch indiziertes) Array

["Hallo", 123, null, false, true, "John Doe"]

7 http://tools.ietf.org/html/rfc7159

43

3 Formate zum Datenaustausch

in eckigen Klammern, oder als Attribut-Werte-Paare (assoziatives Ar-ray, Map)

{"key":"Abc", "key2":123, "key3":null, "flag":true}

in geschweiften Klammern.Vornehmlich wird JSON in AJAX-Webapplikationen eingesetzt als Alter-native zu XML, allerdings gibt es eine ganze Reihe von Programmen, dieJSON in Objekte anderer Programmiersprachen wie Java transformie-ren und umgekehrt, vgl. http://json.org, so beispielsweise eine Java-API von Google8 Ein einfaches Beispiel, welches eine Struktur in JSONmit der entsprechenden XML-Struktur vergleicht, ist in Tabelle 3.1 an-gegeben.

Besucher in JSON9 Besucher in XML{

"id": 481048,

"name": "Peter Müller",

"email": "pm@example.com",

"gebuchteKurse": [

5,

21,

22,

23,

40,

44

],

}

<besucher>

<id>481048</id>

<name>Peter Müller</name>

<email>pm@example.com</email>

<gebuchteKurse>5</gebuchteKurse>

<gebuchteKurse>21</gebuchteKurse>

<gebuchteKurse>22</gebuchteKurse>

<gebuchteKurse>23</gebuchteKurse>

<gebuchteKurse>40</gebuchteKurse>

<gebuchteKurse>44</gebuchteKurse>

</besucher>

Tab. 3.1: Beispielstruktur Besucher in JSON und XML

Es ist sofort ersichtlich, dass Dateien in JSON weniger Speicherplatzeinnehmen. Ein wichtiger Unterschied zwischen den beiden FormatenXML und JSON ist ferner, dass XML-Dateien über die Forderung nachGültigkeit eines Dokuments erzwingen kann, dass sie einem festen vor-gegeben Schema genügen müssen. Für bestimmte Anwendungsfälle,z.B. Speicherung strukturierter Daten mit häufigen Suchzugriffen, istdiese Eigenschaft vorteilhaft. Oft sind auch, gerade in der Speicherungvon Massendaten und großen Netz-Communities, dynamische schema-lose Speicherstrukturen gefragt, für die JSON besser geeignet ist.10

3.3 Binäre Austauschformate

Textbasierte Austauschformate wie XML oder JSON haben neben ih-ren Vorteilen der Lesbarkeit und einfachen Erstellbarkeit einen großenNachteil: Sie verbrauchen oft mehr Speicherplatz als ihr eigentlicherInformationsgehalt benötigt. Beispielsweise erfordert der 20-stelligeString

8 https://github.com/google/gson [2015-10-05]9 http://www.heise.de/ix/artikel/2006/01/070/02.shtml [2008-09-15]

10 http://www.codeproject.com/Articles/604720/JSON-vs-XML-Some-hard-numbers-about-verbosity

44

3.3 Binäre Austauschformate

"18446744073709551615"

in UTF-8 kodiert 20 Bytes. Als vorzeichenloser Integer allerdings erfor-dert diese Zahl nur 8 Bytes, denn

18446744073709551615 = 0xffffffffffffffff = 264 – 1 (3.3)

hat in Hexadezimaldarstellung 16 Stellen à 4 bit. Zudem kann ein län-gerer Text durch Datenkompressionen wie ZIP oder RAR beträchtlichspeicherreduziert werden.

Gerade für die Übertragung sehr großer Datenmengen oder für eineneffizienten Datenaustausch zwischen cyberphysikalischen Systemen,d.h. „intelligenten“ Gegenständen mit geringer Rechenleistung wie Uh-ren, Wearables, Sensoren, selbstfahrende Autos, lernende Thermostate,Kühlschränke, usw. sind daher binäre Austauschformate als Alternativesinnvoll. So war insbesondere das Ziel der schnellen Übertragung sehrgroßer Datenmengen – „Big Data“ – der Hauptgrund für die Entwick-lung und den Einsatz solcher Formate bei Google und Facebook (Proto-col Buffers und Apache Thrift). Dagegen wird ganz aktuell die Vernet-zung cyberphysikalischer Systeme das sogenannte „Internet der Dinge“(Internet of Things, IoT) bilden, das wiederum allgemein als die tech-nische Grundlage für die künftige Logistik, Produktion, Gebäude- undVerkehrsinfrastruktur angesehen wird.

3.3.1 BSON

Binary JSON (BSON http://bsonspec.org) wurde für die Speiche-rung JSON-ähnlicher Datenstrukturen (Maps) entwickelt. Inhalte einerBSON-Datei können nachträglich geändert werden, ohne sie komplettneu schreiben zu müssen. Das unterscheidet BSON von anderen bi-nären Austauschformaten. BSON wird in der NoSQL-Datenbank Mon-goDB zur Datenspeicherung verwendet.

Die Inhalte dieses Abschnitts stammen zu einem großen Teil aus [6].

3.3.2 CBOR

Concise Binary Object representation (CBOR) ist ein auf Datenkompakt-heit hin optimiertes Austauschformat und eignet sich daher gut fürAnwendungen im Internet der Dinge. Es ist 2013 im RFC 7049 (http://tools.ietf.org/html/rfc7049) und zielt darauf ab, in langlebigen An-wendungen auf veränderte Anforderungen reagieren zu können. AlsAusgangspunkt diente das JSON-Datenmodell, es werden jedoch wei-tere Datentypen unterstützt. Weitere Informationen sind unter http:

//cbor.io/ verfügbar.

45

3 Formate zum Datenaustausch

3.4 Textbasierte versus binäre Austauschformate

Textbasierte Austauschformate wie XML oder JSON wurden unter an-derem wegen ihrer Lesbarkeit entwickelt und verbreitet. Dennoch gibtes mehrere Gründe anzunehmen, dass künftig vermehrt binäre Aus-tauschformate verwendet werden.

1. Spezialisierte Datentypen: Grundsätzlich gibt es in textbasiertenDatenformaten wie in XML nur einen einzigen Datentyp, denString. In JSON gibt es zusätzlich Zahlen, geerbt von JavaScript.(Wobei JavaScript mit ganzen Zahlen vom Betrag ≤ 253 – 1 ge-nau rechnen kann, also mit 53 Bits < 7 Bytes.11) Da das Parsender Stringdarstellung einer Zahl oder eines Datums stets Rechen-aufwand erfordert und zudem die Konvertierung eines Dezimal-bruchstrings in eine Gleitkommazahl sprachabhängig (Kommaoder Punkt) ist und so zu Problemen beim Datenaustausch zwi-schen Systemen unterschiedlicher Sprachen führen kann, ist derDatenaustausch mit wohldefinierten Datentypen effizienter undschneller und bietet eine verlässlichere Übertragung bei verteil-ten Systemen. Neben dem effizienteren Speicherbedarf von Zah-len wie in oben in (3.3) beschreiebn kann die Effizienz der Über-tragung von Daten durch noch differenziertere Datentypen (16Bit, 32 Bit, 64 Bit) zusätzlich erhöht werden. Insbesondere beibegrenzter Rechenkapazität, wie bei Rechenchips im Internet derDinge, ergeben sich daher durch Formate mit differenzierten Da-tentypen große Vorteile gegenüber textbasierten Formaten.

2. Kommunikation Maschine-zu-Maschine: Ein Argument pro Binär-formate ergibt sich gerade aus dem zentralen Entwurfskriteriumtextbasierter Formate: Die Lesbarkeit einer Textdatei nimmt mitzunehmender Komplexität ab, beispielsweise werden üblicher-weisen XML-Editoren für größere XML-Dateien eingesetzt, diedie Daten übersichtlich darstellen und die Korrektheit der Syn-tax prüfen. Dateien werden eben nicht von Menschen manuellerzeugt und von Menschen gelesen, sondern sind Medium einerMaschine-Maschine-Kommunikation. Maschinen können jedocheffizienter mit Binärdateien umgehen, Textparser und Konvertie-rungsroutinen sind recht rechenintensiv. Der Nachteil der fehlen-den Lesbarkeit kann einfach durch geeignete Editoren gelöst wer-den, die die Daten in geeigneter Form darstellen.

3. Trends aktueller Netzwerkprotokolle: Neue Netzwerkprotokollewie HTTP/2 und CoAP unterstützen binäre Austauschformate.Damit soll insbesondere eine Entwicklung hin zum Internet der

11 Nach [ECMA, §20.1.2.6 & 8] ist die größte in JavaScript darstellbare ganze ZahlNumber.MAX_SAFE_INTEGER = 0x1fffffffffffff = 253 – 1.

46

3.5 Übungsaufgaben

Dinge und zu Web-APIs mit effizienterem Zugriff auf Datenban-ken gefördert werden.

3.5 Übungsaufgaben

Aufgabe 3.1 (XML als Datenbankformat) (a) Erstellen Sie eine XML-Datei,die die folgenden Datensätze der Datenbanktabelle bestellungen dar-stellt.

bestellungennummer bezeichnung anzahl preis4711 CPU 1 50,49777 Mainboard 1 41,951234 Festplatte 2 155,980815 Grafikkarte 1 69,90

Überprüfen Sie Ihre Datei mit dem Validator http:

//www.w3schools.com/xml/xml_validator.asp.

(b) Erstellen Sie eine Datei, die diese Tabelle im JSON-Format wieder-gibt.

Aufgabe 3.2 (SVG) Vervollständigen Sie den XML-Quelltext

http:

//haegar.fh-swf.de/Webtechnologie/Aufgaben/SVG-Grundelemente-0.svg

so dass die folgende Grafik aus den Grundelementen von SVG entsteht:

Ein Tutorial mit Ausprobiermöglichkeiten des SVG-Quelltextes könnenSie unter

http://www.w3schools.com/graphics/svg_intro.asp

finden, unter https://github.com/SVG-Edit/svgedit ist ein Online-Edi-tor verfügbar. nutzen. Ein weiteres Tutorial gibt es unter ist unter http://selfsvg.info/

Aufgabe 3.3 (MathML) MathML ist eine XML-konforme Auszeichnungs-sprache, mit der mathematische Formeln und Ausdrücke darstellbarsind. MathML wird nicht von allen gängigen Browsern interpretiert,aber beispielsweise vom Firefox. Ein MathML-Dokument kann als ei-genständiges Element <math> ... </math> als Text in HTML eingebettet

47

3 Formate zum Datenaustausch

werden, dabei muss allerdings auf die XML-Präambel <?xml ... ?> ver-zichtet werden.Erstellen Sie anhand des Tutorials http://math-it.org/MathML_de.html

folgende Formeln in MathML:

E = mc2

x± = –p2±√

p2

4– q 1 0 tx

0 1 ty

0 0 1

px

py

1

=

px + tx

py + ty

1

(Die beiden letzten Formeln sollen Sie dabei aber nur implementieren,wenn sie mathematisch korrekt sind . . . )

48

4 Lösungen der Aufgaben

Aufgabe 1.1 Die Datei index.html im Verzeichnis devries des Wurzelver-zeichnisses des Webservers:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8"/>

5 <title>Mein erster Webauftritt</title>

6 </head>

7 <body>

8 <img src="./grafiken/logo.jpg" width="200" alt="Logo"/>

9 <h1>Willkommen!</h1>

10 <p>Übersicht:</p>

11 <ul>

12 <li><a href="./programme/info.html">Info zu meinen Programmen</a></li>

13 <li><a href="./programme/">Meine Programme</a></li>

14 <li><a href="http://www.fh-swf.de">FH Südwestfalen</a></li>

15 </ul>

16 </body>

17 </html>

Die Datei info.html im Unterverzeichnis programme:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8"/>

5 <title>Info zu meinen Programmen</title>

6 </head>

7 <body>

8 <img src="../grafiken/logo.jpg" width="200" alt="Logo"/>

9 <h1>Info zu meinen Programmen</h1>

10 <p>

11 In diesem Verzeichnis befinden sich meine Programme.

12 </p>

13 <p>

14 <a href="../index.html">Zur Hauptseite</a>

15 </p>

16 </body>

17 </html>

Aufgabe 1.21 <!DOCTYPE HTML>

2 <html lang="de-DE">

3 <head>

4 <meta charset="UTF-8">

5 <title>Grundlagen der Webtechnologie - Tabellen in HTML</title>

6 </head>

7 <body>

8 <h1>Die Rechnung</h1>

9 <table border="1">

10 <tr><th>Nettopreis</th><td class="zahl">109,25 e</td></tr>11 <tr><th>MWSt (19%)</th><td class="zahl"> 20,76 e</td></tr>12 <tr><th>Gesamtpreis</th><td class="zahl">130,01 &euro;</td></tr>

13 </table>

14 <hr/>

49

4 Lösungen der Aufgaben

15 <h1>Die Aufschlüsselung</h1>

16 <table border="1">

17 <tr><th>Artikel</th><th colspan="2">Preis</th><th>Menge</th></tr>

18 <tr><td>Hammer</td><td>12,50 </td><td>e/Stück</td><td>5 Stück</td></tr>

19 <tr><td>Schrauben</td><td> 2,75 </td><td>e/kg</td><td>17 kg</td></tr>

20 </table>

21 <hr/>

22 <h1>Weitere Angebote</h1>

23 <table border="1">

24 <tr><th>Gruppe</th><th>Artikel</th><th colspan="2">Preis</th></tr>

25 <tr><td rowspan="2">Werkzeug</td><td>Hammer </td><td>12,50 </td><td>e/Stück</td></tr>

26 <tr> <td>Säge </td><td> 2,75 </td><td>e/Stück</td></tr>

27 <tr><td rowspan="3"> Zubehör</td><td>Nägel </td><td> 0,05 </td><td>e/Stück</td></tr>

28 <tr> <td>Schrauben</td><td> 2,75 </td><td>e/kg</td></tr>

29 <tr> <td>Nieten </td><td> 0,95 </td><td>e/Stück</td></tr>

30 </table>

31 <hr/>

32 <a href="mailto:kunde@fh-swf-webshop.de">kunde@fh-swf-webshop.de</a>

33 </body>

34 </html>

Aufgabe 1.3 (a)

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8"/>

5 <title>Formular Erhebungsbogen</title>

6 </head>

7 <body>

8 <form action="http://haegar.fh-swf.de/spiegel.php" method="GET">

9 <input type="text" name="name" placeholder="Name"/><br/>

10 <input type="text" name="strasse" placeholder="Straße"/><br/>

11 <input type="text" name="ort" placeholder="Ort"/><br/>

12 <br/>

13 Alter:

14 <label><input type="radio" name="alter" value="<10"> &lt; 10</label> &nbsp;

15 <label><input type="radio" name="alter" value="10-19"> 10-19</label> &nbsp;

16 <label><input type="radio" name="alter" value="20-29"> 20-29</label> &nbsp;

17 <label><input type="radio" name="alter" value="30-49"> 30-49</label> &nbsp;

18 <label><input type="radio" name="alter" value="50-65"> 50-65</label> &nbsp;

19 <label><input type="radio" name="alter" value=""> &ge; 66</label>

20 <br/>

21 Hobbies:

22 <label>

23 <input type="checkbox" name="hobbies" value="Sport"> Sport

24 </label>

25 &nbsp;

26 <label>

27 <input type="checkbox" name="hobbies" value="Lesen"> Lesen

28 </label>

29 &nbsp;

30 <label>

31 <input type="checkbox" name="hobbies" value="Musik hoeren"> Musik hören

32 </label>

33 &nbsp;

34 <label>

35 <input type="checkbox" name="hobbies" value="Musizieren"> Musizieren

36 </label>

37 &nbsp;

50

38 <label>

39 <input type="checkbox" name="hobbies" value="Malen"> Malen

40 </label>

41 <br/>

42 Jahreszeit:

43 <select name="jahreszeit">

44 <option value="Fruehling">Frühling</option>

45 <option value="Sommer" selected>Sommer</option>

46 <option value="Herbst">Herbst</option>

47 <option value="Winter">Winter</option>

48 </select>

49 <br/>

50 <textarea name="kommentar" rows="10" cols="50"></textarea>

51 <br/>

52 <input type="submit" value="Abschicken"/>

53 </form>

54 </body>

55 </html>

(b) Bei einer Mehrfachauswahl werden nur das letzte der übermitteltenDatenfelder angezeigt. In dem URI der Adresszeile des Browsers kannman jedoch erkennen, dass alle angeklickten Felder auch übertragenwerden, nur alle unter demselben Schlüssel. Eine Lösung wäre es, deneinzelnen Eingaben eigene Namen zu geben, beispielsweise als Arrays:

<input type="checkbox" name="hobbies[0]" value="Sport"> Sport &nbsp;

<input type="checkbox" name="hobbies[1]" value="Lesen"> Lesen &nbsp;

...

Sollen die übermittelten Daten von einem PHP-Skript verarbeitet wer-den, so kann man den Mechanismus der Array-Erzeugung in PHP aus-nutzen und einfach auf die Indexnummerierung verzichten, also leereKlammern [] schreiben.

Aufgabe 2.1 (a) Will man nur die <h1>-Elemente der aktuellen HTML-Seite formatieren, so ist die eingebettete Einbindung ratsam, sollenmehrere Seiten des Internetauftritts formatiert werden, so wäre es dieexterne Einbindung. Da alle <h1>-Elemente zu formatieren sind, ist dieEinbindung inline am wenigsten geeignet.(a)& (b):

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8"/>

5 <title>CSS-Regeln</title>

6 <style>

7 h1 {text-decoration:underline;}

8 img {width:100px;}

9 </style>

10 </head>

11 ...

Aufgabe 2.2 Die Datei pros-cons.css im Verzeichnis stylesheets:

.pro {background:green;}

.con {background:red;}

51

4 Lösungen der Aufgaben

Eine Beispieldatei kauf.html im übergeordneten Verzeichnis könntelauten:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8"/>

5 <title>Kauf: Pros und Cons</title>

6 <link rel="stylesheet" href="./stylesheets/pros-cons.css"/>

7 </head>

8 <body>

9 <ul>

10 <li class="pro">bequem</li>

11 <li class="pro">effektiv</li>

12 <li class="con">teuer</li>

13 </ul>

14 </body>

15 </html>

Aufgabe 2.3

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8"/>

5 <title>Webshop</title>

6 <style>

7 #hinweis {

8 background-color:#DDD;

9 border: 1px solid black;

10 padding: 20px;

11 text-align: center;

12 }

13 </style>

14 </head>

15 <body>

16 <div id="hinweis">

17 <h1>Hinweis</h1>

18 Liebe Kunden, wir möchten Sie darauf hinweisen, dass wir

19 unseren Warenversand zwischen den Jahren einstellen.

20 </div>

21 </body>

22 </html>

Aufgabe 2.4

<style>

body {background-color:green;}

@media (max-width: 800px) {

body {background-color:red;}

}

</style>

Aufgabe 2.5 (a) Die Absätze werden der Reihe nach mit den Textfarbenblau, lila, gelb, rot, grün und lila dargestellt.

52

(b) Der gesamte Text wird fett dargestellt, ansonsten nimmt nur derText im vierten Absatz die Farbe Dunkelorange an.

Aufgabe 2.6

1 <!DOCTYPE HTML>

2 <html lang="de-DE">

3 <head>

4 <meta charset="UTF-8">

5 <title>Internettechnologien - Tabellen in HTML</title>

6 <style type="text/css">

7 table, td, th {border: 1px solid gray;}

8 table {margin: auto;}

9 .zahl {text-align:right;}

10 h1 {text-align:center;}

11 </style>

12 </head>

13 <body>

14 <h1>Die Rechnung</h1>

15 <table>

16 <tr><th>Nettopreis</th><td class="zahl">109,25 e</td></tr>

17 <tr><th>MWSt (19%)</th><td class="zahl"> 20,76 e</td></tr>

18 <tr><th>Gesamtpreis</th><td class="zahl">130,01 &euro;</td></tr>

19 </table>

20 <hr/>

21 <h1>Die Aufschlüsselung</h1>

22 <table>

23 <tr>

24 <th>Artikel</th><th colspan="2">Preis</th><th>Menge</th>

25 </tr>

26 <tr>

27 <td>Hammer</td><td class="zahl">12,50 </td><td>e/Stück</td><td>5 Stück<

/td>

28 </tr>

29 <tr>

30 <td>Schrauben</td><td class="zahl"> 2,75 </td><td>e/kg</td><td>17 kg</

td>

31 </tr>

32 </table>

33 <hr/>

34 <h1>Weitere Angebote</h1>

35 <table>

36 <tr><th>Gruppe</th><th>Artikel</th><th colspan="2">Preis</th></tr>

37 <tr>

38 <td rowspan="2">Werkzeug</td>

39 <td>Hammer </td><td class="zahl">12,50 </td><td>e/Stück</td>

40 </tr>

41 <tr>

42 <td>Säge </td><td class="zahl"> 2,75 </td><td>e/Stück</td></tr>

43 <tr>

44 <td rowspan="3"> Zubehör</td>

45 <td>Nägel </td><td class="zahl"> 0,05 </td><td>e/Stück</td>

46 </tr>

47 <tr>

48 <td>Schrauben</td><td class="zahl"> 2,75 </td><td>e/kg</td>

49 </tr>

50 <tr>

53

4 Lösungen der Aufgaben

51 <td>Nieten </td><td class="zahl"> 0,95 </td><td>e/Stück</td>

52 </tr>

53 </table>

54 <hr/>

55 <a href="mailto:kunde@fh-swf-webshop.de">kunde@fh-swf-webshop.de</a>

56 </body>

57 </html>

Aufgabe 2.71 <!DOCTYPE HTML>

2 <html lang="de-DE">

3 <head>

4 <meta charset="UTF-8">

5 <title>Grundlagen der Webtechnologie - Tabellen in HTML</title>

6 <style>

7 table, th, td {border: 1px solid gray;}

8 th, td {text-align: left; vertical-align: top;}

9 </style>

10 </head>

11 <body>

12 <table>

13 <tr><th colspan="3">Bundeskanzlerin</th></tr>

14 <tr><th>Name</th><td>Merkel</td><td rowspan="5"><img src="./Merkel.jpg"

height="300px" alt="Merkel"/></tr>

15 <tr><th>Vorname</th><td>Angela</td></tr>

16 <tr><th>Straße</th><td>Am Reichstagsufer</td></tr>

17 <tr><th>PLZ </th><td>10000</td></tr>

18 <tr><th>Ort </th><td>Berlin</td></tr>

19 </table>

20 <p style="font-size:x-small;">

21 (Bildquelle: <a href="http://bundeskanzlerin.de/Webs/BKin/DE/AngelaMerkel/

Biografie/bundeskanzlerin-angela-merkel.jpg">

22 http://bundeskanzlerin.de/Webs/BKin/DE/AngelaMerkel/Biografie/

bundeskanzlerin-angela-merkel.jpg)

23 </p>

24 </body>

25 </html>

Aufgabe 3.1 (a)

1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

2 <bestellungen>

3 <bestellung>

4 <nummer>4711</nummer>

5 <bezeichnung>CPU</bezeichnung>

6 <anzahl>1</anzahl>

7 <preis>50,49</preis>

8 </bestellung>

9 <bestellung>

10 <nummer>777</nummer>

11 <bezeichnung>Mainboard</bezeichnung>

12 <anzahl>1</anzahl>

13 <preis>41,95</preis>

14 </bestellung>

15 <bestellung>

16 <nummer>1234</nummer>

54

17 <bezeichnung>Festplatte</bezeichnung>

18 <anzahl>2</anzahl>

19 <preis>155,98</preis>

20 </bestellung>

21 <bestellung>

22 <nummer>0815</nummer>

23 <bezeichnung>Grafikkarte</bezeichnung>

24 <anzahl>1</anzahl>

25 <preis>69,90</preis>

26 </bestellung>

27 </bestellungen>

(b)

1 {

2 "bestellungen": [

3 {

4 "nummer": 4711,

5 "bezeichnung": "CPU",

6 "anzahl": 1,

7 "preis": 50.49

8 },

9 {

10 "nummer": 777,

11 "bezeichnung": "Mainboard",

12 "anzahl": 1,

13 "preis": 41.95

14 },

15 {

16 "nummer": 1234,

17 "bezeichnung": "Festplatte",

18 "anzahl": 2,

19 "preis": 155.98

20 },

21 {

22 "nummer": "0815",

23 "bezeichnung": "Grafikkarte",

24 "anzahl": 1,

25 "preis": 69.90

26 }

27 ]

28 }

Zu beachten ist, dass das Literal 0815 nach der Javascript-Spezifikation[ECMA, App. B.1.1] als LegacyOctalIntegerLiteral eine Oktalzahl dar-stellt, in dem aber ein Literal 8 nicht vorkommen darf.

Aufgabe 3.21 <?xml version="1.0" encoding="UTF-8" standalone="no"?>

2 <svg xmlns:svg="http://www.w3.org/2000/svg"

3 xmlns="http://www.w3.org/2000/svg"

4 version="1.0"

5 width="400"

6 height="160">

7 <title>SVG Grundelemente</title>

8 <defs>

9 <linearGradient id="svg2" x1="0" y1="0" x2="1" y2="1">

10 <stop offset="0" stop-color="#00bf00"/>

11 <stop offset="1" stop-color="#ffff00"/>

12 </linearGradient>

13 </defs>

55

4 Lösungen der Aufgaben

14 <rect x="20" y="20" width="60" height="40" stroke="#204a87" stroke-width="2" fill="none" />

15 <text x="20" y="83">Rechteck</text>

16 <circle cx="120" cy="40" r="20" stroke="#4e9a06" stroke-width="2" fill="none" />

17 <text x="100" y="83">Kreis</text>

18 <ellipse cx="190" cy="40" rx="30" ry="20" stroke="#4e9a06" stroke-width="2" fill="none" />

19 <text x="160" y="83">Ellipse</text>

20 <polygon fill="none" stroke="#c4a000" stroke-width="2" points="240,32 240,48 252,60 270,60 282,48 282,32 270,20

252,20"/>

21 <text x="240" y="83">Polygon</text>

22 <path stroke-width="2" stroke="#a40000" fill="none" d="m305,60c24.08109,12 27.64865,-16 33,-28c11.5946,-28 46.37839,3

46.37839,3"/>

23 <text x="305" y="83">Pfad</text>

2425 <rect x="20" y="100" width="60" height="40" stroke="#204a87" stroke-width="2" fill="#00bfbf" />

26 <circle cx="120" cy="120" r="20" stroke="#4e9a06" stroke-width="2" fill="#73d216" />

27 <ellipse cx="190" cy="120" rx="30" ry="20" stroke="#4e9a06" stroke-width="2" fill="url(#svg2)" />

28 <polygon fill="#edd400" fill-opacity="0.59" stroke="#c4a000" stroke-width="2"

29 points="240,112 240,128 252,140 270,140 282,128 282,112 270,100 252,100"/>

30 <path stroke-width="2" stroke="#a40000" fill-opacity="0.62" fill="#ef2929"

31 d="m305,134c24.08109,12 27.64865,-16 33,-28c11.5946,-28 46.37839,3 46.37839,3"/>

32 </svg>

Aufgabe 3.3

1 <!DOCTYPE html>

2 <head>

3 <meta charset="utf-8"/>

4 <title>MathML</title>

5 </head>

6 <body>

7 <p>

8 Einsteins berühmte Formel der speziellen Relativitätstheorie,

9 <math>

10 <mi>E</mi>

11 <mo>=</mo>

12 <mi>m</mi>

13 <msup>

14 <mi>c</mi>

15 <mn>2</mn>

16 </msup>

17 </math>,

18 ließe sich mit der p-q-Formel nach <i>c</i> umstellen:

19 </p>

20 <p>

21 <math mode="display">

22 <msub>

23 <mi>x</mi>

24 <mo>&pm;</mo>

25 </msub>

26 <mo>=</mo>

27 <mo>-</mo>

28 <mfrac>

29 <mi>p</mi>

30 <mn>2</mn>

31 </mfrac>

32 <mo>&pm;</mo>

33 <msqrt>

34 <mrow>

35 <mfrac>

36 <msup>

37 <mi>p</mi>

38 <mn>2</mn>

39 </msup>

40 <mn>4</mn>

56

41 </mfrac>

42 <mo>-</mo>

43 <mi>q</mi>

44 </mrow>

45 </msqrt>

46 </math>

47 </p>

48 <p>

49 Eine räumliche Verschiebung eines Vektors in der

50 <math>

51 <mo>(</mo><mi>x</mi><mo>,</mo><mi>y</mi><mo>)</mo>

52 </math>-Ebene

53 lässt sich als eine spezielle Matrizenmultiplikation

54 im dreidimensionalen („projektiven“) Raum darstellen:

55 </p>

56 <p>

57 <math mode="display">

58 <mfenced>

59 <mtable>

60 <mtr>

61 <mtd><mn>1</mn></mtd>

62 <mtd><mn>0</mn></mtd>

63 <mtd><msub><mi>t</mi><mi>x</mi></msub></mtd>

64 </mtr>

65 <mtr>

66 <mtd><mn>0</mn></mtd>

67 <mtd><mn>1</mn></mtd>

68 <mtd><msub><mi>t</mi><mi>y</mi></msub></mtd>

69 </mtr>

70 <mtr>

71 <mtd><mn>0</mn></mtd>

72 <mtd><mn>0</mn></mtd>

73 <mtd><mn>1</mn></mtd>

74 </mtr>

75 </mtable>

76 </mfenced>

77 <mo>&middot;</mo>

78 <mfenced>

79 <mtable>

80 <mtr>

81 <mtd><msub><mi>p</mi><mi>x</mi></msub></mtd>

82 </mtr>

83 <mtr>

84 <mtd><msub><mi>p</mi><mi>y</mi></msub></mtd>

85 </mtr>

86 <mtr>

87 <mtd><msub><mi>p</mi><mi>z</mi></msub></mtd>

88 </mtr>

89 </mtable>

90 </mfenced>

91 <mo>=</mo>

92 <mfenced>

93 <mtable>

94 <mtr>

95 <mtd>

96 <msub><mi>p</mi><mi>x</mi></msub>

57

4 Lösungen der Aufgaben

97 <mo>+</mo>

98 <msub><mi>t</mi><mi>x</mi></msub>

99 </mtd>

100 </mtr>

101 <mtr>

102 <mtd>

103 <msub><mi>p</mi><mi>y</mi></msub>

104 <mo>+</mo>

105 <msub><mi>t</mi><mi>y</mi></msub>

106 </mtd>

107 </mtr>

108 <mtr>

109 <mtd><msub><mi>p</mi><mi>z</mi></msub></mtd>

110 </mtr>

111 </mtable>

112 </mfenced>

113 </math>

114 </p>

115 </body>

116 </html>

58

Literatur

Literatur

[1] Hauser, T. : XML-Standards. schnell + kompakt. Frankfurt : entwick-ler.press, 2006

[2] McLuhan, M. : The Gutenberg Galaxy. Toronto : University of Toron-to Press, 1962. – https://books.google.com/books?id=7K7rKIWaXXIC

[3] McLuhan, M. : Understanding Media. The Extensions ofMan. Oxon : Routledge, 1964 (reissued 2001). – https:

//books.google.com/books?id=K4AWBwAAQBAJ

[4] St. Laurent, S. ; Fitzgerald, M. : XML kurz & gut. 3. Köln : O’ReillyVerlag, 2006

[5] Turing, A. M.: ‘On computable numbers, with an ap-plication to the Entscheidungsproblem’. In: Proc. Lon-don Math. Soc. 42 (1936–1937), Nr. 2, S. 230–265. –http://www.turingarchive.org/browse.php/B/12

[6] Wojcieszak, M. : ‘Binäre Austauschformate’. In: Java Magazin 6(2015)

Internetquellen

[ECMA] http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

– ECMAScript Sprachspezifikation

[SHTM] https://selfhtml.org/ – Umfassende deutschsprachige Nach-schlagereferenz zu HTML und CSS, mit vielen Wiki, Forum undvielen Beispielen

[SOF] http://stackoverflow.com/ – Forum für Fragen zu Programmier-sprachen

[W3C] http://www.w3c.org/ – World Wide Web Consortium, Gremiumzur Standardisierung der Web-Techniken; eine deutsche Überset-zung wichtiger Teile dieses Webauftritts findet man unter http:

//www.edition-w3c.de/, auf die auch das Deutsch-ÖsterreichischeBüro W3C.DE/AT http://www.w3c.de/ bzw. http://www.w3c.at/

verlinkt.

[XSD] http://www.w3c.org/TR/xmlschema-0/ – Einfüh-rung in XML Schema, auf deutsch unter http:

//www.edition-w3c.de/TR/2001/REC-xmlschema-0-20010502/

59

Abbildungsverzeichnis

Abbildungsverzeichnis

1.1 Das Internet basiert auf einer Client-Server-Architektur. Der Server isthierbei ein Webserver, z.B. Apache, der Client üblicherweise ein Brow-ser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2 Die logische Baumstruktur eines HTML-Dokuments. . . . . . . . . . . 71.3 Die Ausgabe von Listing 1. . . . . . . . . . . . . . . . . . . . . . . . . . . 81.4 Die Ausgabe von Listing 2. . . . . . . . . . . . . . . . . . . . . . . . . . . 121.5 Eines Browser interpretiert eine Tabelle zeilenweise . . . . . . . . . . 151.6 Die Ausgabe von Beispiel 3. . . . . . . . . . . . . . . . . . . . . . . . . . 161.7 Die Ausgabe des HTML-Formulars aus Beispiel 4. . . . . . . . . . . . . 202.8 Funktionsweise eines Klassenselektors und der Begrenzungsregeln in

CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.9 Selektoren in CSS. Welche Farbe hat der Text jeweils? . . . . . . . . . . 293.10 Die logischen Bestandteile eines Dokuments und das Prinzip von XML. 353.11 Die logische Baumstruktur eines XML-Dokuments. . . . . . . . . . . . 373.12 Die Ausgabe von Beispiel 5 im Firefox. . . . . . . . . . . . . . . . . . . 38

60