Benutzer:EEL/Homepage mit Tabellen

Strukturierung der Homepage mit Tabellen

Wichtige Bausteine

Um eure Homepage mit Tabellen zu gliedern, müsst ihr zunächst ein paar grundsätzliche "Bausteine" kennen. Was ihr bereits in den ersten Aufgaben verwendet habt, sind unter anderem <p>...</p> (paragraph = Absatz), <h1>...</h1> (headline = Überschrift) und <title>...</title> (Titelleiste.)

Solche Elemente dienen im wesentlichen zur Textstrukturierung und werden "tag" (= Auszeichnung) genannt - auch Tabellen werden auf ähnliche weise in ein Dokument eingebettet. Sie werden immer in <spitzen Klammern> geschrieben, und es muss immer zwei davon geben: Mit dem ersten wird angezeigt, dass ein Element beginnt, das zweite enthält noch den Schrägstrich und gibt das Ende eines Elements an. Die tags selbst kann man im Browser nicht mehr sehen, aber dafür die Formatierung zu der sie dienen.

Eine besondere Rolle haben dabei die Elemente <html>...</html>, <head>...</head> und <body>...</body>, die gewissermaßen "über" der für uns sichtbaren Struktur der Seite stehen. Die <html>-tags geben immer Anfang und Ende des HTML-Dokuments an, <body> umfasst alle Informationen die für uns im Browser sichtbar sind, also den eigentlichen Kern der Seite, während <head> allgemeine Angaben zur Seite enthält, z.B. für die Titelleiste des Browsers oder Stichworte für Suchmaschinen.

Die Tabellen sind also grundsätzlich zwischen den <body>-tags zu finden. Die dafür nötigen tags sind:

<table> (markiert Anfang und Ende der ganzen Tabelle)
<tr> (table row markiert Anfang und Ende einer Zeile)
<th> (table head bezeichnet eine Kopfzelle)
<td> (table data eine Datenzelle)

Wie viele Zeilen eine Tabelle hat ist also abhängig von der Zahl der <tr>-Elemente innerhalb einer Tabelle und die Zahl der Spalten ergibt sich aus den Kopf- oder Datenzellen zwischen zwei <tr>-tags.

Eine Tabelle für alles

Für die Gesamtstrukturierung der Homepage bietet es sich also an, eine große Tabelle zu verwenden, mit einer Zelle für die Titelleiste, einer Zelle für ein Logo, einer Zelle für die Navigationsleiste und einer Zelle für den Text. Im Unterschied zur Datenzelle, die am besten einfach für das Textfeld verwendet wird, wird der Text in den Kopfzellen vom Browser zentriert und fett dargestellt.

Die dafür verwendete Tabelle könnte also folgendermaßen aussehen:

<table>
  <tr>
    <th>Logo</th>
    <th>Titelleiste (mit dem Projektnamen)</th>
  </tr>
  <tr>
    <th>Navigationsleiste</th>
    <td>Textfeld</td>
  </tr>
</table>

Den Text entsprechend den geöffneten und geschlossenen tags einzurücken ist nicht notwendig, kann den Text aber übersichtlicher und einfacher bearbeitbar machen.

Um die Abstände zu definieren, müssten allerdings ein paar Angaben zu Länge und Höhe bei den tags eingefügt werden: "width" kann in Prozent der Größe des Browserfensters angegeben werden, um den Platz bestmöglich auszunutzen. Im folgenden Beispiel ist der Text in der Tabelle gleich mit Platzhaltern gefüllt:

<table>
  <tr>
    <th width="12%">Logo<br>Logo<br>Logo</th>
    <th width="80%">Titelleiste (mit dem Projektnamen)</th>
  </tr>
  <tr>
    <th>Navigationsleiste:<br>besteht<br>aus<br>mehreren<br>Zeilen</th>
    <td>Textfeld: Hier wird später informativer Text eingefügt.</td>
  </tr>
</table>

<br> besteht nur aus einem tag und erzeugt einen einfachen Zeilenumbruch im Text. So erstrecken sich die Navigationsleiste und und das "Logo" über mehrere Zeilen.

Umsetzung für die Projekthomepage

Jetzt könnt ihr gleich mal die Elemente, die ihr bei der ersten Homepage-Rundmail bereits kennengelernt habt, hier wieder verwenden. Der Projektname kann ruhig etwas hervorgehoben werden, und den Text im Textfeld könnt ihr in Absätze gliedern. Für das Logo kann etwas neues verwendet werden, das Bild-Element:

Genau wie <br> besteht <img> nur aus einem tag - alle Informationen dazu werden noch in den spitzen Klammern angegeben. style definiert in erster Linie die Größe des Bildes, src gibt die Adresse (URL) des Bildes an, das verwendet werden soll, und nach alt könnte noch ein alternativer Text eingegeben werden, bzw. ein Kommentar zum Bild. Wenn ihr also das IPK-Logo in der Ecke eurer Homepage angezeigt haben wollt, könnt ihr diesen Text anstelle vom Text "Logo" einfügen.

<img style="border:0;width:87px;height:80px" src="http://www.ku-eichstaett.de/Fakultaeten/SLF/romanistik/didaktik/Forschung/ipk/bilder/logo.gif" alt="">

Ergänzt jetzt noch die vorläufigen Gliederungspunkte in der Navigationsleiste und die Aufgaben wären soweit erledigt!

So in etwa sollte der Quelltext schließlich aussehen - als Internetseite könnt ihr den folgenden Text hier betrachten.

<html>
  <head>
    <title>Rezeption Japanischer Schriftzeichen</title>
  </head>
  <body>
    <table>
      <tr>
        <th width="12%"><img style="border:0;width:87px;height:80px"
          src="http://www.ku-eichstaett.de/Fakultaeten/SLF/romanistik/didaktik/Forschung/ipk/bilder/logo.gif"
          alt=""></th>
        <th width="80%">
          <h1>Rezeption japanischer Schriftzeichen</h1>
        </th>
      </tr>
      <tr>
        <th>Hauptseite<br>Entstehung<br>Idee und Ziel
          <br>Kalligraphie<br>Dekoration<br>Galerie<br>Literatur</th>
        <td>
          <h3>Hauptseite: Rezeption japanischer Schriftzeichen</h3>
          <p>Hier entsteht die Homepage der Japan-Gruppe des IPK-Kurses (Sommersemester 2006).</p>
          <p>Unsere Arbeit beschäftigt sich mit der deutschen/europäischen Rezeption japanischer
            Schriftzeichen und deren Verwendung, beispielsweise als dekorative Elemente. Der Kurs
            "Internet- und Projektkompetenz" (IPK) ist ein Angebot der Virtuellen Hochschule
            Bayerns.</p>
        </td>
      </tr>
    </table>
  </body>
</html>

Füllen der Tabelle

Wie die Navigationsleiste brauchbar gemacht wird und weitere Formatierungen am Text vorgenommen werden können wird als nächstes gezeigt...