Wie kann ich ... (Tips & Tricks)


Kodierfehler vermeiden

Ein paar Dinge sollten Sie beim Erstellen von HTML-Dateien vermeiden, um kodierbedingte Anzeigefehler zu vermeiden.

Fehlende Anführungszeichen

zweifelhaft:
<h1 align=center>Lebenslauf</h1>

Einige WWW-Browser, z.B. Netscape, richten die Überschrift wie gewünscht zentriert aus. Andere, wie z.B. Spry Mosaic, ignorieren den Wunsch nach zentrierter Ausrichtung - nur, weil die Anführungszeichen fehlen.

besser:
<h1 align="center">Lebenslauf</h1>

Das gilt im übrigen für alle Wertzuweisungen bei zusätzlichen Angaben innerhalb von Tags. Beispiele: <font size="5"> oder <a href="homepage.htm">Zurück nach hause!</a>

Überlappen von HTML-Tags

zweifelhaft:
<b>Beispiel für <dir>überlappende</b> HTML-Tags.</dir>

Die meisten Browser lösen solche Anweisungen zwar richtig auf, aber im Einzelfall kann es auch zu Anzeigefehlern kommen.

besser:
<b>Beispiel für</b><dir><b>nicht überlappende</b> HTML-Tags.</dir>

Tags innerhalb von Verweisen

zweifelhaft:
<a href="nachbar.htm"><h2>Verweis zur Nachbarin</h2></a>

Dies wird vom offiziellen HTML-Standard verboten, wenngleich die meisten WWW-Browser es korrekt interpretieren.

besser:
<h2><a href="nachbar.htm">Verweis zur Nachbarin</a></h2>

Umgekehrt also: Verweise innerhalb anderer HTML-Tags notieren! Bei Texthervorhebungswünschen im Verweistext sollte man das aber auch nicht so verbissen sehen,

z.B.:
<a href="nachbar.htm">Verweis zur <i>Nachbarin</i></a>


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Wie kann ich ... (Tips & Tricks)

Vorhandene Daten aus anderen Programmen in HTML-Dateien kopieren

Wenn HTML wirklich die Zukunft gehört, wird es in Zukunft auch immer ausgereiftere Werkzeuge geben müssen, um Daten aus anderen Anwendungen in HTML zu konvertieren. Einstweilen müssen wir noch mit wenigen existierenden Konvertern leben. Folgende Information dazu finden Sie im WWW: Bedenken Sie jedoch auch, daß HTML als international normierte Dokumentbeschreibungssprache einen anderen Zweck hat als den, alle denkbaren existierenden Dateiformate möglichst verlustfrei aufzunehmen. Zu solchen Zwecken sind Lösungen wie Acrobat Exchange wesentlich besser geeignet.

Textorientierte Daten

Das sind Daten, die mit einem Textverarbeitungs- oder DTP-Programm erstellt wurden, z.B. mit Word für Windows oder Page Maker.

Wenn Sie mit MS-Windows arbeiten und reinen Text in eine HTML-Datei kopieren wollen, ist der einfachste Weg die Zwischenablage. Dabei rufen Sie den HTML-Editor, der die Daten aufnehmen soll, und das Textverarbeitungsprogramm, das die Originaldaten enthält, auf. In dem Textverarbeitungssystem markieren Sie den gewünschten Text und kopieren ihn in die Zwischenablage ("Bearbeiten/Kopieren" bzw. "Edit/Copy"). Im HTML-Editor fügen Sie anschließend den Inhalt der Zwischenablage ein ("Bearbeiten/Einfügen" bzw. "Edit/Paste"). Wenn der HTML-Editor ein normaler ASCII-Editor ist, gehen dabei alle Formatieranweisungen des Originaltextes verloren. Sie müssen den Text also mit Hilfe von HTML-Tags neu formatieren.

Wenn Sie Daten in einem Textverarbeitungsprogramm haben, das RTF-Dateien (RTF = Rich Text Format) abspeichern kann (das können z.B. Word für Windows, Ami Pro und fast alle bekannten Textverarbeitungs- und DTP-Programme), dann sollten Sie sich mit dem RTF-zu-HTML-Konverter beschäftigen. Im WWW erhalten Sie dazu Informationen:

Wenn Sie Daten in Word für Windows haben, können Sie versuchen, eine HTML-Dokumentvorlage auf den gewünschten Text anzuwenden. Auch in diesem Fall müssen Sie jedoch manuell alle Formate des alten Textes löschen und die neuen Formate der HTML-Dokumentvorlage anwenden. Im WWW finden Sie z.B. für Word für Windows folgende Dokumentvorlagen:

Wenn Sie Daten in Word Perfect haben, können Sie ab der neuesten Version von Word Perfect alles, was Sie mit Word Perfect erzeugen, direkt als HTML-Datei abspeichern. Den HTML-Konverter für Word Perfect gibt es auch separat im WWW: Die Lösung von Word Perfect ist richtungsweisend, und andere Branchenriesen wie Microsoft oder Lotus werden es sich kaum leisten können, künftigen Versionen ihrer Programme keine solchen Filter mitzugeben. Frame Technologies hat bereits reagiert und für die nächste Version 5.0 des Frame Maker einen fest eingebauten HTML-Filter angekündigt.

Zur Konvertierung von Daten aus DTP-Programmen finden Sie folgende Informationen im WWW:

Zahlen- und tabellenorientierte Daten

Das sind Daten, die mit einem Tabellenkalkulationsprogramm erstellt wurden, z.B. mit Excel oder Lotus 1-2-3.

Bedenken Sie bei dem Wunsch, solche Daten in HTML zu konvertieren, daß Tabellen ab der neuen HTML-Version 3.0 zwar unterstützt, aber bislang nur von wenigen WWW-Browsern angezeigt werden können.

Für Excel soll es bereits einen Konverter geben. Eine WWW-Adresse für Informationen o.ä. ist mir allerdings nicht bekannt.

Wenn Sie eine Tabelle von Hand konvertieren wollen, ist es am sinnvollsten, die Tabelle "kommabegrenzt" (übliche Dateinamenendung: *.CSV) abzuspeichern. Fast alle Tabellenkalulationsprogramme bieten diese Möglichkeit an. Die Tabelle wird dabei als reine Textdatei abgespeichert. Jeder Zeile der Tabelle entspricht in der Textdatei eine Textzeile. Die Spalteninhalte werden jeweils durch Kommata getrennt. Den Inhalt dieser Textdatei können Sie dann in die gewünschte HTML-Datei kopieren. Die HTML-Tags zum Darstellen der Tabelle müssen Sie händisch einfügen.

Datensatzorientierte Daten

Das sind Daten, die mit einem Datenbankprogramm erfaßt wurden und per Suchabfragen zugänglich sind, z.B. mit Access oder Fox Pro.

Für Oracle-Datenbanken gibt es einen HTML-Konverter. Information dazu finden Sie im WWW:

Ein anderer möglicher Weg zur Konvertierung führt über die produktunabhängige Datenbankabfragesprache SQL (Structured Query Language). Hierzu gibt es im WWW folgende Information: Wenn Sie das Ergebnis einer Datenbankabfrage von Hand konvertieren wollen, ist es, wie bei Tabellen, am sinnvollsten, die Daten "kommabegrenzt" abzuspeichern und dann in einer HTML-Datei weiterzuverarbeiten. Gehen Sie dazu vor wie weiter oben beschrieben.

Grafisch orientierte Daten

Das sind Daten, die mit einem Grafikprogramm, einem CAD-Programm, einem Flow-Chart-Programm oder einem Präsentationsprogramm erstellt wurden, z.B. mit Corel Draw, Freelance Graphics, AutoCAD oder ABC-Flow-Charter.

Grafiken müssen Sie in HTML per Referenz einbinden. Dazu müssen die Grafiken als separate Dateien vorliegen, möglichst in den Dateiformaten GIF oder JPG.

Wenn Sie die gewünschte Grafik in einem Programm laden können, das eines dieser beiden Dateiformate abspeichern kann, brauchen Sie die Grafik nur mit "Speichern unter" ("Save as") als GIF- bzw. JPG-Grafik abspeichern.

Ansonsten brauchen Sie ein Bildverarbeitungsprogramm. Ideal ist Paintshop Pro, das bekannte Shareware-Programm. Pixelgrafiken, die in anderen Formaten vorliegen (z.B. BMP, PCX usw.), können Sie damit laden und als GIF- oder JPG-Grafiken abspeichern. Paintshop Pro bietet außerdem eine Screenshot-Funktion an. Damit können Sie beliebige Fensterinhalte anderer Programme aufnehmen und als GIF- oder JPG-Datei abspeichern. Auf diese Weise können Sie z.B. ein Präsentationsprogramm wie MS Power Point laden, den gewünschten Bildschirminhalt laden, Paintshop Pro laden, einen Screenshot der Präsentationsgrafik schießen und diesen als GIF- bzw. JPG-Datei abspeichern.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Wie kann ich ... (Tips & Tricks)

Grafiken zentriert oder rechtsbündig ausrichten

Die Anweisung zum Einbinden von Grafiken sieht selbst keine Möglichkeit vor, um Grafiken zentriert oder rechtsbündig auszurichten. Mit den zusätzlichen Angaben hspace= und vspace= lassen sich Grafiken zwar absolut nach Pixeln, aber nicht relativ zur Größe des Anzeigefensters ausrichten.

Um eine zentrierte oder rechtsbündige Ausrichtung zu erzwingen, fügen Sie vor der Grafikeinbinde-Anweisung einfach einen harten Umbruch ein. In dem betreffenden Tag geben Sie die gewünschte Ausrichtung an.

Komplettbeispiel:

  <p align="center"><img src="freundin.gif">
Die Grafik FREUNDIN.GIF wird dadurch im Anzeigefenster zentriert ausgerichtet.
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Wie kann ich ... (Tips & Tricks)

Hintergrund einer Grafik unsichtbar machen

Die meisten modernen WWW-Browser bieten dem Anwender per Voreinstellung einen hellgrauen Hintergrund für das Anzeigefenster an, sehen jedoch die Möglichkeit vor, die Hintergrundfarbe dem eigenen Geschmack anzupassen. Wenn Sie nun eine Grafik mit hellgrauem Hintergrund haben, wirkt diese Grafik auf einem weißen Fensterhintergrund wie ein "häßlicher" grauer Fleck. Ideal wäre eine Grafik, die einen unsichtbaren (transparenten) Hintergrund hat, damit sie auf jedem Fensterhintergrund wirkt.

Das Dateiformat GIF, in dem die meisten Grafiken des WWW vorliegen, sieht die Möglichkeit vor, eine Farbe (hier: die Farbe für den Hintergrund) als unsichtbar zu definieren. Dies ist jedoch erst mit dem neuen, 89er-Format von GIF möglich. Im älteren, 87er Format ist das noch nicht möglich.

Gängige Grafikprogramme, die das Dateiformat GIF lesen und schreiben können, bieten jedoch keine Funktion an, um das Feature der "unsichtbaren" Farbe zu nutzen.

Eifrige Programmierer haben diesen Mißstand erkannt und Utilities programmiert. Das sind jedoch Programme aus der tiefsten Unix-Welt, kommandozeilenorientiert, mit dem deutlichen Unterton: "nur für Eingeweihte"

Zwei bekannte Programme dieser Art können Sie im WWW downloaden:

Beide Programme sind unter MS-DOS ausfürbare Dateien.
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Wie kann ich ... (Tips & Tricks)

Breite von Tabellenspalten kontrollieren

Normalerweise formatieren WWW-Browser (derzeit ohnehin nur Netscape V1.1) Tabellen nach dem Zelleninhalt. Das heißt, eine Tabellenspalte ist so breit, wie es die Zelle mit den meisten Zeichen erfordert. Eine Möglichkeit, Spaltenbreiten festzulegen, wird zwar für die künftige Version 3.0 von HTML gefordert, wird jedoch von Netscaper bislang nicht unterstützt.

Wenn Sie eine Tabellenspalte schmaler wünschen, können Sie innerhalb einer Zelle ein Umbruchzeichen einfügen.

Beispiel:

  <table border>
    <tr>
      <th>
      <th>Angst
      <th>Liebe
      <th>Freiheit
    </tr>
    <tr>
      <th>Johanna
      <td>4
      <td>7
      <td>2
    </tr>
    <tr>
      <th>Jacob
      <td>5
      <td>2
      <td>8
      <tr>
    </tr>
    <tr>
      <th>Ina
      <td>2
      <td>9,weil<br>frisch<br>verliebt
      <td>5<tr>
    </tr>
  </table>
(Visualisierung dieser Tabelle: siehe separate Anzeigebeispiele)

In dieser Tabelle braucht die Zelle "Ina - Liebe" im Vergleich zu allen anderen Zellen extrem viel Platz, weil Ina frisch verliebt ist. Um diesem Mißstand zu begegnen, fügen Sie einfach Umbruchzeichen in den Zellentext ein. Die Ina kriegen Sie damit zwar nicht mehr, aber die Tabelle wird ansehnlicher.

Es gibt aber auch den umgekehrten Fall. Da möchten Sie, daß eine Spalte breiter ist als ihr breitester Inhalt. Zu diesem Zweck können Sie erzwungene Leerzeichen einfügen.

Beispiel:

    <tr>
      <th>CDU<td>&#160;&#160;&#160;37%&#160;&#160;&#160;<tr>
    </tr>
    <tr>
      <th>SPD<td>&#160;&#160;&#160;36%&#160;&#160;&#160;<tr>
    </tr>
    <tr>
      <th>FDP<td>&#160;&#160;&#160;8%&#160;&#160;&#160;<tr>
    </tr>
    <tr>
      <th>GRÜNE<td>&#160;&#160;&#160;9%&#160;&#160;&#160;<tr>
    </tr>
  </table>
(Visualisierung dieser Tabelle: siehe separate Anzeigebeispiele)


Zur Neuorientierung: zurück zum Inhaltsverzeichnis< oder zur Überschrift Wie kann ich ... (Tips & Tricks)
</body> </html>