Linien
Eine horizontale Standardlinie (siehe oben) wird mit <hr …> eingefügt. Dazu gibt es mehrere optionale Parameter, die auch in Kombination zulässig sind.
| ohne Schatten | <hr noshade> | |
| Liniendicke n= 1 … in Pixeln | <hr size=n> | (n=5) |
| Länge der Linie (in % der Bildbreite oder in Pixeln) | <hr width=66%><hr width=90> |
|
| Ausrichtung | <hr align = "center"><hr align = "left"><hr align = "right"> |
|
| Linienfarbe | <hr color = farbe> | (color = red) |
| kombinierte Angabe | <hr noshade size="17" width="25%" align="right" color="black"> |
Hintergründe
Für Hintergründe des Dokuments wie der Tabellen gibt es drei prinzipiell unterschiedliche Möglichkeiten der grafischen Gestaltung:
- Erstens kann man garnichts tun. Alle Inhalte werden auf strahlend weißer Fläche präsentiert, was nicht immer das Schlechteste ist.
- Zweitens kann dem Hintergrund eine Farbe verordnet werden. Vergeben wird diese Farbe im body-Tag mit bgcolor.Man hat einzutragen:
<body bgcolor=“farbname“ …> oder
<body bgcolor=“farbcode“..>Der Eintrag lautet also beispielsweise:
<body bgcolor=“#3300aa“…> - Drittens kann der Hintergrund „gekachelt“ werden. Dazu muß eine Grafikdatei geladen werden, die völlig unabhängig von ihrer Größe den Fensterhintergrund in Kachelform bedeckt. Eingefügt wird wieder im body-Tag diesmal mit background=“pfad/datname“. Wenn die Hintergrunddateiim gleichen Ordner wie die Textdatei steht, entfällt der Pfad. Im anderen Falle muß auf diesen Eintrag noch folgen. Beispieleinträge also, wenn die Grafikdatei etwa „etwas.jpg“ heißt und einmal im Ordner „bilder“ liegt:<body background=“etwas.jpg“> oder<body background=“bilder/etwas.jpg“>.
Wie man zu Hintergrundgrafiken kommt?
Es gibt (mindestens) drei Möglichkeiten:
- Selber machen. Ein geignetes Bild in einem der zulässigen Bildfpormate .jpg, .gif oder .? speichern. Fertig. Das Problem ist die Eignung. Da ja auf dem Bild Text gelesen werden soll, muß man sich über die zulässigen Kontraste Gedanken machen. Zweites Problem ist evtl. die Berandung. Das Bild soll die Grenzen der einzelnen Kachel möglichst nicht zeigen, es sei denn, es ist erwünscht. Drittens nehme man Rücksicht auf die spätere Ladezeit. Das Bild sollte möglichst klein sein und beim Speichern, so stark es die geforderte Qualität zuläßt, komprimiert werden.
- Vorhandene Sammlungen nutzen. Wer z.B. Microsoft Office benutzt, besitzt eine solche. Die Programm-CD dazu bietet noch Nachschlag. Man muß bloß einmal danach schauen.
- Vorhandenen Angebote nutzen. Es gibt im Internet jede Menge freier Grafik-Angebote, wo man große Mengen von Hintergründen auf einen Schlag downloaden kann.
Bilder
Es gibt drei zulässige Grafikformate für die Anzeige in Browsern.
- JPEG (Joint Photografic Expert Group), in Windows meist mit der Kennung „.jpg“, erlaubt die Einstellung einer Kompressionsrate. Damit kann man für die gewünschte Bildgröße bei ausreichender Qualität die Dateigröße minimieren. JPEG wird meist für fotorealistische Darstellungen verwendet.
- GIF (Global Interchange Format)-Dateien lassen nur weniger Farben zu und sind besser geeignet für grafische Elemente oder einfache Bilder. GIF’s lassen transparente Hintergründe sowie Animation zu. Die Erzeugung von solchen Effekten setzt entsprechende Software voraus.
- PNG (Portable Network grafic) soll alle Vorteile der beiden anderen Formate in sich vereinen.
Es gibt wie für Linien und Hintergründe jede Menge Sammlungen, Kauf- oder auch freie Angebote. Freie Bilder lassen sich auch mit der rechten Maustaste aus dem Internet speichern. Erwünscht ist natürlich besonders die eigene Bemühung, das eigene Foto oder die selbst gestaltete Animation. Bei der Umwandlung von Bildformaten, die evtl. die Scanner-Software nicht beherrscht, helfen evtl. Shareware-Tools, wie etwa Irfan-View.
Bilder werden mit dem img-Tag (von „image“) eingebunden. Dazu gehören einige Attribute, die unterschiedlich wichtig sind. Es ist eigentlich zu empfehlen, Bilder mit Hilfe eines Editors einzufügen. Der setzt nämlich die Attribute height und width auf die erforderlichen Pixelwerte, damit das Bild in Originalgröße gezeigt wird. Man kann diese Werte zwar willkürlich verändern. Das ist aber nicht ratsam, weil entweder die Bilddatei größer ist als nötig, oder die Qualität leidet.
Attribute zum <img>-Tag
| align="top middle bottom left right" | Ausrichtung der Grafik relativ zum Text |
| alt="ersatztext" | Ersatztext, der anstelle der Grafik gezeigt wird. |
| border=n | Rahmenbreite, n = 0 kein Rahmen |
| height=n | Höhe des reservierten Platzes in Pixeln |
| hspace=n | horizontaler Abstand zum umfliessenden Text in Pixeln |
| lowscr="URL" | Grafik niedriger Auflösung zur Voransicht |
| src="url" | Beispiel scr = „bilder/ich1.jpg“ |
| vspace=n | vertikaler Abstand zum umfliessenden Text in Pixeln |
| vwidth=n | Breite des reservierten Platzes in Pixeln |
Da das Laden von Grafikdateien u. U. sehr lange dauert, gibt es eine ganze Reihe von Maßnahmen, den Nutzer trotzdem nicht mehr als nötig zu vertrösten. Die Angabe von Höhe und Breite der Grafik reserviert den Grafikplatz schon beim Laden des Textes, was Zeitvorteil bringt. Es sollten übrigens immer die wirklichen Bildabmessungen benutzt werden. Veränderungen sind zwar möglich, führen immer zu Verlusten bei der Bildqualität. Das alt-Tag ermöglicht die Ankündigung, bevor das Bild erscheint bzw. er wird bei auf dem Bild verweilender Maus angezeigt. Wenn GIF-Bilder gespeichert werden, wird u.U. nach Interlacing gefragt. Wählt man diese Möglichkeit, dann wird beim späteren Laden des Bildes zunächst nur jede vierte Bildzeile gezeigt und danach erst das Bild komplettiert.
Sensitive Bilder
Man nennt eine Grafik, in der Details als Link dienen, eine verweissensitive Grafik. Über abgegrenzten Bereichen der Grafik verändert sich beim Überfahren mit der Maus der Cursor und beim Klicken wird ein Link ausgeführt.
Um eine solche Grafik anzulegen, werden zwei Tags, <map> und <area> benötigt.
Die Anlage erfordert mehrere Schritte:
Zunächst wird eine verweissensitive Grafik als Teil der Seite definiert. Diese Ankündigung muß im Body-Teil des Dokuments stehen, ist aber nicht an den Ort gebunden, an dem die Grafik erscheinen soll. Die Definition wird mit <map name=“meinbild“> eingeleitet. Der Name ist frei vergebbar und muß zulässige Zeichen enthalten. Auf das öffnende <map>-Tag folgt nun die Definition der empfindlichen (sensitiven) Bereiche. Dazu dienen jeweils <area>-Einträge. In ihnen werden die Bildbereiche definiert, die später empfindlich sein sollen. Als Attribute sind anzugeben „shape = … “ (die Form des Bereiches) mit den zulässigen Werten für shape, welche die Tabelle zeigt. Es folgen die Koordinatenangaben mit „coords = …“, die abhängig von der Wahl von shape sind. Alle Koordinatenangaben beziehen sich auf die linke obere Ecke des Bildes und geben die senkrechten (y) und waagerechten (x) Abstände von dieser Ecke in Pixeln an. Schließlich wird noch mit „href = …“ wie üblich die Adresse der anschließend zu ladenden Seite angegeben.
Maps machen Arbeit!
| shape | coords | Bedeutung |
| rect | x1,y1,x2,y2 | Rechteck, obere linke und untere rechte Ecke |
| circle | x,y,r | Kreis, Mittelpunkt und Radius |
| poly | x1,y1,...,xn,yn | Vieleck, Koordinaten aller Ecken |
| default | alle Flächen, die nicht belegt sind |
Wenn alle <area>-Einträge getätigt sind, wird die <map>-Datei mit dem schließenden Tag </map> geschlossen. Der letzte Schritt betrifft nun noch das Einfügen des Bildes selbst. Es wird wie üblich dort in den Text eingeordnet, wo es erscheinen soll. Dazu wird das <img>-Tag genutzt. Als zusätzlichen Eintrag erhält es nun außer „src = …“ das Attribut usemap = „#meinbild“. Damit wird der Bezug zur Map-Datei hergestellt.
Aufrufbeispiel:
Map-Datei:
<map name=“meinbild“>
<area shape=rect coords=“1,1,30,30″ href=“seite1.htm“>
<area shape=circle coords=“100,100,25″ href=“seite2.htm“>
<area shape=poly coords=“150,150,200,200,150,25″ href=“seite2.htm“>
</map>
Aufruf
<img src=“grafikx.gif“ usemap=“#meinbild“>