Tabellen erstellen und formatieren

Tabellen erstellen

Innerhalb einer Zelle können Sie Texte, Bilder und andere Elemente einsetzen. Wenn Sie den Inhalt einer Zelle als Überschrift der Spalte definieren wollen, setzen Sie statt <td> <th> ein (th = table header = Tabellenkopf). Die Inhalte dieser Zelle werden automatisch hervorgehoben. Bei Netscape fett und zentriert.

<table> <tr> <th> <th> <tr> <td> <td> </table>

Tabelle beginnt Erste Zeile beginnt 1. Zelle der 1. Zeile (1. Spaltenüberschrift) 2. Zelle der 1. Zeile (2. Spaltenüberschrift) Zweite Zeile beginnt 1. Zelle der 2. Zeile 2. Zelle der 2. Zeile Tabellenende

Im einleitenden Tag <table> können noch folgende Optionen erscheinen:

• Mit border legen Sie fest, dass die Rahmen der Tabelle sichtbar sind. Standardmäßig werden die Rahmen nämlich nicht angezeigt. Wenn Sie statt border border=* angeben, können Sie die Außen-Rahmendicke mit * in Pixeln festlegen.
• Mit cellspacing=* (cellspacing = Zellenbemaßung) legen Sie die Dicke der Gitternetzlinien fest - ebenfalls in Pixeln.
• Mit cellpadding=* (cellpadding = Zelleninhaltbemaßung) legen Sie den Abstand des Zelleninhalts zu den Gitternetzlinien fest - ebenfalls in Pixeln.

Übrigens: Sie können auch mehrere Tabellen ineinander verschachteln, müssen dann aber bei der inneren Tabelle die Befehle zum Beenden einer Zelle </td> bzw. einer Zeile </tr> einsetzen.

<table>
  <tr>
    <td>Inhalt
    <td>
     <table>
      <tr>
       <th>Inhalt</th>
       <th>Inhalt</th>
      </tr>
      <tr>
       <td>Inhalt</td>
       <td>Inhalt</td>
      </tr>
    </table>
</table>

Höhe und Breite festlegen

Mit width=* bzw. height=* im Tabellen Tag <table> können Sie der gesamten Tabelle eine bestimmte Größe zwingend zuweisen. Die Angabe der Breite kann in Pixeln oder Prozent (z.B. "60%" ) des Browser-Fensters erfolgen, die der Höhe jedoch nur in Pixeln.
Sie können aber auch die Höhe bzw. Breite einzelner Zeilen oder Spalten festlegen:

In jedem Zellen-Tag (<td> bzw. <th>) können Sie die Höhe für die gesamten Zeile und die Breite für die gesamte Spalte angeben (Sollte die angegebene Größe nicht ausreichen, wird der Befehl unwirksam!).
Die Höhe bestimmen Sie mit height=*, die Breite mit width=* in Pixeln. Bei der Breite einzelner Spalten sind auch Prozentangaben möglich, diese bezieht sich auf die Gesamtbreite der Tabelle.
Mit nowrap im Zellen-Tag können Sie Zeilenumbrüche innerhalb der Zelle verhindern, die Breite wird entsprechend angepasst.

Ausrichten von Zelleninhalten

Indem Sie in <td> oder <th> für eine einzelne Zellen oder <tr> für eine gesamte Zeile valign=top eintragen, wird der gesamte Inhalt nach oben ausgerichtet und mit valign=bottom untenbündig.
Indem Sie in <td> oder <th> für eine einzelne Zellen oder <tr> für eine gesamte Zeile align=right eintragen, wird der gesamte Inhalt nach rechts ausgerichtet, mit align=center zentriert und mit align=left linksbündig. (align = Ausrichtung, valign = vertical align = vertikale Ausrichtung).

Zellen verbinden

Um mehrere Zellen einer Spalte zu verbinden, tragen Sie in dem Tag der obersten Zelle (die, die in der Datei zuerst definiert wird) rowspan=* ein (rowspan = Zeilen spannen). Für * setzen Sie die Anzahl der miteinander zu verbindenden Zellen ein. Wenn Sie die Zeilen definieren, in denen der untere Teil der verbundenen Zellen liegt, überspringen Sie einfach die Zelle. Zuerst geben Sie also alle Zellen an, die vor der verbundenen Zelle liegen und dann die dahinter. Beachten Sie:
Hat die Tabelle weniger Zeilen als Sie miteinander verbinden wollen, wird der Befehl unwirksam.

Um mehrere Zellen einer Zeile zu verbinden, tragen Sie in dem Tag der ersten Zelle von links colspan=* ein (colspan = column span = Spalten spannen). Für * setzen Sie die Anzahl der miteinander zu verbindenden Zellen ein.
Beachten Sie: Hat die Tabelle weniger Spalten als Sie miteinander verbinden wollen, wird der Befehl unwirksam.

Sie können ebenfalls mehrere Zellen zeilen- und spaltenweise gleichzeitig miteinander verbinden. Setzen Sie in der einzelnen Zelle, die im Zellenverband ganz links oben liegen soll, rowspan=* und colspan=* gleichzeitig ein, mit der jeweiligen Anzahl anstelle von *.

Hintergrundfarben

Praxis: Tabellen werden oft genutzt, um neben einem Text Kommentare oder Verweise einzufügen (Navigieren innerhalb der Seite/des Projektes). Sie können auch die gesamte Seite in eine Tabelle packen, um eine bestimmte Breite festzulegen (wie bei StarHTML).

Tabellen haben auch einen großen Nachteil: In jeder neuen Zelle gilt zunächst die (im Browser eingestellte) Standard-Schriftart und Größe! Sie müssen diese für jede Zelle neu ändern, wenn Sie nicht TimesNewRoman verwenden oder sichergehen wollen, dass die Seite überall gleich aussieht.

Vorallem mit blinden Tabellen, d.h. ohne sichtbare Gitternetzlinien, lässt sich viel anstellen!

Frames

Definieren von Frames

Dann definieren Sie die Frames mit <frame src="*" name="*"> . Hinter src= geben Sie in Anführungszeichen den Dateinamen der Datei an, die in diesem Frame beim ersten Laden der Seite erscheinen soll. Dafür gelten dieselben Regeln, wie beim Definieren von Verweisen.
Hinter name= geben Sie in Anführungszeichen den Namen des Frames an. Da _self, _new, _parent, _blank und _top in HTML bereits definierte Frame-Namen sind, dürfen Sie keine Frames so benennen. Frame-Namen sind wichtig, wenn Sie mit einem Verweis in einem Frame den Inhalt eines anderen ändern möchten (siehe unten).
(Natürlich darf jeder Frame-Name nur einmal pro Frameset vorkommen.)

<frameset rows="20%,80%"> <frame...> <frame...> </frameset>	<frameset cols="200,*"> <frame...> <frame...> </frameset>

Innerhalb eines Frameset kann auch noch ein Frameset anstelle eines Frames definiert werden. Dieses Frame wird dann noch in weitere Frames geteilt. Sie müssen nur statt <frame src="[Datei]" name="[Name]"> mit <frameset [rows/cols]="*,"> ein neues Frameset definieren, für die einzelnen Frames Quelldatei und Name festlegen und dahinter das Frameset beenden. Am Ende wird natürlich das oberste Frameset extra beendet.

<frameset cols="40%,60%"> <frame...> <frameset rows="50,*> <frame...> <frame...> </frameset> </frameset>	<frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame...> <frame...> </frameset> <frameset cols="50%,50%"> <frame...> <frame...> </frameset> </frameset>

Verweise in Framesets

Bei Netscape ab Version 2.0 und Explorer ab 3.0

Befehl	NN-Version	Wirkung
width=*	ab 2.0	Damit legen Sie die Breite der Anzeigefläche der Datei in Pixeln fest.
height=*	ab 2.0	Damit legen Sie die Höhe der Anzeigefläche der Datei in Pixeln fest.
align=[middle/left/right]	ab 2.0	Der nachfolgende Text beginnt: - auf halber Höhe rechts (middle). - rechts oben am Rand (left). Datei ist linksbündig ausgerichtet. - links oben am Rand (right). Datei ist rechtsbündig ausgerichtet.

Achtung Ausnahme: Hintergrundmusik beim Internet Explorer ab Version 2.0

Praxis:
Hintergrundmusik auf Internetseiten mag zwar mal was anderes und unterhaltendes sein, aber die niedrigen Übertragungsraten im Internet verhindern jede sinnvolle Nutzung dieses Features.

Sonderzeichen

(Es gibt jeweils zwei Möglichkeiten, Name und Unicode, welche Sie nutzen ist egal. Eine komplette Liste aller vorgesehenen Sonderzeichen finden Sie im Online-Forum.)

GIF/JPEG im Vergleich

GIF-Bilder

• GIF-Bilder können "interlaced" abgespeichert werden. Damit wird zunächst die Grundstruktur des Bildes sehr schnell zum Besucher geschickt. Beim weiteren Laden wird das Bild dann immer feiner aufgelöst.
• Animierte GIF-Bilder sind ebenfalls möglich.
• Und Sie können eine Farbe des Bildes transparent setzen. Dies ermöglicht transparente Hintergründe.

Der Nachteil ist, dass pro GIF-Datei nur Platz für maximal 256 Farben ist. Ein Pluspunkt ist dagegen, dass GIF-Grafiken verlustfrei komprimieren.
Das GIF-Format ist für hochauflösende Bilder wie Fotos nicht geeignet. Ideal ist es dagegen für kleine Symbole oder Cliparts (siehe Typische Grafikarten). Sie sollten aber mit Farbverläufen sparsam umgehen, da diese schnell einen Großteil der Palette belegen. Auch Anti-Aliasing kostet viel Speicher.

GIF-Bilder mit transparentem Hintergrund

Wenn Sie ein unregelmäßiges Bild (d.h. nicht rechteckig) verwenden möchten, so dass beim Rest des Bildes der Hintergrund der Seite zu sehen ist, können Sie bei GIF-Bildern eine Farbe als transparent definieren. Dies ist in den meisten neueren Bildbearbeitungsprogrammen (beispielsweise Paint Shop Pro) möglich.
Dies wirkt dann so:

Alle Pixel die diese transparente Farbe besitzen, werden dadurch unsichtbar, dort wird die Farbe des Hintergrunds angezeigt.

Anti-Aliasing

Anti-Aliasing ist eine Technik, um in Bildern sichtbare Treppeneffekte an schrägen Strichen oder Rundungen auszugleichen.
Am Bild links können Sie die Wirkung gut beobachten. Mit Anti-Aliasing wirkt die Schrift deutlich weicher und angenehmer. Die vergrößerten M's zeigen die Technik. Und auch an einfachen geometrischen Objekten wirkt sich Anti-Aliasing sehr positiv aus.

Moderne Bildbearbeitungsprogramme unterstützen den Anti-Aliasing-Effekt. Fireworks, Corel Photo-Paint und Paint Shop Pro bieten die Möglichkeit, markierten Objekten die Eigenschaft des Anti-Aliasing zuzuweisen.
Aber: Wenn alle grafischen Elemente weichgezeichnet werden, entsteht irgendwann ein Weichspülmittel-Effekt. Beachten Sie auch, dass sich dieser Effekt an der Hintergrundfarbe des Objektes orientiert. Wenn Sie ein solches Bild als transparentes GIF-Bild verwenden und vor einer anderen Hintergrundfarbe einsetzen, entstehen unangenehme Treppeneffekte:

Animierte GIF-Bilder

Sie können aber auch eigene animierte Bilder erstellen:
Zeichnen Sie zunächst in Ihrem Bildbearbeitungsprogramm die Einzelbilder. Beachten Sie dabei, dass die Bilder die selbe Größe haben und zueinander passen sollten! Speichern Sie sie als GIF-Bilder (evt. mit Numerierung).
Mit dem zu Paint Shop Pro gehörenden Animation Shop oder ähnlichen Programmen können Sie diese Bilder aneinanderfügen, festlegen wie lange die Einzelbilder erscheinen sollen und wie oft die Animation abgespielt werden soll.

Achtung: In animierten GIF-Bildern hat nicht jedes Einzelbild seine eigene Palette mit 256 Farben, sondern allen Einzelbildern zusammen stehen 256 Farben zur Verfügung!

Typische Arten animierter GIF-Bilder:

• Diashow-Effekte können Sie z.B. verwenden, um die Produkte Ihrer Firma zu präsentieren. Die Einzelbilder müssen für den Anwender einen nachvollziehbaren Zusammenhang ergeben.
• Daumenkino-Effekte können sie z.B. verwenden, um Cliparts zu einfachen Trickfilmsequenzen zu erweitern oder Ablaufprozesse zu zeigen.

Tipp: Eine interessante Seite zu GIF-Animationen: Zampanos GIF-Animationen

Das "Blind-GIF"

JPEG-Bilder

1. Die Groß-/Kleinschreibung spielt bei HTML-Befehlen keine Rolle. Nur bei selber benannten Frames oder Textstellen sowie Dateinamen müssen Sie die Groß-/Kleinschreibung beachten.

2. Dateinamen, Namen für Frames und Bezeichnungen für Textstellen dürfen keine Lehrzeichen, keine deutschen Umlaute und keine Sonderzeichen außer dem Unterstrich "_" enthalten.

3. Einrückungen im Quelltext, wie der Übersichtlichkeit halber in einigen Quelltext-Beispielen dieses Kurses, sind unnötig, werden aber vom Browser ignoriert. Bei großen Dateien, können sie sehr nützlich sein. Ebenso ist es egal, wieviele Leerzeichen Sie irgendwo hintereinander einfügen, wenn Sie diese nicht mit dem Code für Sonderzeichen &#160; einfügen, wird im Browser immer nur ein Leerzeichen angezeigt.

4. Ob Sie in der HTML-Datei das gesamte Dokument in eine Zeile schreiben oder am Bildschirmrand jedesmal mit der [Eingabe]-Taste einen Zeilenumbruch einfügen ist grundsätzlich egal. Allerdings sollten Sie zum Zwecke der Übersichtlichkeit regelmäßig eine neue Zeile beginnen.

Guter HTML-Stil

	unruhiges Layout - nicht gut, verwirrt und strengt an
	ruhiges Layout- übersichtlich
Textgestaltung	Sie sollten nicht zu viele unterschiedliche Textformate auf einer Seite benutzen. Das heißt: Einheitliches Format für Überschriften, Links und Text. Nicht zu grellen, zu kleinen oder zu großen Text verwenden.
jede Seite für sich	Achten Sie darauf, das jede Seite für sich stehen kann! Schreiben Sie nicht über mehrere Seiten hinweg. Das zerstört den Zusammmenhang und die Konzentration Ihrer Leser.
wenig scrollen	Auch ständiges scrollen ermüdet und macht unkonzentriert. Machen Sie Ihre Seiten also auch nicht zu lang!
einfach schreiben	Schreiben Sie einfach und verzeichten Sie auf komplizierte Satzkonstruktionen! Schreiben Sie in kurzen Sätzen und in einem aktiven Stil!
keine Rückbezüge	Verwenden Sie möglichst keine Rückbezüge, das Blättern in Internetseiten dauert nun mal seine Zeit.
erklären	Ihre Besucher nehmen Schlussfolgerungen nicht einfach hin, erklären Sie die!
Glaubwürdigkeit	Auch, indem Sie verschiedene Standpunkte oder Lösungsvorschläge erklären, können Sie Ihre Glaubwürdigkeit erhöhen!
Spalten	Lange Texte sollten Sie unbedingt in Spalten schrieben. Um so kürzer die Wegstrecke ist, die das Auge des Lesers zurücklegen muss, umso entspannter kann er lesen. (siehe Blinde Tabellen)
Druckversion	Wenn Sie erwarten, das Ihre Besucher ihre Seiten ausdrucken könnten, bieten Sie bei grafisch und gestalterisch aufwendigen Seiten eine Druckversion an!
Frames	Verwenden Sie Frames um besser navigieren zu können, zu Vergleichszwecken oder zur kunstvollen Seitengestaltung. Verwenden Sie Frames nicht, um fremde Seiten im eigenen Frameset anzuzeigen und damit deren Anzeigeformat zu ändern. Bei externen Verweisen in Frames immer Frameset beenden!

Nicht für bestimmte Browser oder Auflösungen schreiben

Aussagekräftige Verweistexte verwenden

"Für mehr Unterstützung klicken Sie bitte hier"
sondern:
"Weitere Unterstützung ist ebenfalls verfügbar".

Bilder mit Alternativtext und Größenangaben versehen

Dateiorganisation

Achtung: Dabei müssen Sie die Verzeichnisstruktur sowohl im Homepage-Verzeichnis auf Ihrer Festplatte als auch auch dem Web-Server, wo Ihre Homepage später abrufbar sein soll, gleich aufbauen und die selben Verzeichnisnamen verwenden. Diesen Namen müssen Sie auch in allen HTML-Dateien verwenden, beispielsweise bei Verweisen zu Dateien im Unterverzeichnis.

Übliche Inhalte bei privaten Homepages

• Links
  Es ist üblich geworden, auf der eigenen privaten Homepage auf die Lieblings-Internet-Seiten zu verweisen. Dazu wird auf der Startseite mit dem Verweis Links hingewiesen.
• Kontaktmöglichkeiten
  Auf der Startseite wird auf Kontaktmöglichkeiten hingewiesen. Etwa mit der Email-Adresse des Autors.
• Credits
  
  • Verfasser
    Besucher haben ein Recht zu erfahren, wer für eine Internetseite verantwortlich ist.
  • Erstelldatum
    Schreiben Sie das Erstelldatum an eine geeignete Stelle im Text. Besonders bei schnell veraltenden Informationen ist dies wichtig.
  • Autorenrechte
    Weisen Sie auf Ihre Urheberrechte hin, bzw. beschreiben Sie, was mit Ihrem Text geschehen darf und was nicht. Das Kopieren des Textes können Sie kaum verbieten, wohl aber die Weitergabe des Textes nach darin vorgenommenen Änderungen.
• Danksagungen
  Nutzen Sie die Gelegenheit um sich bei Bekannten und Verwandten für Unterstützung, Freundschaft oder was auch immer zu bedanken.

• Kontaktmöglichkeiten
  Auf der Startseite wird auf Kontaktmöglichkeiten hingewiesen. Etwa mit der Email-Adresse und der physischen Adresse der Firma.
• Verfasser
  Besucher haben ein Recht zu erfahren, wer für eine Internetseite verantwortlich ist. Dabei genügt nicht immer der Firmenname, bei größeren Firmen sollte auch der Autor persönlich genannt werden.
• Erstelldatum
  Schreiben Sie das Erstelldatum an eine geeignete Stelle im Text. Besonders bei schnell veraltenden Informationen ist dies wichtig.
• Autorenrechte
  Weisen Sie auf Ihre Urheberrechte hin, bzw. beschreiben Sie, was mit Ihrem Text geschehen darf und was nicht. Das Kopieren des Textes können Sie kaum verbieten, wohl aber die Weitergabe des Textes nach darin vorgenommenen Änderungen.
  (siehe Copyrights)

Weitere Tips zum Homepage-Aufbau

1. Organisation und Navigation trennen!
2. Jede Seite muss Inhalt haben!
3. Einfache Wege zum Ziel bieten!
4. Stellen Sie keine Hindernisse!
5. Auf jeder Seite eine Hintertür oder einen Notausgang einbauen!
6. Berücksichtigen Sie verschiedene Benutzergruppen!
7. Seien Sie flexibel!
8. Lassen Sie Platz für Wachstum!
9. Rechnen Sie mit Änderungen!

---

Veröffentlichen ihrer Homepage

Der Server-Speicherplatz  FTP-Übertragung  Hinweise

Der Server-Speicherplatz

Damit nur Sie Dateien in ihr Verzeichnis dort kopieren können, brauchen Sie auch einen Benutzernamen (oder Kennnummer) und ein Passwort für den Zugang zum Server. Wenn Sie den Speicherplatz bei Ihrem Provider nutzen, entsprechen diese meist Ihrem Benutzernamen bzw. Ihrer Kennnummer und dem Passwort des Internet-Zugangs.
Wenn Sie einen Anbieter kostenlosen Speicherplatzes nutzen, können Sie diese meist bei der Anmeldung wählen.

FTP-Übertragung

Nach dem Start beitet Ihnen das Programm ein Fenster, in dem Sie zunächst einen FTP-Zugang einrichten und ihn abspeichern können. Als "Profil-Name" (bei anderen Programmen "Name") können Sie dem Zugang einen Namen geben, unter dem Sie ihn dann stets wiederfinden. Als "Host-Adress" (oder "FTP-Site") geben Sie die Adresse des Servers an, auf den Sie die Homepage ablegen können. Dann geben Sie noch Ihren Benutzernamen unter "Login" (oder "User-ID") an, und klicken abschließend auf [Connect].
Es erscheint das Hauptfenster des FTP-Programms, indem Sie nun das Server-Verzeichnis sehen und die FTP-Befehle, die das Programm im Hintergrund an den Server schickt. In anderen Programmen sehen Sie auch oft ein Verzeichnis Ihrer Festplatte. Sie können nun auf dem Server ein Verzeichnis wählen, das Sie bearbeiten wollen. Klicken Sie in der Symbolleiste auf Upload (meist Pfeil nach oben). Nun können Sie in einem Dialogfenster die Dateien wählen, die Sie in das gewählte Server-Verzeichnis laden möchten. (Wenn Ihnen im Hauptfenster gleichzeitig Inhalte Ihrer Festplatte in einer Explorer-Ansicht geboten werden, können Sie dort die Dateien auswählen und per Mausklick zum Server schicken.)

Tipp: Sie können in den Optionen des FTP-Programms oft festlegen, das alle Dateinamen in Kleinbuchstaben konvertiert werden sollen. Aktivieren Sie diese Option, um nicht jede Datei umzubenennen.

Hinweise

StarHTML Druckversion

Martin Zwirner ©12/1999 EMail Online-Forum