Inhaltsverzeichnis

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

Der strukturelle Aufbau eines XHTML-Befehls (auch XHTML-tag genannt - sprich: 'tähg') ist grundsätzlich immer gleich. Er besteht aus zwei Teilen:

  1. Anfangs-tag: <befehl attribut1=„wert1“ attribut2=„wert2“ …>
  2. End-tag: </befehl>

Beispiel für einen Hyperlink: 

<a href="http://www.euteneuers.de">Euteneuers-Homepage</a>

Alle, mit Hilfe von XHTML, dargestellten Elemente müssen in einen Absatz eingebettet werden. Der Befehl, der den Beginn eines Absatzes kennzeichnet, lautet <p> (für paragraph). Das Ende des Absatzes wird mit </p> 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 <br></br>. Da er jedoch immer nur punktuell angewendet wird, darf eine Abkürzung benutzt werden: <br/>. Diese Abkürzung ist auch beim Einbinden von Bildern, die auch in Absätze eingebunden werden müssen, sinnvoll: <img href=„bild.png“ alt=„Kein Bild?“/>. Diese Abkürzung ist immer dann sinnvoll, wenn zwischen Anfangs- und End-tag keine Daten mehr stehen.
(Hinweis: Im Gegensatz zu XHTML gibt es in HTML Befehle, die keinen Ende-Befehl (end-tag) haben (br, img) dürfen!)

Was man noch kennen sollte:

Aufbau

XHTML-Strict wurde von allen Elementen befreit, die das Design der Seite direkt beeinflussen. Sollen Elemente spezielle formatiert werden, muss das mit CSS gemacht werden.

Folgende Metadaten könnten interessant sein: 

    <meta name="generator" content="Bluefish"/>
    <meta name="author" content="Claudius Euteneuer"/>
    <meta name="date" content="2008-09-02"/>
    <meta name="copyright" content="Claudius Euteneuer"/>
    <meta name="keywords" content="bluefish xhtml meta"/>
    <meta name="description" content="Beispiel für bluefish, xhtml und meta"/>
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta http-equiv="content-style-type" content="text/css"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="refresh" content="5; URL=http://uni-brachbach.homelinux.org"/>

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: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
      <title>Dieser Text steht im Titel des Browserfensters</title>
      <link href="format.css" type="text/css" rel="stylesheet"/>
  </head>
 
<frameset  rows="70px,*">
   <frame src="oben.html" name="Überschrift"/>
   <frameset  cols="130px,*">
     <frame src="links.html" name="Inhaltsverzeichnis"/>
     <frame src="unten.html" name="Inhalt"/>
   </frameset>
</frameset>
 
</html>

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:

  1. 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.)
  2. oben.html - Enthält im Beispiel nur die Überschrift und wird in der ersten Zeile angezeigt.
  3. unten.html - Enthält im Beispiel den Inhalt der ersten Seite.
  4. 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: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
      <title>Dieser Text steht im Titel des Browserfensters</title>
      <link href="format.css" type="text/css" rel="stylesheet">
  </head>
  <body>
	<p>
	<a href="http://www.uni-brachbach.de" target="_blank">Uni-Brachbach</a><br/>
	<a href="http://de.selfhtml.org" target="Inhalt">selfhtml</a><br/>
         <a href="9inf-Montag.html" target="Inhalt">9inf Montag</a><br/>
         <a href="9inf-Donnerstag.html" target="Inhalt">9inf Donnerstag</a><br/>
         <a href="11inf.html" target="Inhalt">11inf</a><br/>
	</p>
  </body>
</html>

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