HTML Basics Tutorial

1.6. Einbau von Grafiken (Teil 2)

Kommen wir nun zur Profi-Variante. Vorneweg gesagt muß man diese nicht komplett übernehmen, sondern kann auch nur Teile davon benutzen. Du erinnerst dich vielleicht an den div align="center"-Befehl. Dort erwähnte ich schon, daß man hinter das div verschiedene Sachen schreiben kann. Dies trifft jetzt auch beim img-Befehl für die Bilder zu.

Somit dürfte der erste Befehl der Profi-Version klar sein: align="right". Dies bedeutet einfach, dass das Bild rechtsbündig sein soll - also auf der rechten Seite stehen soll. Keine Angst, eventuell vorhandener Text geht automatisch um das Bild herum.

Etwas komplizierter wird es mit width="68" height="56". Diese beiden Attribute stehen für die Breite (width) und Höhe (height) des Bildes. Diesen Befehl könnt ihr vorerst ruhig weglassen. Einziger Sinn und Zweck dieses Befehles ist es, dem Browser bereits vor dem Laden des Bildes zu sagen wie groß es ist. Da einige Bilder sehr groß sind, kann es vorkommen, daß zuerst der ganze Text fertiggeladen und angezeigt wird, das Bild aber noch nicht fertig geladen ist. Sollte man diesen Befehl nicht verwenden, würde das Bild, sobald es geladen ist auf seinem Platz erscheinen. Allerdings würde das Programm erst dann den Text beiseite schieben, da es ja vorher nicht wußte wie groß das Bild ist. Wie groß das Bild ist, erfährt man am besten, wenn man sich im Windows Explorer ein Bild ansieht und dann über die rechts Maustaste den Menüpunkt "Eigenschaften" wählt, wo die Breite und Höhe steht.
Mit dem Befehl hingegen "reserviert" das Programm den Platz für das Bild von Anfang an und die Webseite erscheint von Anfang an so wie sie auch bleibt. Wie gesagt ist dies am Anfang vernachlässigbar.

So, kommen wir zum vorletzten Befehl: border="0". border heißt übersetzt Grenze, gemeint ist jedoch die Bildumrahmung. Bei border="0" ist diese einfach Null und somit nicht vorhanden. Kein weltbewegender Befehl, aber optisch je nach Geschmack sinnvoll. Der Wert "0" sollte in Gänsefüßchen stehen, damit ihn auch alle Browser korrekt verarbeiten können. Gibst du einen höheren Wert wie z.B. "1", "2" oder "5" ein, so wird der Rahmen um das Bild herum dicker.

Der letzte Befehl ist alt="Bildbeschreibung". alt steht hier für Alternative. Damit ist die Alternative zum Bild gemeint. Während das Bild geladen wird erscheint anstelle des Bildes dieser Text. Auch wenn man nach Anzeige des Bildes mit der Maus auf das Bild geht und die Maus kurz nicht bewegt, erscheint der Text. Sehbehinderte Internetnutzer können nur mit Hilfe des alt-Attributes etwas mit den Bildern anfangen.

Texte und Bilder kennst du nun soweit, dass du tolle Webseiten gestalten kannst. Was jedoch noch dringend fehlt sind die sogenannten Links, mit denen man von einer Webseite zur nächsten gelangen kann. Die Links sind das Thema im nächsten Abschnit.

Weiterlesen...