Home UDO und HTML Tabellen in HTML raw-Umgebungen
 UDO - Eine kleine Einführung
 UDO und HTML

2.6 Grafikbefehle

Grafiken werden eingebunden, indem man im UDO-Quelltext den Dateinamen ohne Extension angibt. Dies hat einen einfachen Grund: Das Hauptziel von UDO ist es ja, soweit wie möglich aus einer Quelle möglichst viele verschiedene Formate erzeugen zu können - und die unterschiedlichen Textformate erwarten nun mal unterschiedliche Grafikformate: ST-Guide verarbeitet nur GEM-Images (*.IMG), für HTML haben sich GIF und JPEG durchgesetzt, in RTF-Dokumenten sollte man sich auf Windows-Bitmap (*.BMP) beschränken.

Der UDO-Befehl zum Einbinden von Grafiken sieht so aus:

        !image beispiel Eine Beispielgrafik

UDO setzt dann automatisch die Extension, die das jeweilige Ausgabeformat haben möchte: Für RTF würde man hier also eine Grafik mit dem Namen BEISPIEL.BMP benötigen, die mit dem Text "Eine Beispielgrafik" beschriftet würde. Anders bei HTML: Hier muß BEISPIEL.GIF vorliegen, die nicht beschriftet wird, statt dessen wird "Eine Beispielgrafik" als Alternativtext eingesetzt (welcher angezeigt wird, wenn der HTML-Browser keine Grafiken anzeigen kann oder soll). UDO kann allerdings keine Grafiken konvertieren! Der Anwender muß also selbst dafür sorgen, daß die Grafik im entsprechenden Format vorhanden ist.

Wie es sich für HTML-Dateien gehört, können auch Grafiken im JPEG-Format verwendet werden - defaultmäßig geht UDO allerdings von GIF-Bildern aus, JPEG oder andere Formate müssen extra angemeldet werden. Dazu gibt es den Befehl !html_img_suffix, dem man die Extension des gewünschten Bildes beifügt: Fortan erwartet UDO beim HTML-Export Grafiken mit der jew. Extension, und zwar bis zum Ende des Dokumentes oder bis mit dem gleichen Befehl eine neue Extension gesetzt wird. Im Gegensatz zum Verfahren bei GIF-Grafiken werden bei JPEG-Bildern derzeit allerdings nicht die Ausmaße ausgelesen - die width- und height-Attribute fehlen also im img src-Tag.


Der "image"-Befehl legt die Grafik immer in eine eigene Zeile (der Fließtext steht nur ober- und unterhalb der Grafik). Das ist bei vielen Exportformaten auch nicht anders möglich. Für HTML gibt es allerdings den Befehl für sog. Inline-Bilder:

        (!img [beispiel][Eine Beispielgrafik])

Hiermit kann eine Grafik direkt in den Text eingefügt werden. Das sieht dann z.B. so aus:


Hier folgt eine Inline-Grafik. Sonja


Wie man sieht, steht Text an der Unterkante der Grafik. UDO exportiert nämlich kein ALIGN-Attribut (mit dem in HTML derartige vertikale Ausrichtungen vorgenommen werden), was HTML-Browser dann wie ALIGN=BOTTOM interpretieren. Was aber, wenn man andere Ausrichtungen wünscht?

Leider bietet UDO dafür keine speziellen Befehle. Da hilft nur eins: Man muß Definitionen verwenden, um sich seine eigenen UDO-Befehle zu schreiben. Im folgenden Beispiel bringen wir UDO bei, wie man Text an der Oberkante des Bildes ausrichtet. Den entsprechenden Befehl nennen wir imaltop
(als Abkürzung für den entsprechenden HTML-Befehl IMAGE ALIGN=TOP).

  !ifdest [html]
    !define imaltop <IMG SRC="(!1)" ALT="(!2)" ALIGN=TOP>
  !else
    !define imaltop
  !endif

Gehen wir die Definition der Reihe nach durch:
Für das Zielformat HTML wird imaltop definiert durch:

<IMG SRC="(!1)"...
Das HTML-Tag zur Grafikeinbindung mit dem Parameter Nr. 1, dem Platzhalter für den Dateinamen.
 
...ALT="(!2")...
Parameter Nummer 2: Platzhalter für den Alternativtext.
 
...ALIGN=TOP>
Das ersehnte Attribut: Die Text wird an der Oberkante der Grafik ausgerichtet.
 

Für andere Formate wird eine leere Definition erzeugt - der Befehl imaltop wird also ignoriert. Im Hauptteil wird der neue Befehl dann folgendermaßen benutzt:

   (!imaltop [<Parameter 1>][<Parameter 2>])

... und an einem konkreten Beispiel:

   (!imaltop [beispiel.gif][Eine Beispielgrafik])

Im Klartext: Dem neuen Befehl imaltop werden zwei Parameter mit auf den Weg gegeben, in denen der Dateiname und der Alternativtext übergeben werden. Das Ergebnis sieht dann folgendermaßen aus:


Hier folgt eine Inline-Grafik. Sonja


Im Gegensatz zur "normalen" UDO-Grafikeinbindung muß hier die Extension (.GIF) angegeben werden!

(Anmerkung: Für einen "sauberen" HTML-Code muß die "imaltop"-Definition noch um die HEIGHT- und WIDTH-Attribute ergänzt werden. Auf gleiche Weise kann man sich dann noch eine Definition von ALIGN=MIDDLE schreiben, bei welcher der Text mittig neben dem Bild steht.)


Was ist aber, wenn man nur ein einziges Mal eine Grafik mittels ALIGN=TOP ausrichten will? Muß man dafür extra eine Definition anlegen?
Nein, natürlich nicht - sonst hätte ich nicht so blöd gefragt.  ;-)

Für solche Fälle kann man auch auf eine sog. "raw-Umgebung" zurückgreifen. Und die sehen wir uns als nächstes an.


Copyright © tobias@udo-open-source.de
Letzte Aktualisierung am 15. März 2001

Home UDO und HTML Tabellen in HTML raw-Umgebungen