3 TRENNLINIEN, IKONEN UND GRAFIKEN

In diesem Teil des Workshops beschäftigen wir uns mit den Möglichkeiten grafische Elemente in das HTML Dokument einzubinden.

Inhalt:

Trennlinien
Grafiken erstellen
Grafiken einbinden
Größe von Grafiken bestimmen
Links hinter Grafiken legen
Was man über Grafiken im Web wissen muß


Trennlinien

Es gibt mehrere Arten von Trennlinien. Ihre Aufgabe ist es, den Text übersichtlicher zu gestalten.


<HR>
Das ist eine einfache Linie


Die Trennlinie kann man unterschiedlich gestalten, verkürzen oder vergrößern. Normal werden sie über die gesamte Bildschirmbreite dargestellt.

Man kann die Größe so bestimmen:


<HR SIZE=x>

Dazu einige Beispiele:

<HR SIZE=5>


<HR SIZE=10> 


Man benutzt die Option "width"um die Länge zu bestimmen. Die Länge gibt man in Prozent oder in Pixel an:

<HR WIDTH=%> 

Beispiele:


<HR WIDTH=50%>



<HR WIDTH=25%>


Es ist auch möglich die Trennlinien auszurichten: man kann verkürzte Linien zentriert, rechts- oder linksbündig ausgeben.

Beispiele:

<HR WIDTH=25% ALIGN=RIGHT>


<HR WIDTH=25% ALIGN=LEFT>


Die Trennlinien werden normaleweise in 3D Form angezeigt. Man kann nun den Browser anweisen, keine Schattierung zu verwenden:

<HR NOSHADE>


So könnte die von uns früher bearbeitete Homepage mit Unterstützung der Trennlinien aussehen...

Grafiken erstellen

Besonders empfehlenswert für HTML Dokumente sind die Grafiken im Format GIF (Graphics Interchange Format). Sie haben sehr viele Möglichkeiten - insbesondere das Format GIF89a - wie z.B. transparente Hintergründe, man kann sie auch animieren.

Die GIF Grafiken können mit Hilfe unterschiedlicher Sharewareprogrammen erstellt werden:

  1. Sehr einfach in der Bedienung ist Paint Shop Pro für Windows. Es ermöglicht die Grafiken zu erstellen, einscannen und bearbeiten. Es erstellt auch transparente Bilder.
  2. Professionelle Grafik-Designer benutzen zum Erstellen von Web Grafiken das Programm Photoshop. Für eine vollständige Version muß man jedoch einiges bezahlen.

Wenn man selber keine Grafiken erstellen will, kann man sich im Internet bedienen. Es existieren zahlreiche Sammlungen von Bildern, Ikonen und Balken, die man runterladen kann. Aber Vorsicht: bei einigen darf dabei das Copyright nicht verletzt werden. Hier sind einige Adressen:

Grafiken einbinden

Um eine Grafik in das HTML Dokument einzubinden, muß man den Tag <IMG...> verwenden. Der Tag wird innerhalb des Dokumentes an der Stelle eingebunden, an welcher die Grafik später erscheinen soll:


<IMG SRC="dateiname.gif">

Beispiel:

<IMG SRC="images/spdknopf.gif">

Folgende Ikone wird eingefügt:

Grafiken können vertikal ausgerichtet werden:

Beispiele:


Roter Knopf <IMG SRC="images/spdknopf.gif" ALIGN=top> oben ausgerichtet

Roter Knopf oben ausgerichtet

Roter Knopf <IMG SRC="images/spdknopf.gif" ALIGn=middle;> mitte ausgerichtet

Roter Knopf mitte ausgerichtet

Roter Knopf <IMG SRC="images/spdknopf.gif" ALIGN=bottom;>unten ausgerichtet

Roter Knopf unten ausgerichtet

Grafiken können zusätzlich links oder rechts ausgerichtet sein. Wenn wir z.B. unseren Roten Knopf rechts ausrichten, wird er auf der rechten Seite des Dokumentes erscheinen und der Text wird rund um das Bild dargestellt.

So sieht dann der entsprechende HTML Tag dazu aus:


<IMG SRC="images/spdknopf.gif" ALIGN=RIGHT> Grafiken können zusätzlich...

Mit diese Kenntnisse könnte man zum Beispiel folgende Seite gestalten...

Größe von Grafiken bestimmen

Man kann auch die Anzeigegröße der Grafik beeinflussen. Dies ist möglich mittels den Optionen WIDTH und HEIGHT, mit deren Hilfe man die Breite und die Höhe der Darstellung in Pixel angeben kann.

Wir werden diese Eigenschaft benutzen, um die Größe des Bildes spdknopf.gif zu beeinflussen. Seine Originalgröße ist 30x30 Pixel, wir werden ihn zuerst in ein Bild der Größe 20x20 verwandeln

<IMG SRC="images/spdknopf.gif" WIDTH=20 HEIGHT=20>

und dann nochmal um 10 Pixel verkleinern:

<IMG SRC="images/spdknopf.gif" WIDTH=10 HEIGHT=10>

Links hinter Grafiken legen

Man kann einen Link hinter eine Grafik legen und damit die Grafik "anklickbar" machen. Um einen solchen Link zu definieren kombiniert man die Tags <A HREF...> <IMG...> </A> miteinander:


<A HREF="datei.html"><IMG SRC="datei.gif></A>

Beispiel:


<A HREF="www4.html"><IMG SRC="images/spdlink.gif></A>
Zu dem Workshop 4.

und so sieht das aus:

Zu dem Workshop 4.

Das angezeigte Bild wird mit einem blauen Rahmen umgeben, was bedeutet, daß die Grafik "anklickbar" ist. In diesem Fall wäre es aber optisch schöner den Rahmen unsichtbar zu machen. Das geschieht mit Hilfe der Option BORDER:

BORDER=0

Beispiel:


<A HREF="www4.html"><IMG SRC="images/spdlink.gif BORDER=0></A>
Zu dem Workshop 4

so würde es aussehen:

Zu dem Workshop 4.

Dieser Tag kann auch zur Darstellung von Rahmen jeder Größe nützlich sein. Um ein Rahmen von 5 Pixel rund um das Bild zu machen fügt man z.B. folgendes ein:

<IMG SRC=images/spdlink.gif BORDER=5>

Würde man einen Link hinter eine Grafik in unserem Dokument legen, würde er so aussehen...

Was man über Web Grafik wissen muß

Die Grafiken werden benutzt, um Text interessanter zu gestalten und das Interesse der Zuschauer zu wecken. Sie dürfen aber gleichzeitig nicht das Laden des Dokumentes erschweren. Deshalb gibt es ein paar Regeln, die man beim Erstellen und Einbinden von Grafiken zu beachten hat:
  • Große Grafiken brauchen sehr viel Übertragungszeit. Deshalb sollen sie am besten nicht größer als 50K sein und die Auflösung von etwa 70 dpi haben.
  • Man soll lieber die kleinen Ikonen anstatt Bildern benutzen. Sie können dann einheitlich auf allen Web Seiten eines Projektes benutzt werden.

Workshop 4: Hintergrund- und Schriftfarben


© Friedrich-Ebert-Stiftung, Aleksandra Sowa
Januar 1997