====== XHTML ======
Für die Darstellung von Daten wird hier als Beispiel die Erzeugung von Seiten im Internet erläutert. Die Daten werden in XHTML-Dateien gespeichert, während die Formate möglichst vollständig in [[CSS]]-Dateien festgelegt werden.
Somit kann gewährleistet werden, dass
* Inhalte und Formate getrennt voneinander gespeichert werden.
* Inhalte auf nahezu allen Platformen und barrierefrei dargestellt werden.
Der strukturelle Aufbau eines XHTML-Befehls (auch XHTML-tag genannt - sprich: 'tähg') ist grundsätzlich immer gleich. Er besteht aus zwei Teilen:
- Anfangs-tag: Euteneuers-Homepage
Alle, mit Hilfe von XHTML, dargestellten Elemente müssen in einen Absatz eingebettet werden. Der Befehl, der den Beginn eines Absatzes kennzeichnet, lautet
(für paragraph). Das Ende des Absatzes wird mit
gekennzeichnet. Zwischen diesen beiden Befehlen befindet sich der Text und die Bilder, die innerhalb des Absatzes erscheinen sollen. In XHTML **muss** jeder Befehl einen Anfangs- und einen End-tag haben. Beim Absatz macht das auch sofort Sinn, da er einen Anfang und ein Ende hat. Bei einem erzwungenen Zeilenumbruch innerhalb eines Absatzes ist das eher etwas verwunderlich. Der Grund dafür, auch hier den End-tag zu fordern, liegt im konsequenten Aufbau von XHTML mit Hilfe von [[XML]]. Der Befehl für den Zeilenumbruch lautet
Dieser Text steht im Titel des Browserfensters
Überschriften sind selbst Absätze und müssen daher nicht in einen Absatz eingebettet werden.
Hier steht ein Absatz, ein Link, ein Bild, oder irgendwas. Hauptsache, diese Dinge stehen in einem Absatz!
\\ Darin enthalten:\\
* Festlegung als XML-Datei
* Dokumententypbeschreibung: XHTML-Strict
* Die erste Zeile ergibt in ''index.php''-Dateien einen Fehler. Um trotzdem (ohne diese Zeile) mit UTF-8 arbeiten zu können muss die ''meta http-equiv=...''-Zeile eingefügt werden. Sie ist sonst nicht nötig.
* Und schließlich der Aufbau nach dem berühmten 'schwarzer Ritter'-Prinzip - Dank an Monty Python!
* Überschriften
* ...
* Zeilenumbrüche (innerhalb eines Absatzes oder einer Überschrift!) *
Der letzte meta-Eintrag läd eine bestimmte Seite nach der angegebenen Zeit. Hier nach 5 Sekunden. Da jedoch eine andere Seite angegeben ist, als die, die gerade bearbeitet wird, erfolgt keine Aktualisierung, sondern eine Weiterleitung! Wird lediglich der URL gelöscht, so wird der Browser nach 5 Sekunden eine Fehlermeldung ausgeben. Empfehlenswert ist also meistens, dass die ganze Zeile gelöscht wird.
====== Aufteilen einer Seite mit Frames ======
Man kann eine Seite entweder in Spalten oder in Zeilen aufteilen. Hat man dies getan, so kann man jede Spalte wiederum in Zeilen aufteilen bzw. jede Zeile in Spalten. Und so weiter...
Die Startseite (index.html) sieht dann beispielsweise so aus:
Dieser Text steht im Titel des Browserfensters
//Man beachte den Unterschied in der DOCTYPE-Definition und dass in dieser Datei KEINERLEI Inhalte eingebunden werden!//
Hier wird zunächst der zur Verfügung stehende Bereich im Fenster in Zeilen (rows) aufgeteilt (frameset). Die erste Zeile wird 70px hoch, die zweite Zeile erhält den restlichen zur Verfügung stehenden Platz (*).
Anschließend wird der Inhalt der ersten Zeile mit der Datei oben.html gefüllt. Die zweite Zeile wird in zwei Spalten (cols) aufgeteilt (frameset). Die erste Spalte wird 130px groß, die zweite Spalte erhält wiederum den restlichen Platz. Die zusätzlich gegebenen Namen sind wichtig, um später nachträglich die frames mit anderen Inhalten füllen zu können. Zeigt ein Browser keine frames an, so werden immerhin die Namen angezeigt und man kann sich entscheiden, welchen der frames man betrachten möchte.
Eine solche Aufteilung bedeutet natürlich mehr Arbeit, da schon die Startseite aus vier Dateien besteht:
- index.html - Sie legt die Aufteilung in frames fest und gibt an, welcher Inhalt in welchem frame zu Beginn angezeigt werden soll. (Siehe Code-Beispiel oben.)
- oben.html - Enthält im Beispiel nur die Überschrift und wird in der ersten Zeile angezeigt.
- unten.html - Enthält im Beispiel den Inhalt der ersten Seite.
- links-html - Enthält im Beispiel eine List von Links. Je nach dem, wird der Inhalt der verlinkten Seite in frame "Inhalt" (also die zweite Spalte der zweiten Zeile) angezeigt, oder in einem neuen Tab/Fenster.
Ein Beispiel für links.html:
Dieser Text steht im Titel des Browserfensters
Der Link auf Uni-Brachbach wird in einem neuen Tab geöffnet, während die anderen im frame "Inhalt" dargestellt werden.
====== Formate festlegen mit CSS ======
Dafür gibt's ein Extrablatt: [[CSS]]